注册（绑定）事件
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件
1.传统注册方式
on + 事件名称
var btn.onclick = function() {
console.log('111');
};
btn.onclick = function() {
console,log('222');
};
//222
注意：同一个元素同一个事件只能设置一个处理函数，最后注册的函数会覆盖前面注册的处理函数
2.事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
参数
- type：事件类型，前面不带 on
- listener：事件处理函数
- useCapture：可选参数，布尔值，默认 false（冒泡）
eventTarget.attachEvent(eventNameWithOn, callback)
早期IE支持
参数：
- eventNameWithOn：事件类型，前面要带 on
- callback：事件处理函数
删除（解绑）事件
- 传统注册方式
eventTarget.onclick = null;
2.方法监听注册方式
eventTarget.removeEventListener(type, listener[, useCapture]);
eventTarget.detachEvent(eventNameWithOn, callback);
事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
"DOM2事件流"规定的事件流包括三个阶段：
- 处于捕获阶段
- 处于目标阶段
- 处于冒泡阶段
![在这里插入图片描述]()
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button id="btn">点我</button>
<script>
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click', function () {
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click', function () {
console.log('btn处于事件冒泡阶段');
}, false);
document.addEventListener('click', function () {
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click', function () {
console.log('document处于事件冒泡阶段');
}, false);
document.documentElement.addEventListener('click', function () {
console.log('html处于事件捕获阶段');
}, true);
document.documentElement.addEventListener('click', function () {
console.log('html处于事件冒泡阶段');
}, false);
document.body.addEventListener('click', function () {
console.log('body处于事件捕获阶段');
}, true);
document.body.addEventListener('click', function () {
console.log('body处于事件冒泡阶段');
}, false);
</script>
</body>
</html>
- JS 代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick 和 attachEvent 只能得到冒泡阶段。
- addEventListener 通过第三个参数控制处于冒泡还是捕获阶段
事件对象
官方解释： event 对象代表事件的状态，比如事件在 其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态
简单解释：事件发生后，跟事件相关的一系列信息数据的结合都放到这个对象里面，这个对象就是事件对象（event）
如何使用？
绑定事件函数时，写参数即可
test.onclick = function(e) {
//为了兼容IE
e = e || window.event;
console.log(e);
}
事件对象常见属性和方法
e.target 和 this 区别
e.target 返回的是触发事件的对象（元素）
this 返回的是绑定事件的对象（元素）
简单来说：
e.target 点击了那个元素，就返回那个元素
this 那个元素绑定了这个事件，那么就返回谁
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var div = document.getElementsByTagName('div')[0];
div.addEventListener('click', function(e) {
e = e || window.event;
console.log('this：');
console.log(this);
console.log('r.target：')
console.log(e.target);
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
// 给 ul 绑定了事件,那么 this 就指向 ul
console.log('this：');
console.log(this);
// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
console.log('e.target');
console.log(e.target);
})
</script>
</body>
</html>
e.target兼容性处理
ul.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
}
和 this 相似的一个值 currentTarget
e.type返回事件类型
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: aquamarine;"></div>
<script>
var div = document.querySelector('div');
function test(e) {
e = e || window.event;
console.log(e.type);
}
div.addEventListener('click', test);
div.addEventListener('mouseover', test);
div.addEventListener('mouseout', test);
</script>
</body>
</html>
阻止默认行为（事件）如链接不跳转，按钮不提交
div.onclick = function(e) {
//一般浏览器
e.preventDefault(); //方法
//低版本IE浏览器
e.returnValue; //属性
//通用，但只能用于传统方式注册的事件
return false;
}
阻止事件冒泡
标准
e.stopPropagation()
非标准，低版本IE
e.cancelBubble = true;
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e) {
var e = e || window.event;
console.log(e.target.innerText);
}
</script>
</body>
</html>