水牛的es6日记第七天【事件机制】

介绍

每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。

不同编程环境的事件机制是不同的

行内事件处理器【尽量避免】

事件监听以及移除事件监听（addEventListener()和removeEventListener()）

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}   

btn.addEventListener('click', bgChange);//事件监听
btn.removeEventListener('click', bgChange);//移除事件监听

一个监听器要注册多个处理器要怎么操作？

事件机制的选择

事件对象

关于Target

target可以直接选择对象，比如

阻止默认行为

<form>
  <div>
    <label for="fname">First name: </label>
    <input id="fname" type="text">
  </div>
  <div>
    <label for="lname">Last name: </label>
    <input id="lname" type="text">
  </div>
  <div>
     <input id="submit" type="submit">
  </div>
</form>
<p></p>

最难点 --事件冒泡及捕获
这是一个非常简单的例子，它显示和隐藏一个包含元素的

元素：
点击这个页面

<button>Display video</button>

<div class="hidden">
  <video>
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
  </video>
</div>

当‘’button‘’元素按钮被单击时，将显示视频，它是通过将改变

的class属性值从hidden变为showing(这个例子的CSS包含两个class，它们分别控制这个

盒子在屏幕上显示还是隐藏。)：

btn.onclick = function() {
  videoBox.setAttribute('class', 'showing');
}

然后我们再添加几个onclick事件处理器，第一个添加在

元素上，第二个添加在元素上。这个想法是当视频(）外

元素内这块区域被单击时，这个视频盒子应该再次隐藏；当单击视频(）本身，这个视频将开始播放。

videoBox.onclick = function() {
  videoBox.setAttribute('class', 'hidden');
};

video.onclick = function() {
  video.play();
};

但是有一个问题 - 当您点击video开始播放的视频时，它会在同一时间导致

也被隐藏。 这是因为video在

之内 - video是

的一个子元素 - 所以点击video实际上是同时也运行

上的事件处理程序。

事件委托

下面介绍很齐全 DWB博客