JS事件触发流程

2018-06-22

JS事件触发的流程

JS事件触发的流程

DOM2事件流分为三个阶段：事件捕获–》事件目标–》事件冒泡（IE8及更早版本不支持事件流。。）。

HTML事件处理程序:

1	<input type="button" name="" id="btn" onclick="alert('hello world~');">

DOM0级事件处理程序：

<input type="button" name="" id="btn2">
// 获取html元素
var btn2 =document.getElementById('btn2');
//  给获取到的元素绑定点击事件
btn2.onclick=function(){
    alert('hello world~');
}
// 取消绑定的事件
btn2.onclick=null;

DOM2级事件处理程序：

使用addEventListener和removeEventListener来处理事件。 事件名没有on。onclick需改为click

事件捕获：事件发生（onclick,onmouseenter..）时首先发生在document(或window？)上，然后依次传递给
html、body …最后到目标元素的节点上（即事件目标），属于自上而下。
事件冒泡：事件到达时间目标后不会结束，会逐层向上冒泡，直到document对象，属于自下而上。

onclick–》事件冒泡，重写onclick会覆盖之前的属性

1
2
3

ele.onclick=function(e){
    //....
} // 解绑定事件，将onclick属性设置为null即ele.onclick=null

addEventListener(event.type,handle,boolean);IE8及以下不支持，可添加多个方法不被覆盖。

// 事件类型没有on，false表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。如果handle是同一个方法，只执行一次
ele.addEventListener('click',function(){..},false);
// 解除事件，参数和绑定一样
ele.removeEventListener(event.type,handle,boolean);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div><span>请点击下面两个深色的div,查看触发机制</span></div>
    <div id="parent1">
        parent1
        <div id="child1" style="width: 200px;height: 100px;background-color: #555;margin: 20px;">
            child1
            事件捕获阶段触发事件
        </div>
    </div>

    <div id="parent2">
        parent2
        <div id="child2" style="width: 200px;height: 100px;background-color: #eee;margin: 20px;">child2事件冒泡阶段触发事件</div>
    </div>

    <script type="text/javascript">
        document.getElementById('parent1').addEventListener('click',function(e){
            alert('parent事件被触发:'+this.id);
        },true);
        document.getElementById('child1').addEventListener('click',function(e){
            alert('child事件被触发:'+this.id);
        },true);
        document.getElementById('parent2').addEventListener('click',function(e){
            alert('parent事件被触发:'+this.id);
        },false);
        document.getElementById('child2').addEventListener('click',function(e){
            alert('child事件被触发:'+this.id);
        },false);
    </script>
</body>
</html>

阻止默认事件

return false:通过on这种方式绑定的事件

ele.onclick=function(){
    ...
    return false;
}

event.preventDefault()：阻止通过addEventListener()添加的事件的默认事件

element.addEventListener('click',function(e){
    var event=e || window.event;
    ....
    event.preventDefault(); 
    })

* 事件委托

事件委托：利用事件冒泡的特性，将里层的事件委托给外层事件根据event对象的属性进行事件委托，改善性能。（利用事件冒泡处理动态元素事件绑定的方法）

常用场景：动态添加元素标签节点并绑定事件。

参考资料
 参考资料