SoFunction
Updated on 2025-04-07

JS binding events and unbinding events

Two methods are used to bind multiple events in js: attachEvent and addEventListener, but there are differences between these two methods.

attachEvent method only supports IE678 and is not compatible with other browsers

addEventListener method compatible with Firefox Google, not compatible with IE8 and below

addEventListener method

('click',fn);

('click',fn2);
function fn(){ ("Spring rain"); }

function fn2(){
        ("Wet everywhere");
      }

attachEvent method

('onclick',fn);
('onclick',fn2);
function fn(){ ("Spring rain"); }
function fn2(){
        ("Wet everywhere");
      }

Note: The event bound to the attachEvent method is on, and the event bound to the addEventListener does not have on.

Below I wrote a method that is compatible with IE and Firefox Google

var div=("div")[0];
      addEvent('click',div,fn)
      function addEvent(str,ele,fn){
        ?('on'+str,fn):(str,fn);
      }
      function fn(){
        ("Spring rain");
      }

This perfectly solves the compatibility problem

If there is a binding event, there will definitely be an unbinding event, but the unbinding event is the same as the binding event. The evil IE will still be special.

DetachEvent method only supports IE678 and is not compatible with other browsers

RemoveEventListener method compatible with Firefox Google, not compatible with IE8 and below

How to write detachEvent method:

("onclick",fn);

How to write removeEventListener:

("click",fn);

Below I have written a compatibility method for your reference, and the implementation is also very simple

function remove(str,ele,fn){
        ?("on"+str,fn):(str,fn);
      }

Note: Whether it is binding event attachEvent or detachEvent, you need to add on. RemoveEventListenser and addEventListenser do not need to add on.

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more