jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

1. 事件冒泡和事件委托

在进行前端开发中，我们常常会遇到给一个或多个元素绑定事件的需求。而绑定事件的方式有两种，事件冒泡和事件委托。

事件冒泡：当一个元素触发事件时，它的父级元素也会收到该事件的触发消息，如果该父级元素也绑定了相同类型的事件，该事件同样会被触发。

示例代码：

<ul id="linkList">
  <li>百度</li>
  <li>谷歌</li>
  <li>必应</li>
</ul>

<script>
var linkList = document.getElementById('linkList');

// 给每个li绑定click事件
for (var i = 0, len = linkList.children.length; i < len; i++) {
  linkList.children[i].onclick = function(e) {
    console.log(this.innerHTML);
  }
}
</script>

通过上面的示例代码，我们给每个li绑定了click事件，但是在点击li元素时，ul元素也会收到该事件的触发消息，并且console.log会打印三次。

事件委托：将事件绑定到父级元素上，利用事件的冒泡原理，当子元素触发该事件时，该事件会一直冒泡到父级元素上，并且可以通过事件源对象判断具体是哪个子元素触发的该事件。通过这个方法，我们在动态添加或删除子元素时方便维护和使用。

示例代码：

<ul id="linkList">
  <li>百度</li>
  <li>谷歌</li>
  <li>必应</li>
</ul>

<script>
var linkList = document.getElementById('linkList');

linkList.addEventListener('click', function(e) {
  var target = e.target;
  if (target.tagName === 'LI') {
    console.log(target.innerHTML);
  }
});
</script>

通过上面的示例代码，我们将click事件绑定到了ul元素上，并且通过判断target元素的标签名，只在li元素上触发click事件。

1. 阻止和允许事件冒泡的三种实现方法

通常来说，我们并不想让事件一直从子元素冒泡到父级元素，这时就需要用到下面三种实现方法。

（1）e.stopPropagation()

e.stopPropagation()用于停止事件在DOM树中的传播。当某个元素上触发了一个事件时，事件会传播到这个元素的父节点、祖先节点以及所有兄弟节点上，如果不希望该事件再继续传播，可以使用e.stopPropagation()。

示例代码：

<ul id="linkList">
  <li>百度</li>
  <li>谷歌</li>
  <li>必应</li>
</ul>

<script>
var linkList = document.getElementById('linkList');

linkList.addEventListener('click', function(e) {
  var target = e.target;
  if (target.tagName === 'LI') {
    e.stopPropagation();
    console.log(target.innerHTML);
  }
});
</script>

通过在li元素上使用e.stopPropagation()来阻止事件继续向上冒泡，只在li元素上触发click事件。

（2）return false

return false用于防止事件的默认行为，同时也会停止事件的传播，即相当于同时使用了e.preventDefault()和e.stopPropagation()。

示例代码：

<ul id="linkList">
  <li>
    <a href="http://www.baidu.com">百度</a>
  </li>
  <li>
    <a href="http://www.google.com">谷歌</a>
  </li>
  <li>
    <a href="http://cn.bing.com">必应</a>
  </li>
</ul>

<script>
var linkList = document.getElementById('linkList');

linkList.addEventListener('click', function(e) {
  var target = e.target;
  if (target.tagName === 'A') {
    console.log(target.innerHTML);
    return false;
  }
});
</script>

通过在a元素上使用return false来防止事件的默认行为，同时也会停止事件的传播。

（3）stopImmediatePropagation()

stopImmediatePropagation()用于停止事件在DOM树中的传播，同时也会阻止后面所有其他处理函数的执行。

示例代码：

<ul id="linkList">
  <li>
    <a href="#">百度</a>
  </li>
  <li>
    <a href="#">谷歌</a>
  </li>
  <li>
    <a href="#">必应</a>
  </li>
</ul>

<script>
var linkList = document.getElementById('linkList');

linkList.addEventListener('click', function(e) {
  console.log('第一个处理函数');
  e.stopImmediatePropagation();
});

linkList.addEventListener('click', function(e) {
  console.log('第二个处理函数');
});
</script>

通过在第一个事件处理函数中使用stopImmediatePropagation()来阻止第二个事件处理函数的执行。