DOM之事件触发、冒泡、捕获详解

<input value="Click me" onclick="alert('Click!')" type="button">

js逻辑在属性里创建，不是很好，写到一个方法里.

<script>
  function countRabbits() {
    for(let i=1; i<=3; i++) {
      alert("Rabbit number " + i);
    }
  }
</script>

<input type="button" onclick="countRabbits()" value="Count rabbits!">

因为html属性不区分大小写，所以你onClick可以随你写，ONCLICK, onCLICK, 最好是onclick.

<input id="elem" type="button" value="Click me">
<script>
  elem.onclick = function() {
    alert('Thank you');
  };
</script>

这个方式直接在dom上绑定，上面的html-attribute是浏览器读取他创建函数对象写入dom中。

<input id="elem" type="button" value="Click me">
<script>
  //1
  elem.onclick = function() {
    alert('Thank you');
  }; 
  
  //2
  function thank() {
    alert('thank you')
  }
  elem.onclick = thank;
</script>

// 但是如果是input中也是不同的。
<input id="elem" type="button" value="Click me" onclick="thank()">

<button id="elem">Click me</button>

<script>
  elem.addEventListener('click', {
    handleEvent(event) {
      alert(event.type + " at " + event.currentTarget);
    }
  });
</script>

上面的方法使用到了handleEvent, 如果发生事件，handleEvent会被调用。

<button id="elem">Click me</button>

<script>
  class Menu {
    handleEvent(event) {
      // mousedown -> onMousedown
      let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
      this[method](event);
    }

    onMousedown() {
      console.log(1)
    }

    onMouseup() {
      console.log(2)
    }
  }

  let menu = new Menu();
  elem.addEventListener('mousedown', menu);
  elem.addEventListener('mouseup', menu);
</script>

注意：dom添加赋值事件属性方式（普通事件）可以被第二次调用的同一个事件覆盖，而addEventListener事件绑定不会被覆盖，而是会依次执行。

事件流

事件流：事件流是描述从页面中接收事件的顺序。也可以说是事件传播的顺序。

“DOM2事件流”规定的事件流包括三个阶段：

1. 事件捕获阶段：提供了在事件没有送达目标之前查看事件的机会。与冒泡方向相反，由父向子逐级捕获。
2. 处于目标阶段：目标对象（元素）本身的时间处理程序调用（执行）。
3. 事件冒泡阶段。目标元素的事件大部分都会冒泡（传播）到DOM树根。有一些特殊的事件不会冒泡，比如mouseenter和mouseleave事件不会冒泡。若要冒泡，可以使用mouseover和mouseout替代。

事件模型

js包含三种事件模型：DOM0事件模型（始事件模型），DOM2事件模型，IE事件模型

1. DOM0级模型：事件不会流动传播。事件绑定监听函数方式：① html标签中添加属性如<div onclick="fun()"></div>；② js中获取dom元素后给元素加事件属性：document.onclick = fn,取消监听使用document.onclick = null
2. IE事件模型：使用attachEvent("onclick", handler)和detachEvent("onclick", handler)方法进行绑定事件和移除绑定。事件流只有2个阶段，没有事件捕获阶段。
3. DOM2级模型：addEventListener()和removeEventListener()进行监听和取消。事件流有3个阶段。

事件冒泡

就是一个事件(例如点击)，这个点击会往上层元素进行冒泡(往上进行)，他是从点击的这个元素(目标元素，即event.target)开始向上去冒泡。

这里开始，先搞清两个点event.target和event.currentTarget

event.target是当前点击的元素（目标元素）

event.currentTarget也就是this, 是绑定函数操作的元素（addEventListener绑定的元素，有可能是目标元素的父元素）

有的时候你可能并不想他去冒泡，可以通过stopPropagation这个方法去干掉他。

• event.stopPropagation()

这个方法有个地方需要注意一下，那就是当一个事件有多个处理程序的时候，他只会停止当前程序的冒泡，其他的程序不会收到影响，需要解决这个问题，就需要使用到event.stopImmediatePropagation方法。

尽量不要阻止事件冒泡，除非你知道你自己在干什么。

当你调用return false时会做 3 件事：

• event.preventDefault() – 它停止浏览器的默认行为。
• event.stopPropagation() – 它阻止事件传播（或“冒泡”）。
• 停止回调执行并立即返回。

事件捕获

事件捕获和事件冒泡是不同的，捕获是从上而下。如果需要捕获事件，那就需要将addEventListener的第三个参数(叫做useCapture)设置成true.

默认的false是在冒泡阶段处理事件，true就是捕获阶段处理事件。看下面的代码：

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

<script>
  for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
    elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
  }
</script>

运行之后，发现两个顺序是相反的。而且点击的元素是位于捕获阶段的最后，冒泡阶段的开始。