说一说事件冒泡，事件捕获,事件委托

事件冒泡是从当前触发事件的对象逐层向上传递,依次触发,直到document

如果需要阻止事件冒泡可以在需要阻止的事件函数中加上event.stopPropagation()

<style>
    #box1 {
      width: 300px;
      height: 300px;
      background: blueviolet;
    }

    #box2 {
      width: 200px;
      height: 200px;
      background: aquamarine;
    }

    #box3 {
      width: 100px;
      height: 100px;
      background: tomato;
    }

    div {
      overflow: hidden;
      margin: 50px auto;
    }
  </style>
</head>

<body>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
    </div>
  </div>
  <script>
    function sayBox3() {
      console.log('你点了最里面的box');
    }
    function sayBox2() {
      console.log('你点了最中间的box');
    }
    function sayBox1() {
      console.log('你点了最外面的box');
    }
    // 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获
    document.getElementById('box3').addEventListener('click', sayBox3, false);
    document.getElementById('box2').addEventListener('click', sayBox2, false);
    document.getElementById('box1').addEventListener('click', sayBox1, false);
  </script>
</body>

View Code

事件捕获是从document开始逐层向目标事件传递,依次触发,直到目标事件

<style>
    #box1 {
      width: 300px;
      height: 300px;
      background: blueviolet;
    }

    #box2 {
      width: 200px;
      height: 200px;
      background: aquamarine;
    }

    #box3 {
      width: 100px;
      height: 100px;
      background: tomato;
    }

    div {
      overflow: hidden;
      margin: 50px auto;
    }
  </style>
</head>

<body>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
    </div>
  </div>
  <script>
    function sayBox3() {
      console.log('你点了最里面的box');
    }
    function sayBox2() {
      console.log('你点了最中间的box');
    }
    function sayBox1() {
      console.log('你点了最外面的box');
    }
    // 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获
    document.getElementById('box3').addEventListener('click', sayBox3, true);
    document.getElementById('box2').addEventListener('click', sayBox2, true);
    document.getElementById('box1').addEventListener('click', sayBox1, true);
  </script>
</body>

View Code

事件流:捕获->目标->冒泡

事件委托就是在冒泡阶段完成,将一个或一组的事件委托到它父层或者更外层的元素上,真正绑定事件的是外层而不是目标元素,当点击目标元素时,会通过冒泡机制相应到外层绑定事件的元素上

比如ul里面有多个li,我如果想给每个li添加一个点击事件,就可以给ul添加点击事件,这样根据冒泡规则当点击li的时候就会触发ul的点击事件

事件委托可以提高性能;实现动态绑定

适合事件委托的事件有： click ， mousedown ， mouseup ， keydown ， keyup ， keypress

focus 、 blur 这些事件没有事件冒泡机制，所以⽆法进⾏委托绑定事件
mousemove 、 mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗⾼，因此也是不适合于事件委托的

<ul id="isUl">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <script>
    function clickLi() {
      alert('你点击了li');
    }
    document.getElementById('isUl').addEventListener('click', function (event) {
      // 每一个函数内都有一个event事件对象，它有一个target属性，指向事件源
      var src = event.target;
      // 我们判断如果target事件源的节点名字是li，那就执行这个函数
      // target里面的属性是非常多的，id名、class名、节点名等等都可以取到
      if (src.nodeName.toLowerCase() == 'li') {
        clickLi()
      }
    });
  </script>

View Code

jquery中实现事件委托的方法:

$.on: 基本用法:$('.parent').on('click', 'a', function () { console.log('click event on tag a'); })，它是 .parent 元素之下的 a 元素的事件***到$('.parent')之上，只要在这个元素上有点击事件，就会自动寻找到.parent元素下的a元素，然后响应事件；
$.delegate: 基本用法:$('.parent').delegate('a', 'click', function () { console.log('click event on tag a'); })，同上，并且还有相对应的$.delegate来删除***的事件；
$.live: 基本使用方法:$('a', $('.parent')).live('click', function () { console.log('click event on tag a'); })，同上，然而如果没有传入父层元素$(.parent)，那事件会默认委托到$(document)上；(已废除)