js事件介绍¶

1. 事件绑定的方式¶

// 第一种：直接绑定在dom上
<div onclick="fun();">click</div>
// 第二种，使用onclick
document.getElementById("xxx").onclick = function(){

};
// 第三种：使用推荐的标准模式
document.getElementById("xxx").addEventListener("click",function(e){

});

2. 事件冒泡¶

当一个元素的事件触发了，同样的事件会在该元素的所有祖辈元素中触发一次，事件冒泡(从里往外).

默认事件

2.1示例¶

<ul>
    <li>
        <p>
            <a href="#">a元素</a>
        </p>
    </li>
</ul>

window.onload = function () {
    const ulEle = document.querySelector("ul");
    const liEle = document.querySelector("li");
    const pEle = document.querySelector("p");
    const aEle = document.querySelector("a");

    ulEle.onclick = function(){
        console.log("ul 被点击");
    }
    liEle.onclick = function(){
        console.log("liEle 被点击");
    }
    pEle.onclick = function(){
        console.log("pEle 被点击");
    }
    aEle.onclick = function(){
        console.log("aEle 被点击");
    }
}

ulEle.addEventListener("click", function () {
  console.log("ul 被点击");
}, false)

liEle.addEventListener("click", function () {
    console.log("liEle 被点击");
}, false)

pEle.addEventListener("click", function () {
    console.log("pEle 被点击");
}, false)

aEle.addEventListener("click", function () {
    console.log("aEle 被点击");
}, false)

事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。

3. 事件捕获¶

当一个元素的事件触发了，同样的事件会在该元素的所有子元素中触发一次，事件捕获(从外往里).

ulEle.addEventListener("click", function (e) {
    console.log("ul 被点击");
}, true)

liEle.addEventListener("click", function () {
    console.log("liEle 被点击");
}, true)

pEle.addEventListener("click", function () {
    console.log("pEle 被点击");
}, true)

aEle.addEventListener("click", function () {
    console.log("aEle 被点击");
}, true)

4. 示例¶

<!DOCTYPE html>
<html>
<head>
    <title>event</title>
</head>
<body>
    <div id="obj1">
        welcome
        <h5 id="obj2">hello</h5>
        <h5 id="obj3">world</h5>
    </div>
    <script type="text/javascript">
        var obj1=document.getElementById('obj1');
        var obj2=document.getElementById('obj2');
        obj1.addEventListener('click',function(){
            alert('hello');
        },false);
        obj2.addEventListener('click',function(){
            alert('world');
        })
    </script>
</body>
</html>

如上所示，这是一个十分简单地文档结构：document > html > body > div > h5 并且分别在obj1,obj2上绑定了一个点击事件，由于addEventListener的第三个参数为false,所以页面是在冒泡阶段处理绑定事件。此时整个页面可以有三种行为出现

点击文字welcome时，弹出hello。此时就只触发了绑定在obj1上的点击事件。具体冒泡实现过程如下：welcome 属于文本节点，点击后，开始从文本节点查找，当前文本节点没有绑定点击事件，继续向上找，找到父级（id为obj1的div），有绑定的点击事件，执行，再向上找，body，没有绑定点击事件，再到html,document,都没再有绑定的点击事件，好，整个冒泡过程结束。