Encapsulation of native js event addition and deletion _ javascript skills

To add or delete events in IE, use attachEvent and detachEvent. The following encapsulation is used to add and delete events, if you are interested, refer to add or delete events using attachEvent and detachEvent in IE browser. In other standard browsers, addEventListener and removeEventListener are used. The following encapsulates the addition and deletion of events. Check the Code directly!

/*** @ Description event binding, compatible with various browsers * @ param target * event trigger object * @ param type * event * @ param func * event processing function */function bind (target, type, func) {if (target. addEventListener) {// non-ie and ie9target. addEventListener (type, func, false);} else if (target. attachEvent) {// ie6 to ie8target. attachEvent ("on" + type, func);} else {target ["on" + type] = func; // ie5}/*** @ description event removed, compatible with various browsers * @ param target * event trigger object * @ param type * event * @ param func * event processing function */function unbind (target, type, func) {if (target. removeEventListener) {target. removeEventListener (type, func, false);} else if (target. detachEvent) {target. detachEvent ("on" + type, func);} else {target ["on" + type] = null ;}}

Other supplementary Meanings of the third addEventListener Parameter

The third parameter of addEventListener

The function in W3C DOM used to add events to trigger events is called AddEventListener. However, I have never known what the third parameter of this function is for. It is always set at will and no difference is found, two days ago, ppk on javascript finally showed that, as for standard DOM files that existed a long time ago, I did not find the parameter information.

This parameter is called useCapture. It is a boolean value, that is, true or false. If the parameter is true, the browser uses the Capture method. If the parameter is false, the browser uses the Bubbling method. This parameter is affected only under certain conditions, we recommend that you set this parameter to false. In this case, the target element has the ancestor element and has the same event-related function. I think, the figure is clear.

The example has two p blocks.

As shown in this figure, my example has two p elements and each has a click event. Generally, if I click a blue element in the inner layer, it will not only trigger the click Event of the blue element, but also trigger the click Event of the red element, the useCapture parameter controls the order of the two click events at this time. If it is false, the bubbling will be used, which is a process from the inside out, so the click Event of the blue element will be executed first and then the click Event of the red element will be executed. If it is true, that is, capture, which is opposite to bubbling. The click Event of the blue element is executed only when the click Event of the red element is executed first. The following two examples are attached: capture and bubbling. Only the difference between the two files is that the order of events is different.

What if useCapture is used for different layers of elements? It first looks for the event set as capture from the outermost layer element to the target element, and then finds the event set as bubbling after the event arrives at the target element to execute the target element.