本文主要介绍如何在获取页面元素之后为元素绑定相应的事件,从而完成一些操作。首先需要弄清事件的三要素,简单来说,要弄清给谁绑定事件,绑定什么事件,以及完成什么操作。下面介绍三种方式,后两种类似。
第一:通过addEventListener()绑定事件,通过回调函数完成后续操作。通过此法可给同一元素绑定多次事件。通过其第三个参数的设置,可设置事件传播的方式,默认为false,为冒泡模式,true为捕获模式。同时,回调函数可直接书写函数名(注意:不要加括号),在script中定义该函数即可。利用removeEventListener即可删除监听事件,需要通过函数名进行删除(不要加括号)。
第二:通过onclick绑定(以点击事件为例),同样是利用函数完成后续操作。通过此法不能绑定多次事件,以后面绑定的事件为准。通过设置onclick值为null实现此种事件的删除。
第三:依然是onclick绑定,不过可写在标签内部,可直接写执行的代码,也可以封装函数进行调用。这里的函数名需要加括号,意即点击后调用该函数。
此外,再介绍事件委托的概念。简单来说,就是不直接给子元素绑定事件,通过给其父级元素绑定事件实现一些效果,可提高效率。
<!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>
<style>
</style>
</head>
<body>
<button>传统点击</button>
<button>注册点击</button>
<button onclick="elementBind()">元素绑定</button>
<script>
function elementBind() {
alert(45);
}
var btn = document.querySelectorAll('button');
// 1.传统绑定事件
btn[0].onclick = function() {
alert(1);
}
btn[0].onmouseover = function() {
console.log(2);
};
// 传统删除事件
btn[0].onclick = null;
// 2.注册绑定事件
btn[1].addEventListener('click', function() {
alert(1);
});
btn[1].addEventListener('mouseover', function() {
console.log(2);
});
// 括号不要写,否则会直接调用执行
btn[1].addEventListener('click', alertThree);
function alertThree() {
alert(3);
};
// 删除注册事件(必须通过删除相应的调用函数进行删除)
btn[1].removeEventListener('click', alertThree);
</script>
</body>
</html>