JS之DOM篇事件对象

在触发DOM上绑定的事件时，会产生一个事件对象event，这个对象中包含着与事件相关的信息，不同的事件包含的信息也有所不同。

获取事件对象

event对象是事件程序的第一个参数

<div id="box">box</div>
<script>
  box.onclick = function(event) {
    console.log(event)
  }
</script>

属性

不同的事件类型，事件对象包含的信息也有所不同，但有一些属性和方法是共有的

type

type表示被触发的事件类型

<div id="box">box</div>
<script>
  box.onclick = function(event) {
    console.log(event.type) // 'click'
  }
</script>

currentTarget、target和srcElement

currentTarget、target和srcElement都表示事件目标，但它们表示的意义有所不同

currentTarget属性返回绑定该事件的目标节点，它与事件中的this指向相同

target属性返回正在执行当前事件的节点

srcElement属性与target属性功能一致，但是firefox不支持

<ul id="list">
  <li>one</li>
  <li>two</li>
</ul>
<script>
  list.onclick = function(event) {
    console.log(event.currentTarget, event.target, event.srcElement)
  }
</script>

示例中，由于事件冒泡的原因，点击<li>元素会触发<ul>元素上绑定的click事件，尽管li元素没有绑定click事件。

bubbles

bubbles属性返回一个布尔值，表示当前事件是否会冒泡。对于不会冒泡的事件，比如focus、blur和scroll，bubbles属性会返回false；其他事件都会冒泡，因此返回true。该属性为只读属性

<div id="box">box</div>
<script>
  box.onclick = function(event) {
    console.log(event.bubbles) // true
  }
</script>

cancelBubble

cancelBubble属性用于阻止冒泡，但无法阻止捕获阶段。该值可读写，默认值是false表示允许冒泡。当设置为true时表示阻止冒泡。

注意： 该属性全浏览器支持，但并不是标准写法。标准写法是使用event. stopPropagation()

<div id="box">box</div>
<script>
  box.onclick = function(event) {
    console.log('box');
    event.cancelBubble = true;
  }
  document.body.onclick = function(event) {
    console.log('body');
  }
  // 'box'
</script>

由于阻止了box元素的事件冒泡，所以只打印了box

eventPhase

eventPhase属性返回一个整数值，表示事件目前所处的事件流阶段。0表示事件没有发生，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段

<div id="box">目标阶段</div>
<script>
  box.onclick = function(event) {
    console.log(event.eventPhase); // 2
  }
</script>

<div id="box">捕获阶段</div>
<script>
  document.addEventListener('click', function(event) {
    console.log(event.eventPhase); // 1
  }, true)
</script>

<div id="box">冒泡阶段</div>
<script>
  document.addEventListener('click', function(event) {
    console.log(event.eventPhase); // 3
  }, false)
</script>

cancelable

cancelable属性返回一个布尔值，表示事件是否可以取消。该属性为只读属性。返回true时，表示可以取消。否则，表示不可取消

<div id="box">box</div>
<script>
box.onclick= function(event){
  console.log(event.cancelable) // true
}
</script>

defaultPrevented

defaultPrevented属性表示默认行为是否被阻止，返回true时表示被阻止，返回false时，表示未被阻止

常见的默认行为比如点击链接后，浏览器跳转到指定页面；或者按一下空格键，页面向下滚动一段距离

<a id="test" href="https://www.86886.wang" target="_blank">链接</a>
<script>
  test.onclick = function() {
    console.log(event.defaultPrevented); // false
  }
</script>

<a id="test" href="https://www.86886.wang" target="_blank">链接</a>
<script>
  test.onclick = function(event) {
    event.preventDefault(); // 阻止默认行为
    console.log(event.defaultPrevented); // true
  }
</script>

方法

stopPropagation()

stopPropagation()方法表示取消事件的进一步捕获或冒泡，无返回值

<div id="box">box</div>
<script>
  box.onclick = function(event) {
    console.log('box');
    event.stopPropagation();
  }
  document.body.onclick = function(event) {
    console.log('body');
  }
  // 'box'
</script>

stopImmediatePropagation()

stopImmediatePropagation()方法不仅可以取消事件的进一步捕获或冒泡，而且可以阻止同一个事件的其他监听函数被调用，无返回值

<div id="box">box</div>
<script>
  box.addEventListener('click', function(event){
    console.log('box');
    event.stopImmediatePropagation();
  })
  box.addEventListener('click', function(event){
    console.log('box2');
  })

  document.body.onclick = function(event) {
    console.log('body');
  }
  // 'box'
</script>

如果不调用stopImmediatePropagation()方法，三个事件都会执行

<div id="box">box</div>
<script>
  box.addEventListener('click', function(event){
    console.log('box');
  })
  box.addEventListener('click', function(event){
    console.log('box2');
  })

  document.body.onclick = function(event) {
    console.log('body');
  }
  // 'box'
  // 'box2'
  // 'body'
</script>

preventDefault()

preventDefault()方法取消浏览器对当前事件的默认行为，无返回值

<a id="test" href="https://www.86886.wang" target="_blank">链接</a>
<script>
  test.onclick = function(event) {
    // 阻止默认行为后，不会打开链接
    event.preventDefault();
  }
</script>

事件委托

事件委托也叫做事件代理，它指的是利用事件冒泡机制，把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件

利用事件委托，可以提高性能以及降低代码复杂度。下面利用事件委托实现一个小功能，点击当前元素时文字变红

<ul id="list">
  <li>one</li>
  <li>two</li>
</ul>
<script>
  list.onclick = function(event) {
    var t = event.target || event.srcElement;
    t.style.color = 'red';
  }
</script>