本文解决的问题是:如何给一个事件添加多个相同的事件。
我们先来了解我们常用的事件处理器
1、什么是事件处理器?
给一个元素添加一个事件叫“事件处理器”,如下所示:
oBtn.onclick =function(){};
显然,事件处理器的用法很简单,但有一定的缺陷。如果要为一个元素添加多个相同的事件,则会发生后面的事件覆盖前面事件的现象,举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function( ){
alert("点击第1次");
};
oBtn.onclick = function( ){
alert("点击第2次");
};
oBtn.onclick = function( ){
alert("点击第3次");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="这是按钮" />
</body>
</html>
我们点击按钮仅触发了最后一个事件
既然事件处理器是存在本身缺陷的。那么,如何为一个元素添加多个事件呢?此时需要用到事件监听器
2、事件监听器(事件绑定)
事件监听器是通过EventListener翻译过来的,又称为事件绑定,指的是通过addEventListener()方法为一个元素绑定事件。
语法为:
obj.addEventListener(type,fn,false);
语法解释:
obj是指通过document.getElementById等【获取元素】方法所获取的元素节点。
type是一个字符串类型,指的是事件的类型,鼠标单击事件使用’click’,此处要注意的是传入的鼠标单击事件不是’onclick’。很容易与obj.οnclick=function(){}所混淆。
fn是传入的函数,可以是一个函数名也可以是一个匿名函数。
false是obj.addEventListener()方法的默认值,false是指事件冒泡阶段,true则是值事件捕获阶段,对于冒泡与捕获我们下一篇文章会专门讲到,此处用不到,不做解释。
主要作用
同一个元素可以绑定多个事件监听器
举个栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点击" id="btn">
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",function () {
alert(1);
});
btn.addEventListener("click",function () {
alert(2);
});
</script>
</body>
</html>
显示效果如下:
此处要知道的是
btn.addEventListener("click",function () {
alert(2);
});
等价于
btn.addEventListener("click",clickEvent);
function clickEvent() {
alert(2);
}
当然,obj.addEventListener()方法有兼容性的问题,不支持IE10及以下的浏览器。
3、解决事件监听器(事件绑定)的兼容性问题
判断浏览器时,我们并不需要判断它版本,但可以检测浏览器的能力。检测浏览器能力的方法:将obj.addEventListener作为if语句的判断条件,如果浏览器认识该方法则返回true,否则返回false。
有一个基本事实:IE 9 及以上的浏览器和其他浏览器,使用 obj.addEventListener 方法,IE 9 以下的浏览器,使用 obj.attachEvent 方法。
我们需要知道的是obj.attachEvent方法的type参数的鼠标点击事件是传入’onclick’字符串,而obj.addEventListener 方法传入的是click字符串。
举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function( ){
alert("点击第1次");
};
oBtn.onclick = function( ){
alert("点击第2次");
};
oBtn.onclick = function( ){
alert("点击第3次");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="这是按钮" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="button" value="点击" id="btn" />
<script>
var btn = document.getElementById("btn");
// 调用函数
addEvent(btn, "click", function () {
alert('点击按钮显示的是1');
});
// 自行制作一个兼容所有浏览器的绑定事件的函数addEvent,参数:事件源,事件类型,事件函数
function addEvent(ele, type, fn) {
// 浏览器能力检测方法
if (ele.addEventListener) {
ele.addEventListener(type, fn); // addEventListener点击事件是click
} else if (ele.attachEvent) {
ele.attachEvent("on" + type, fn);// addEventListener是onclick
}
}
</script>
</body>
</html>
简单几行代码即可实现对所有浏览器的兼容啦~