视频链接：
视频
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的绑定</title>
<style type="text/css">
</style>
<script type="text/javascript">
/**
* 点击按钮以后弹出一个内容
*/
window.onload=function(){
/**
* 使用对象.事件=函数 的形式绑定响应函数
* 它只能为同一个元素的一个事件绑定一个响应函数
* 不能绑定多个 如果绑定多个 后边的会覆盖前面的
*/
var btn=document.getElementById("btn");
//为btn绑定一个单击响应函数
// btn.οnclick=function(){
// alert("?");
// }
// //为btn绑定第二个单击响应函数
// btn.οnclick=function(){
// alert("!");
// }
/**
* 第二种方式：
* addEventListener()
* 通过这种方法也可以为元素绑定函数
* 参数
* ---1.事件的字符串 click 不要on
* ---2.回调函数,当函数触发时，会被调用
* ---3.是否在捕获阶段触发事件 一般都传false
* 使用addEventListener可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时
* 事件会按照函数绑定的顺序执行
* 但是不支持IE8及以下！！！！！！！！！！！！！
*/
// btn.addEventListener("click",function(){
// alert("s");
// },false);
// btn.addEventListener("click",function(){
// alert("sss");
// },false);
/**
* attachEvent()
* ---在IE8中可以使用attacheEvent()来绑定事件
* 参数：
* -----1.事件的字符串，要on
* -----2.回调函数function
* 也可以绑定多个处理函数 不同的是 和addEventListenerz执行的顺序相反
*/
// btn.attachEvent("onclick",function(){
// alert(1);
// });
bind(btn,"click",function(){
alert("555");
});
};
/**解决兼容性问题
* 定义一个函数 用来为指定元素绑定响应函数
* addEventListener中的this是绑定事件的对象
* attachedEvent()中的this是window
* 需要统一两个方法中的this
* 参数：
* ---obj要绑定事件的对象
* ---eventStr 事件的字符串 不要on
* ---callback 回调函数
*
*/
function bind(obj,eventStr,callback){
if( obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
//IE8及以下
//this 由调用方式决定的
obj.attachedEvent("on"+eventStr,function(){
callback.call(obj);
});
}
}
</script>
</head>
<body>
<button id="btn">按钮01</button>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
