js事件

1. 事件流

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

事件冒泡
事件捕获

2.DOM事件流

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

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

3.事件处理程序

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

HTML事件处理程序

<script>
    function showMessage() {
        alert("hello")
    }
</script>
<body>
       <div onclick="showMessage()">click me</div>
</body>

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

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

DOM0级事件处理程序

<body>
    <div id="div">click me</div>
</body>
<script>
    var myDiv = document.getElementById("div")
    myDiv.onclick = function () {
        alert("hello");
    }
</script>

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

<body>
    <div id="div">click me</div>
</body>
<script>
    var myDiv = document.getElementById("div")
    myDiv.addEventListener("click", function a() {
        alert(this.id);
    }, false);
    myDiv.removeEventListener("click", function a() {
        alert(this.id);
    }, false)
</script>

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

<body>
    <div id="div">click me</div>
</body>
<script>
    var myDiv = document.getElementById("div")
    myDiv.attachEvent("onclick", function () {
        alert(this.id);
    });
    myDiv.detachEvent("onclick", function () {
        alert(this.id);
    })
</script>

跨浏览器的事件处理程序
要保证处理事件能够在大多数的浏览器下一致的运行，可以用以下的方式
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提交等等。

<body>
  <a href="http://www.w3school.com.cn" id="link">link</a>
</body>
    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接收到。