JavaScript事件详解

 

 

• 事件句柄
• 事件流
• 事件对象

 

事件句柄：

　　addEventListener() 方法用于向指定元素添加事件句柄。

　　removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。

优点：

1. 方便代码修改
2. 可以添加多个事件
3. 便于移除事件

 

<button id="b">按钮</button>
<script>
    var b = document.getElementById("b");
    b.addEventListener("click",one);
    b.addEventListener("click",two);

    function one() {
        alert("123");
    }

    function two() {
        alert("456");
    }

</script>

 

 

 

 

事件流

 

事件流描述的是页面中接受事件的顺序，分为事件冒泡和事件捕获

事件冒泡：由最具体的元素接受事件，然后逐级向上传递，直到最不具体的元素节点

事件捕获：和事件冒泡相反，最不具体的元素节点接受，然后逐级传递，直到最具体的元素接受事件

 

举个事件冒泡的例子：

 

<div id="di">
    <button id="btn">按钮</button>
    <a href="http://www.baidu.com" id="ai">百度</a>

</div>




<script>

    var btn = document.getElementById("btn");
    var di = document.getElementById("di");
    var ai = document.getElementById("ai");

    document.getElementById("btn").addEventListener("click",one);
    document.getElementById("di").addEventListener("click",two);
    document.getElementById("ai").addEventListener("click",three);

    function one() {
        alert("one");
    }
    function two() {
        alert("two");
    }
    function three(e) {
        alert("three");
//        e.stopPropagation();
//        e.preventDefault();
    }

</script>

 

 

 

事件对象

 

在出发DOM事件的时候都会产生一个对象

事件对象event:

type:获取事件类型

target：获取事件目标

stopPropagation()：阻止事件冒泡

preventDefault()：阻止事件默认行为

<div id="di">
    <button id="btn">按钮</button>
    <a href="http://www.baidu.com" id="ai">百度</a>

</div>




<script>

    var btn = document.getElementById("btn");
    var di = document.getElementById("di");
    var ai = document.getElementById("ai");

    document.getElementById("btn").addEventListener("click",one);
    document.getElementById("di").addEventListener("click",two);
    document.getElementById("ai").addEventListener("click",three);

    function one() {
        alert("one");
    }
    function two() {
        alert("two");
    }
    function three(e) {
        alert("three");
        e.stopPropagation();
        e.preventDefault();
    }

</script>

 

 

 

可以看到百度链接已经失去了原来的行为，点击不会跳转到百度页面

 

 

 

 

 

 

　　

转载于:https://www.cnblogs.com/lyd447113735/p/8909298.html