1 Dom多个事件绑定addEventListener():
addEventListener()
- 也可以通过addEventListener()来为元素绑定事件
addEventListener(type, listener [, useCapture])
- 参数:
type 要监听的事件的字符串,注意这里不需要写on
listener 回调函数,当事件发生后调用的函数
useCapture 布尔值,是否在捕获阶段触发事件,一般都是false
通过addEventListener()可以为一个元素的一个事件绑定多个响应函数,
这样当事件被触发时,响应函数会按照事件的绑定顺序依次执行
该方法不支持IE8及以下的浏览器
通过addachEvent()可以为一个元素的相同事件绑定多个响应函数 该方法支持IE8以下的浏览器—两个参数addachEvent (on事件,回调函数)
不同的是—先绑定的后执行,后绑定的先执行!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的绑定</title>
<script>
window.onload = function () {
var btn01 = document.getElementById('btn01');
// 通过 对象.属性 的形式绑定响应函数时,同时只能为一个事件绑定一个响应函数
// btn01.onclick = function () {
// alert(1);
// };
//
btn01.onclick = function () {
alert(2);
};
btn01.onclick = null;
/*
addEventListener()
- 也可以通过addEventListener()来为元素绑定事件
addEventListener(type, listener [, useCapture])
- 参数:
type 要监听的事件的字符串,注意这里不需要写on
listener 回调函数,当事件发生后调用的函数
useCapture 布尔值,是否在捕获阶段触发事件,一般都是false
通过addEventListener()可以为一个元素的一个事件绑定多个响应函数,
这样当事件被触发时,响应函数会按照事件的绑定顺序依次执行
该方法不支持IE8及以下的浏览器
通过addachEvent()可以为一个元素的相同事件绑定多个响应函数 该方法支持IE8以下的浏览器—两个参数addachEvent (on事件,回调函数)
不同的是—先绑定的后执行,后绑定的先执行!
*/
// btn01.addEventListener("click",function () {
// alert(1);
// }, false)
//
// btn01.addEventListener("click",function () {
// alert(2);
// }, false)
//
// btn01.addEventListener("click",function () {
// alert(3);
// }, false)
// btn01.removeEventListener()
/*
removeEventListener(type, listener[, useCapture]);
- 用来移除元素上的事件监听器
*/
function fn() {
alert(123);
}
btn01.addEventListener('click',fn, false);
btn01.removeEventListener('click', fn, false);
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
2DOM事件的捕获:
关于事件的传播方向当时两大巨头网景和微软有着不同的理解:
网景公司认为事件应该由外向内传递,
事件发生时,应该先从外层元素上的事件,然后向内一层一层传递
这一事件的传播机制,称为 事件的捕获
微软公司认为事件应该由内向外传递
事件发生时,应该先从内层元素(触发事件的元素)开始,然后一层一层传递
这一事件的传播机制,称为 事件的冒泡
于是W3C将事件整个分为了三个阶段:
1.捕获阶段
- 事件发生后首先从外层元素向内层元素进行事件的捕获
- 默认情况下此阶段并不会触发事件
通常在捕获阶段不想触发事件--可以将addEventListener()的第三个参数设置为false
- 如果希望在捕获阶段触发事件,可以将addEventListener()的第三个参数设置为