事件进阶
1.注册事件
在JavaScript中,注册事件(绑定事件)有两种方式,即传统方式注册事件和事件监听方式注册事件。
(1)传统方式
元素对象.事件名 = 事件处理程序;
//示例
btn.onclick = function(){}
注意:该方式注册事件的特点在于注册事件的唯一性,即同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数。
(2)事件监听方式
事件监听方式:可以给同一个DOM对象同时注册多个事件处理程序(函数)
标准浏览器,包括IE8版本以上的IE浏览器,以及新版的Firefox、Chrome等浏览器,事件监听方式如下:
DOM对象.addEventListener(type,callback,[capture]);
type:表示事件类型(如click、change、mouseover等)
callback:事件处理程序(函数)
capture:可选参数,默认值为false,表示在事件冒泡阶段进行处理;true,表示在事件捕获阶段处理
注意:该方式注册事件的特点在于可以给同一个DOM对象的同一个事件添加多个事件处理程序。
<body>
<div>
<button id="btn">按钮</button>
</div>
<script>
var btn = document.querySelector("#btn");
// btn.onclick = function(){
// alert("传统方式注册事件")
// }
btn.addEventListener("click",function(){
alert("事件监听方式注册事件")
})
</script>
</body>
2.删除事件
(1)传统方式:
DOM对象.事件名 = null;
(2)标准方式
DOM对象.removeEventListener(type,callback);
3.DOM事件流
事件流是指当事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播,这个过程称之为事件流。
网景(Netscape)公司团队的事件流采用事件捕获方式,而微软(Microsoft)公司的事件流采用事件冒泡方式,W3C对网景公司和微软公司提出的方案进行了中和处理,规定了事件发生后,首先实现事件捕获,但不会对事件进行处理;然后进行到目标阶段,执行当前元素对象的事件处理程序,但它会被看成是冒泡阶段的一部分;最后实现事件的冒泡,逐级对事件进行处理。
- 捕获方式:网景公司
- 冒泡方式:微软公司
- 先捕获后冒泡:W3C
事件对象
1.什么是事件对象
事件对象(event):是一个对象,封装了跟事件有关的所有数据。只有在事件发生时才存在,由系统自动创建。是事件处理程序(函数)的默认参数。
2.事件对象的常见属性和方法
e.target:返回触发事件的对象
e.type:事件类型
e.stopPropagation():阻止事件冒泡
e.preventDefault():阻止默认事件
3.事件委托
事件委托的原理是,不给每个子节点单独设置事件监听器,而是把事件监听器设置在其父节点上,让其利用事件冒泡的原理影响到每个子节点。
简而言之,就是不给子元素注册事件,给父元素注册事件,让处理代码在父元素的事件中执行。
这样做的的优点在于,只操作了一次DOM ,提高了程序的性能。
例:
<body>
<ul>
<li>张三</li>
<li>李四</li>
</ul>
<script>
var ul = document.querySelector("ul")