事件的两种绑定方式
一 概念
#### 1、on事件绑定方式
```js
document.onclick = function() {
console.log("文档点击");
}
// on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
```
```js
document.onclick = function() {
console.log("文档点击");
}
// 事件的移除
document.onclick = null;
```
#### 2、非on事件绑定方式
```js
document.addEventListener('click', function() {
console.log("点击1");
})
document.addEventListener('click', function() {
console.log("点击2");
})
// 非on事件可以同时绑定多个方法，被绑定的方法依次被执行
// addEventListener第三个参数(true|false)决定冒泡的方式
```
```js
function fn () {}
document.addEventListener('click', fn);
// 事件的移除
document.removeEventListener('click', fn);
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件的两种绑定方式</title>
</head>
<body>
<div class="div">12345</div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
// on事件
div.onclick = function () {
console.log("点击1");
}
div.onclick = function () {
console.log("点击2");
}
// 只打印"点击2",原因,只能绑定最后一个方法
// 事件的移除
div.onclick = null;
// 非on事件的绑定 *
// addEventListener('事件名', 回调函数, 冒泡方式)
div.addEventListener('click', function() {
console.log("点击1");
});
var fn = function() {
console.log("点击2");
}
div.addEventListener('click', fn);
// 存在重复绑定
// 事件的移除
// removeEventListener('事件名', 回调函数名)
div.removeEventListener('click', fn)
// 注:绑定与移除需要指向同一个方法(地址)
</script>
</html>
