一、事件的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
</head>
<body>
<!-- 1. 行内绑定 -->
<div onclick="alert(111);">这是div1</div>
<br>
<div onclick="(function fn(i) {console.log(i);})(9)">这是div2</div>
<br>
<div onclick="fn()">这是div3</div>
<br>
<div class="div4">这是div4</div>
<br>
<div class="div5">这是div5</div>
<br>
<div class="div6">这是div6</div>
<script>
function fn() {
console.log(333);
}
// 2. 句柄式绑定 --- 同一类型事件的多个事件处理程序会发生覆盖
document.querySelector('.div4').onclick = function() {
console.log(444);
}
document.querySelector('.div4').onclick = function() {
console.log(555);
}
document.querySelector('.div4').onclick = function() {
console.log(666);
}
// 3. 同元素多处理程序绑定方式 多线程方式有三个参数,第一个是绑定的事件,第二个是方法,第三个是是否冒泡
const div5 = document.querySelector('.div5');
div5.addEventListener('click', function() {
console.log(777);
});
div5.addEventListener('click', function() {
console.log(888);
});
div5.addEventListener('click', function() {
console.log(999);
});
</script>
<script>
// 同元素多处理程序绑定方式 --- 兼容IE
var div6 = document.getElementsByClassName('div6')[0];
div6.attachEvent('onclick', function() {
console.log(101010);
});
div6.attachEvent('onclick', function() {
console.log(111111);
})
div6.attachEvent('onclick', function() {
console.log(121212);
})
</script>
</body>
</html>
二、事件的解除绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
</head>
<body>
<div class="sss" onclick="fun();">sss</div> //行内绑定事件
<br>
<div class="fff">fff</div>
<script>
function fun() {
console.log(111);
}
const sss = document.querySelector('.sss'); //获取类名是sss的div
// sss.onclick = function() { //句柄式,因为用了行内绑定这里就不用了
// console.log(111);
// }
//行内绑定的是点击控制台输出1,这里添加解除绑定以下三种方式都是可取的
sss.onclick = '';
// sss.onclick = false;
// sss.onclick = null;
const fff = document.querySelector('.fff');
function fn() {
console.log(222);
}
fff.addEventListener('click', fn); //多线程绑定
fff.removeEventListener('click', fn);
//1、ele.onclick=false/''/null;
//2、ele.removeEventListener(type,fn,false);
//3、ele.detachEvent("on"+type,fn);
//提示: 2,3若绑定的是匿名函数,则永远无法解除
</script>
</body>
</html>