<!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>事件的绑定</title>
<script type="text/javascript">
window.onload = function () {
/*
*点击按钮以后,弹出一个内容
*
* 使用对象.事件 = 函数的形式绑定函数,
* 他只能同时为一个元素的一个事件绑定一个单击响应函数
* 不能绑定多个,如果绑定多个,前面的就会失效
*
*/
//获取事件的对象
var btn01 = document.getElementById("btn01");
//为btn01绑定单机响应函数,
// btn01.οnclick=function(){
// alert(1);
// };
//为btn01绑定第二个单机响应函数,
// btn01.οnclick=function(){
// alert(2);
// };
/*
*addEventListener()
* 通过这个方法也可以为元素绑定响应函数
* 参数:
* 1.事件的字符串,不要on
* 2.回调函数,当事件触发时,该函数会被调用
* 3.是否捕获阶段触发事件,需要一个布尔值,一般穿false
* addEventListener()同时为一个元素的一个事件绑定多个单击响应函数
* 这样事件被触发时,响应函数会按照绑定的顺序执行
*
* 这个方法不支持ie8以下调用
*/
// btn01.addEventListener("click", function () {
// alert(this);
// }, false)
// btn01.addEventListener("click", function () {
// alert(2);
// }, false)
/*
*attachEvent()
*在ie8中可以使用attachEvent()来绑定事件
* 参数
* 1.事件的字符串,要on
* 2.回调函数
* attachEvent()这个方法可以同时为一个元素的一个事件绑定多个单击响应函数
* 不同的是,先绑定后添加
* 所以顺序是,3,2,1
*
*
*
*
* ie11,谷歌,火狐,等,addEventListener()的this是绑定事件的对象
* ie8以下,attachEvent()的this是window
*/
// btn01.attachEvent("onclick", function () {
// alert(this);
// });
bind(btn01, "click", function () {
alert(this);
});
// btn01.attachEvent("onclick", function () {
// alert(2);
// });
// btn01.attachEvent("onclick", function () {
// alert(3);
// });
/*
*定义一个函数,用来为指定元素绑定响应函数
*ie11,谷歌,火狐,等,addEventListener()的this是绑定事件的对象
*ie8以下,attachEvent()的this是window
*
* 参数:
* obj 要绑定事件的对象
* eventStr 事件的字符串
* callback 回调函数
*/
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
//大部分兼容的方式
obj.addEventListener(eventStr, callback, false);
} else {
/*
*this是谁由调用方式决定
*callback.call(obj)
*/
//ie8以下
obj.attachEvent("on" + eventStr, function () {
callback.call(obj);
});
}
};
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
2022/1/13,事件的绑定
最新推荐文章于 2024-08-16 19:02:09 发布