Encapsulation of adding and deleting native js events_javascript skills

To add or delete events in IE browser, use attachEvent and detachEvent. In other standard browsers, addEventListener and removeEventListener are used. The following encapsulates the addition and deletion of events. Let’s just look at the code!

/**
* @description 事件绑定，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
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 additions about the meaning of the third parameter of addEventListener

The third parameter of addEventListener

The function used to add trigger events in W3C DOM is called AddEventListener, but I never know what the third parameter of this function is used for. I always set it casually and never found it. No matter how different the difference is, I finally saw the explanation when I read ppk on javascript two days ago. As for the DOM standard document that existed a long time ago, I actually never looked for information about this parameter at all.

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, it will be Bubbling. It will only have an impact under certain circumstances. It is usually recommended to use false. The situation that will have an impact is that the target element (target element) has an ancestor element (ancestor element), and it also has the same event corresponding function. I think it will be clearer by looking at the picture.

Example of two-layer div block

As shown in this picture, my example has two layers of div elements, and both are set with click events. Generally speaking, if I click on the inner blue element, not only the blue element will be triggered. The click event will also trigger the click event of the red element at the same time, and the useCapture parameter controls the order of the two click events at this time. If it is false, then bubbling will be used. It is an inside-out process, 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, it will be capture. In contrast to bubbling, it will be executed by Outside-in, the click event of the red element will be executed first and then the click event of the blue element will be executed. Attached are two examples, capture and bubbling. The only difference between the two files is this parameter. It can be found that the order of events is different.

What if elements in different layers use different useCaptures? That is, it will first search for the event set to capture from the outermost element to the target element. After reaching the target element and executing the event of the target element, it will then look for the event set to bubbling outward along the original path.