<!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>