Add or delete events in IE browser with attachEvent and detachEvent. In other standard browsers, addEventListener and removeEventListener are used. The following encapsulates the addition and removal of events. Just look at the code!
/*** @description Event binding, compatible with browsers* @param target* Event trigger object* @param type* Event* @param func* Event handler 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 removal, compatible with each browser* @param target* Event trigger object* @param type* Event* @param func* Event handler 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 supplements about the meaning of the third parameter of addEventListener
The third parameter of addEventListener
The function used to add a trigger event in W3C DOM is called AddEventListener. However, I have never known what the third parameter of this function is to be used for. I always set it casually and didn't find any difference. I finally saw the explanation when I read ppk on javascript two days ago. As for the standard DOM files that were found a long time ago, I actually never looked for information about this parameter.
This parameter is called useCapture, which is a boolean value, which is true or false. If true is sent, the browser will use the Capture method. If false is, it is Bubbling, which will only have an impact in specific situations. It is usually recommended to be false. The situation where there will be an impact is that the target element has an ancestor element and the same event correspondence function. I think it will be clearer to see the picture.
The example has two layers of div blocks
As shown in this picture, my example has two layers of div elements, and both set a click event. Generally speaking, if I click on the inner blue element will not only trigger the click event of the blue element, but also trigger the click event of the red element at the same time. The useCapture parameter is to control the order of the two click events at this time. If it is false, then bubbling will be used. It 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. If it is true, then it is capture. On the contrary, bubbling will be from the outside to the inside. The click event of the red element will be executed first before the click event of the blue element will be executed. Attached are two examples, capture and bubbleng. The two files are only different in this parameter, so you can find that the sequence of events occurs is different.
What if the useCapture used by elements of different layers is different? It means that from the outermost element, it will first look for events set as capture to the target element, and after reaching the target element to execute the event of the target element, then look out for events set as bubble.