Implementation Method of js Dynamic Adding and Removing Events to Elements

Recent project to js dynamic to the element binding event, just before the use of these, by the way to learn 1, so google 1 under the event, wrote the following two events 1 add event, 1 is to remove the event

/addEventListener(),removeEventListener() Actions for specifying and deleting event handlers 
// Scope : The event handler runs within the scope of the element to which it belongs 
//addEventListener(event,function,capture/bubble);removeEventListener(event,function,capture/bubble)
// Parameter event As shown in the above table , function Is the function to execute , capture And bubble They are W3C Two time patterns are formulated ,
// Simply put capture Is from document Read from the beginning to the end 1 Row ,  Re-execute event ,  And bubble Find the specified location before executing the event .
//capture/bubble Parameters of are Boolean values , True Representation with 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 events added is the order of execution  // Pay attention to using  addEventListener  Adding tape on Events, don't add on

        obj.addEventListener('focus', function(){test('aa')} , false);

      }

      else {

        //IE  Event code of   Add to the original event  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 bind the event to input, and the test is added successfully, but the removal is always unsuccessful. So I looked for reference materials online

// Pass addEventListener() Events can be added only through the removeEventListener() To remove .  It's done like this   There are also below 1 Sentence: // When removed addEventListener() The added anonymous function cannot be removed   The problem has been found  function(){test('aa')}// Invalid , Because the incoming addEventListener() And removeEventListener() The method is not the same as 1 Methods then set the test('aa')  Put forward   Write as function test(msg){ alert(msg)} Rewrite as  function addEvent() {      var obj = document.getElementById("txtIataCity");

      if (window.addEventListener) {

        // Event codes for other browsers : Mozilla, Netscape, Firefox

        // The order of events added is the order of execution  // Pay attention to using  addEventListener  Adding tape on Events, don't add on

        obj.addEventListener('focus', test('msg')} , false);

      }

      else {

        //IE  Event code of   Add to the original event  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 ie hint is executed: Type mismatch seems to not support functions with parameters, so the function is encapsulated as a parameterless form and passed in again

Execute, add successfully, remove or fail. After searching for half a day on the Internet, almost all of them were written in this way. I don't know why I can't remove it.

Later, I saw that jquery was originally quoted in the page, so bind and unbind events of jquery were successfully used once.

Alas, solve this problem when the project is finished.