首页 > 代码库 > Javascript 事件冒泡

Javascript 事件冒泡

2024-08-07 09:20:20   218人阅读

先来看个Javascript 事件冒泡的例子. 在div 元素中有一个button，他们都绑定了一个click事件，这是能够产生事件冒泡的前提。当你 单击button的时候，会弹出两个警告框，一个是button的click事件引起的，另一个是div的click事件产生的。 你只单击了button，div的元素也触发了click事件，这就是事件冒泡引起的。

<html>    <head>        <title>event bubble sample</title>    </head><body>    <div style="width: 200px;height: 200px;background-color: #483d8b" id="myDiv">        <input type="button" value="http://www.mamicode.com/button" id="btn" />    </div>    <script type="text/javascript">        var div = document.getElementById("myDiv");        div.addEventListener("click", function(event) {            alert("this is div click");        });        var btn = document.getElementById("btn");        btn.addEventListener("click", function(event) {            alert("this is button click");        });    </script></body></html>

既然已经知道什么是时间冒泡了，那么该如何避免这种情况的出现呢。(在一般情况下，我们是不希望事件冒泡产生的副作用的)

1.使用stopPropagation(). 只需要在上面的button 事件绑定的时候，添加上event的这个方法。如下所示：

        btn.addEventListener("click", function(event) {            alert("this is button click");            event.stopPropagation();        });

这个时候就只会触发button的click事件，div的click事件不会触发。

上面这个方法是最简便，改动最小的写法。那还有没有更好的方法呢！！！

2.使用事件委托。事件委托 就是把事件不直接定义在目标元素上，而是定义在它的外层节点上。这其实是利用了事件冒泡技术来实现的。

        var div = document.getElementById("myDiv");        div.addEventListener("click", function (event) {            switch (event.target.id) {            case "myDiv":                alert("this is div click");                break;            case "btn":                alert("this is button click");                break;            }        });

这时只会触发一次click事件。

事件委托还不止这一个好处：

1.减少dom操作的次数，提高性能。

2.整个页面占用的内存也更少，提高性能。

3.如果一会button会被以除掉，也不用担心会遗忘remove掉button的绑定事件了。

 

Javascript 事件冒泡


联系
我们