先来看个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="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的绑定事件了。
时间： 2024-10-17 21:26:03