使用对象.事件=函数的形式绑定响应函数,他只能同时为一个元素的一个事件绑定一个想隐函数
不能绑定多个,如果绑定了多个,则后边的会覆盖前面的
addEventListener() 通过这个方法也可以为元素绑定响应函数
<!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>
<script>
window.onload = function () {
//点击按钮弹出内容
var btn01 = document.getElementById("btn01");
/*
使用对象.事件=函数的形式绑定响应函数,他只能同时为一个元素的一个事件绑定一个响应函数
不能绑定多个,如果绑定了多个,则后边的会覆盖前面的
addEventListener() 通过这个方法也可以为元素绑定响应函数
参数:
1.事件的字符,不要on click
2.回调函数 当事件触发时该函数会被调用 function()
3.是否在捕获阶段触发事件,需要一个布尔值,一般都为false
使用addEventListener() 可以同时为了一个元素的相同事件同时绑定多个响应函数,这样当事件触发时
响应函数将会按照函数的绑定顺序执行,这个方法在ie8及以下的方法不支持则使用:
attachEvent();
参数:
1.事件的字符串,要on onclick
2回调函数 function()
这个方法也可以为一个时间绑定多个处理函数,不同的是他是后后绑定先执行,执行顺序和addEventListener()相反
Chrom不支持
*/
//绑定第一个响应函数
/* btn01.onclick = function () {
alert("1");
};
//绑定第二个响应函数
btn01.onclick = function () {
alert("2");
}; */
// btn01.addEventListener("click", function () {
// alert("1");
// }, false);
// btn01.addEventListener("click", function () {
// alert("2");
// }, false)
/* btn01.attachEvent("onclick", function () {
alert("1");
}); */
bind(btn01, "click", function () {
alert("1");
});
bind(btn01, "click", function () {
alert("2");
});
bind(btn01, "click", function () {
alert("3");
});
};
/* 定义一个函数,用来为指定的元素绑定响应函数
addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window
需要统一this
参数:
obj 要绑定的实践对象
eventStr 事件的字符串(要on)
callback 回调函数
*/
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {//判断是否含有addEventListener
obj.addEventListener(eventStr, callback, false);
} else {
//obj.attachEvent("on" + eventStr, callback);//callback是浏览器调用回到函数,我们希望把调用回调函数的权利拿回来
obj.attachEvent("on" + eventStr, function () {
//在匿名函数中调用回调函数,这样回调函数改成我们自己调用的了
callback.call(obj);//修改this为obj,这样这个bind函数就统一了this
});
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
结果: