<!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>
<script>
window.onload = function(){
// 点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
// btn01.onclick = function(){
// alert('1')
// }
// btn01.onclick = function(){
// alert('2')
// }
/**
* addEventListener() 可以同时为一个元素的相同事件 同时绑定 多个 响应函数
* 当事件被触发时， 响应函数 将会按照 函数的绑定顺序 执行
*
* ie8 及以下 不支持
*
*/
// btn01.addEventListener("click",function(){
// alert(this)
// })
// btn01.addEventListener("click",function(){
// alert('2')
// })
/**
* attachEvent()
* 在 ie8 中可以使用attachEvent() 来绑定事件
* 参数:
* 1 事件的字符串 要 on
* 2 回调函数
*
* 可以同时为一个元素的相同事件 同时绑定 多个 响应函数
* 不同的 后绑定先执行 执行顺序 和 addEventListener 相反
*/
// btn01.attachEvent("onclick",function(){
// alert(this)
// })
// btn01.attachEvent("onclick",function(){
// alert(2)
// })
// btn01.attachEvent("onclick",function(){
// alert(3)
// })
bind(btn01,'click',function(){
alert(this);
})
}
// 定义 一个函数 用来 为指定元素绑定响应函数
/**
* addEventListener() 中的this, 是绑定事件的对象
* attachEvent() 中的this, 是window
* 需要统一两个方法 this
* 参数
* obj 绑定事件的对象
* eventStr 事件的字符串 (不要on)
* callback 回调函数
*/
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
// ie8 及以下
obj.attachEvent("on" + eventStr,function(){
// 在 匿名函数中 调用 回调函数
// 改变 this 指向
callback.call(obj);
});
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
