Recently, in the project, you need to dynamically give element binding events to js. You haven't used these before. By the way, you can learn about it. So you Google the events and wrote the following two events, one adds events and the other is to remove events.
/addEventListener(), removeEventListener() is used to handle the operations of specifying and deleting event handlers //Scope: The event handler will run within the scope of its element. //addEventListener(event, function,capture/bubble); removeEventListener(event, function,capture/bubble)//Parameter event is shown in the above table. function is the function to be executed. capture and bubble are two time modes formulated by W3C. //Simplely, capture is to read the last line from the beginning of the document, and then execute the event. Bubble first finds the specified position and then executes the event. //capture/bubble parameters are Boolean values, True means to use capture, False is bubble function addEvent() { var obj = document.getElementById("txtIataCity"); if (window.addEventListener) { //Event codes for other browsers: Mozilla, Netscape, Firefox //The order of added events is the execution order //Note that add events with on using addEventListener, without adding on obj.addEventListener('focus', function(){test('aa')} , false); } else { //The event code of IE adds the add method obj.attachEvent('onfocus', function(){test('aa')}); } } function removeEvnent() { var obj = document.getElementById("txtIataCity"); if (window.removeEventListener) { obj.removeEventListener('focus', function(){test('aa')}, false); } else { obj.detachEvent('onfocus', function(){test('aa')}); } }When the page is loaded, the above method is called to the input binding event. The test is added successfully, but the removal is never successful. So I searched for reference materials online
//Events added through addEventListener() can only be removed by removeEventListener(). This is done. There is another sentence below: //The anonymous function added by addEventListener() when removing will not be removed. The problem was found. Function(){test('aa')}//Invalid, because the methods passed in addEventListener() and removeEventListener() are not the same method, so test('aa') is proposed and written as function test(msg){ alert(msg)} is rewritten to function addEvent() { var obj = document.getElementById("txtIataCity"); if (window.addEventListener) { //Event codes for other browsers: Mozilla, Netscape, Firefox //The order of added events is the execution order //Note that adds events with on using addEventListener, without adding on obj.addEventListener('focus', test('msg')} , false); } else { //The event code of IE adds the add method obj.attachEvent('onfocus', test('msg')}); } } function removeEvnent() { var obj = document.getElementById("txtIataCity"); if (window.removeEventListener) { obj.removeEventListener('focus',test('msg')}, false); } else { obj.detachEvent('onfocus',test('msg')); } }So the execution ie prompt: The type mismatch seems to not support functions with parameters, so the function is encapsulated into a parameterless form again.
Execution, addition succeeded, removal or failure. After searching online for a long time, I almost wrote this way and it was successful. I don’t know why I couldn’t remove mine.
Later, I saw that jquery was originally referenced on the page, so I used the bind and unbind events of jquery to succeed.
Alas, let’s solve this problem when the project is finished.
The above js dynamic implementation method of adding and removing events to elements is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.