JS事件冒泡、事件捕获和事件委托

事件冒泡和事件捕获

    .wrapper {
       300px;
      height: 300px;
      background-color: darkturquoise;
    }

    .content {
       200px;
      height: 200px;
      background-color: yellow;
    }

    .box {
       100px;
      height: 100px;
      background-color: red;
    }

  <div class="wrapper">
    <div class="content">
      <div class="box">
      </div>
    </div>
  </div>

事件冒泡

  var wrapper = document.getElementsByTagName('div')[0];
  var content = document.getElementsByTagName('div')[1];
  var box = document.getElementsByTagName('div')[2];

  wrapper.addEventListener('click', function () {
    console.log('wrapper')
  }, false);

  content.addEventListener('click', function () {
    console.log('content')
  }, false);

  box.addEventListener('click', function () {
    console.log('box')
  }, false);

 

 

如上图所示

事件冒泡：结构上从内到外

事件捕获

 

 

如上图所示

事件捕获：结构上从外到内

使用addEventListener()方法指定事件是否在捕获或冒泡阶段执行

语法

element.addEventListener(event, function, useCapture)

useCapture

可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

事件委托

• 普通方法

  <div id="box">
    <input type="button" id="add" value="添加" />
    <input type="button" id="remove" value="删除" />
    <input type="button" id="move" value="移动" />
    <input type="button" id="select" value="选择" />
  </div>

  var Add = document.getElementById("add");
  var Remove = document.getElementById("remove");
  var Move = document.getElementById("move");
  var Select = document.getElementById("select");

  Add.onclick = function () {
    console.log('添加')
  };
  Remove.onclick = function () {
    console.log('删除')
  };
  Move.onclick = function () {
    console.log('移动')
  };
  Select.onclick = function () {
    console.log('选择')
  }

• 事件委托方法

  var oBox = document.getElementById("box");
  oBox.onclick = function (e) {
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.nodeName.toLocaleLowerCase() == 'input') {
      switch (target.id) {
        case 'add':
          console.log('添加')
          console.log(e)
          break;
        case 'remove':
          console.log('删除')
          break;
        case 'move':
          console.log('移动')
          break;
        case 'select':
          console.log('选择')
          break;
      }
    }
  }

 

 打印一下event对象的target属性

可知e.target为当前触发事件的dom元素

谷歌浏览器默认是事件冒泡

所以点击div下的button按钮，会冒泡到div上，触发div的click事件

对标签名进行判断

并判断其id值

执行各自的操作