javascript一个重要知识点：事件。

Posted 2020-08-08

javascript是事件驱动的，那什么是事件?事件就是在javascript中被侦测到DOM元素行为，就称之为javascript事件。

2、事件的三个阶段

事件的三个阶段分别为：

1、捕获阶段 2、目标阶段3、冒泡阶段。

捕获的概念：就会为了找到目标DOM元素，会从上往下一级一级查找，直到找到目标DOM元素。（window->document->html->body->......->目标DOM元素。

冒泡的概念：目标事件执行后，会从下往上一级一级查找是否有相同事件类型，直到window。

3、事件的绑定方式

1、最简单绑定方式：btn.onclick=function(){};

2、W3C标准绑定方式：addEventListener(事件名称，事件处理程序，useCapture)第三个参数是布尔值，如果是true表示捕获，如果是false就是冒泡，默认为冒泡。

3、IE中：attachEvent("on" + 事件名称, 事件处理程序)这个方法不支持：捕获阶段。

4、三种绑定事件this的指向问题。

1、 onclick 事件中的this 就是 当前对象

2、addEventListener 事件处理程序中的this：当前对象

3、attachEvent 事件处理程序中的this ： window

5、事件兼容的封装

 var addEvent = function() {
   //属于方法检测，判断window是否有该方法
    if(window.addEventListener) {

        return function f1(target, type, handler) {
            target.addEventListener(type, handler);
        };
    } else if(window.attachEvent) {

        return function f2(target, type, handler) {
            target.attachEvent("on" + type, function() {
                handler.apply(target);//因为this默认指向window，所以通过apply方法来改变this的指向问题
             //apply使用方法：function.apply(第一个参数，第二个参数）
             // 第一个参数：表示指向那个对象来调用函数
             // 第二个参数：是一个数组或者是伪数组的对象 （这个参数是可选的）
             这个数组中的每一项的值，都将作为被调用函数的参数
            });
        };
    } else {

        return function f3(target, type, handler) {
            target["on" + type] = handler;
        };
    }
}();

 //封装事件兼容函数使用到了闭包技术，目的是：当在页面中多次调用该函数，可以避免重复判断，提高js执行效率。