<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"> window.onload = function(){ /* * 点击按钮以后弹出一个内容 */
//获取按钮对象
var btn01 = document.getElementById("btn01"); /* * 使用 对象.事件 = 函数 的形式绑定响应函数， * 它只能同时为一个元素的一个事件绑定一个响应函数， * 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的 */
//为btn01绑定一个单击响应函数
/*btn01.onclick = function(){ alert(1); };*/
//为btn01绑定第二个响应函数
/*btn01.onclick = function(){ alert(2); };*/
/* * addEventListener() * - 通过这个方法也可以为元素绑定响应函数 * - 参数： * 1.事件的字符串，不要on * 2.回调函数，当事件触发时该函数会被调用 * 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false * * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， * 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 * * 这个方法不支持IE8及以下的浏览器 */
/*btn01.addEventListener("click",function(){ alert(1); },false); btn01.addEventListener("click",function(){ alert(2); },false); btn01.addEventListener("click",function(){ alert(3); },false);*/
/* * attachEvent() * - 在IE8中可以使用attachEvent()来绑定事件 * - 参数： * 1.事件的字符串，要on * 2.回调函数 * * - 这个方法也可以同时为一个事件绑定多个处理函数， * 不同的是它是后绑定先执行，执行顺序和addEventListener()相反 */
/*btn01.attachEvent("onclick",function(){ alert(1); }); btn01.attachEvent("onclick",function(){ alert(2); }); btn01.attachEvent("onclick",function(){ alert(3); });*/
/*btn01.addEventListener("click",function(){ alert(this); },false);*/
/*btn01.attachEvent("onclick",function(){ alert(this); });*/ 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{ /* * this是谁由调用方式决定 * callback.call(obj) */
//IE8及以下
obj.attachEvent("on"+eventStr , function(){ //在匿名函数中调用回调函数
callback.call(obj); }); } } </script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
window.onload = function(){
var btn = document.querySelector("button");
bd(btn,"click",function(){
alert("点击1")
})
bd(btn,"click",function(){
alert("点击2")
})
bd(btn,"click",function(){
alert("点击3")
})
}
// 正常浏览器obj.addEventListener 与 IE8---obj.attachEvent 兼容
function bd(obj,str,callback){
if(obj.addEventListener){
obj.addEventListener(str,callback,false);
}else{
// 在回调函数外添加一层回调函数就可以自己通过call的方式制定this指向, attachEvent默认指向window
obj.attachEvent("on"+str,function(){
callback.call(obj);
})
}
}
