介绍
每个可用的事件都会有一个事件处理器,也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候,我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的,尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生,然后处理器就是对事件发生做出的回应。
不同编程环境的事件机制是不同的
行内事件处理器【尽量避免】
事件监听以及移除事件监听(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博客