How to add and delete a listener using Javascript _ javascript skills

This article mainly introduces the use of adding and deleting listeners to Javascript, analyzes in detail the principles and usage of javascript, and supplements the compatibility issues of event listening, which is of great practical value, for more information about how to add or delete a listener in Javascript, see the following example. Share it with you for your reference. The specific analysis is as follows:

In js, event listening is to bind an event using addEventListener, which is very common and simple in jquery, but complicated in native js, here we have sorted out the tests and examples of various methods for the addEventListener event for your reference.

When I added a listener when I was playing the player two days ago, I encountered some trouble in deleting the listener. After I checked it, I found that the parameters must be exactly the same. What is exactly the same? In other words:

The Code is as follows:

$ ('. Video') [0]. addEventListener ('timeupdate', currentTimeHandler, true );

For example, you need to input three parameters to delete the statement. Why do you need to delete the statement? Yes, it's right here:
When adding and removing, the third parameter can indeed be left blank, but their default conditions are different !!

Generally, addEventListener is false...
1. Add Custom Event listening

The Code is as follows:

Var eventHandlesCounter = 1; // counts the number of added event listeners. 0 is reserved.
Function addEvent (obj, evt, fn ){
If (! Fn. _ EventID) {fn. _ EventID = eventHandlesCounter ++ ;}
If (! Obj. _ EventHandles) {obj. _ EventHandles = [];}
If (! Obj. _ EventHandles [evt]) {
Obj. _ EventHandles [evt] = [];
If (obj ["on" + evt] instanceof Function ){
Obj. _ EventHandles [evt] [0] = obj ["on" + evt];
Obj ["on" + evt] = handleEvents;
}
}
Obj. _ EventHandles [evt] [fn. _ EventID] = fn;

Function handleEvents (){
Var fns = obj. _ EventHandles [evt];
For (var I = 0; I Fns [I]. call (this );
}
}

2. Custom deletion event listening

The Code is as follows:

Function delEvent (obj, evt, fn ){
If (! Obj. _ EventHandles |! Obj. _ EventHandles [evt] |! Fn. _ EventID ){
Return false;
}
If (obj. _ EventHandles [evt] [fn. _ EventID] = fn ){
Delete obj. _ EventHandles [evt] [fn. _ EventID];
}
}

3. Correct the above method

The Code is as follows:

Function addEvent (obj, evt, fn, useCapture ){
If (obj. addEventListener) {// use W3C event registration first
Obj. addEventListener (evt, fn ,!! UseCapture );
} Else {
If (! Fn. _ EventID) {fn. _ EventID = addEvent. _ EventHandlesCounter ++ ;}
If (! Obj. _ EventHandles) {obj. _ EventHandles = [];}
If (! Obj. _ EventHandles [evt]) {
Obj. _ EventHandles [evt] = [];
If (obj ["on" + evt]) {
(Obj. _ EventHandles [evtype] [0] = obj ["on" + evtype]). _ EventID = 0;
}
Obj ["on" incluevtype+addevent.exe cEventHandles;
}
}
}
AddEvent. _ EventHandlesCounter = 1;
AddEvent.exe cEventHandles = function (evt ){
If (! This. _ EventHandles) {return true ;}
Evt = evt | window. event;
Var fns = this. _ EventHandles [evt. type];
For (var I = 0; I If (fns [I] instanceof Function ){
Fns [I]. call (this );
}
}
};
Function delEvent (obj, evt, fn, useCapture ){
If (obj. removeEventListener) {// first remove the event handler using W3C
Obj. removeEventListener (evt, fn ,!! UseCapture );
} Else {
If (obj. _ EventHandles ){
Var fns = obj. _ EventHandles [evt];
If (fns) {delete fns [fn. _ EventID];}
}
}

4. Standardized event objects

The Code is as follows:

Function fixEvent (evt ){
If (! Evt.tar get ){
Evt.tar get = evt. srcElement;
Evt. preventDefault = fixEvent. preventDefault;
Evt. stopPropagation = fixEvent. stopPropagation;
If (evt. type = "mouseover "){
Evt. relatedTarget = evt. fromElement;
} Else if (evt. type = "mouseout "){
Evt. relatedTarget = evt. toElement;
}
Evt. charCode = (evt. type = "keypress ")? Evt. keyCode: 0;
Evt. eventPhase = 2;
Evt. timeStamp = (new Date (). getTime ();
}
Return evt;
}
FixEvent. preventDefault = function () {this. returnValue = false ;}
FixEvent. stopPropagation = function () {this. cancelBubble = true ;};

The fixEvent function is not executed independently. It must have an event object parameter and be executed only when an event occurs! The best way is to integrate it into execEventHandles of the addEvent function.

The Code is as follows:

AddEvent.exe cEventHandles = function (evt) {// traverses all event processing functions and executes
If (! This. _ EventHandles) {return true ;}
Evt = fixEvent (evt | window. event); // standardize it here
Var fns = this. _ EventHandles [evt. type];
For (var I = 0; I <fns. length; I ++ ){
If (fns [I] instanceof Function ){
Fns [I]. call (this, evt); // and use it as the first parameter of the event processing function
// In this way, the event object can be accessed in a unified way within the event handler function }}};

The above is a high handwriting. Below are some examples of actual listening tasks.

The Code is as follows:

Test6.html