js事件

1. 事件流

描述的是从页面接收到事件的顺序，分为

• 事件冒泡

  
  
  

• 事件捕获

  
  
  

2.DOM事件流

包括三个阶段：事件捕获阶段（截获事件），处于目标阶段（实际的目标接收到事件），事件冒泡阶段（对事件作出响应）。

在事件捕获阶段不会接收到事件，直接进行下一阶段。

3.事件处理程序

响应 事件（用户或者浏览器的动作）的函数

• HTML事件处理程序

       
click me

html和javascript代码紧密耦合，修改起来不是很方便，要同时修改html和js代码

下面是使用javascript指定事件处理程序：

• DOM0级事件处理程序

    
click me

• DOM2级事件处理程序
  定义了addEventListener()，removeEventListener()，包含三个参数 绑定的事件，触发事件要执行的函数，布尔值（true表示事件捕获，false表示事件冒泡），默认为false。

    
click me

• IE事件处理程序
  实现了与DOM中类似的方法，attachEvent()，detachEvent()，接收两个参数，事件处理名称和事件处理函数。

    
click me

• 跨浏览器的事件处理程序
  要保证处理事件能够在大多数的浏览器下一致的运行，可以用以下的方式
  1. 首先创建一个addHandler()，负责判断使用DOM0级，DOM2级还是IE方法来添加事件。由三个参数：要操作的元素，事件名称，事件处理函数。
  2. 创建一个removeHandler()，移除事件处理程序。同样接收三个参数。

var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;
            }
        }
    }

4.事件对象

在触发DOM事件的时候，会产生一个事件对象event，包含着和事件相关的信息。
this，event.currentTarget，event.target之间的关系：

    var myDiv = document.getElementById("div")
    myDiv.addEventListener("click", function (event) {
        console.log(event);
        console.log(this);
        console.log(event.target);
        console.log(event.currentTarget);
    }, false);
    
    document.body.addEventListener("click", function (event) {
        console.log(event);
        console.log(this);
        console.log(event.target);
        console.log(event.currentTarget);
    }, false);

上面的结果可以看到 this和event.currentTarget 的值是一样的，而target是真正触发的元素。

5.如何阻止事件默认的行为

preventDefault()用于阻止事件默认的行为，比如阻止链接跳转，阻止submit提交等等。

  link

    var myDiv = document.getElementById("link")
    myDiv.addEventListener("click", function (event) {
        event.preventDefault();
    }, false);

6.停止事件在DOM中的传播

stopPropagation()用于停止事件在DOM中的传播

var myDiv = document.getElementById("div")
    myDiv.addEventListener("click", function (event) {
        console.log("click div")
        event.stopPropagation();
    }, false);
    document.body.addEventListener("click", function (event) {
       console.log("click body")
    }, false);

结果只输出了：click div
事件没有被document.body接收到。