1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 9 window.onload=function() 10 { 11 /* 12 点击按钮以后弹出一个内容 13 使用 对象.事件=函数的形式绑定响应函数，只能同时为一个元素的 14 一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个， 15 则后边会覆盖前边的 16 */ 17 var button1=document.getElementById("button1"); 18 button1.onclick=function(){ 19 alert(1); 20 }; 21 /* 22 var button2=document.getElementById("button1"); 23 button2.onclick=function(){ 24 alert("hi2"); 25 }; 26 */ 27 /* 28 addEventListener() 29 通过这个方法也可以为元素绑定响应函数 30 参数 31 1.事件的字符串click 32 2.回调函数，当事件触发时该函数会被调用 33 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 34 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， 35 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 36 这个方法不支持IE8及以下的浏览器 37 38 39 button1=document.getElementById("button1"); 40 button1.addEventListener("click",function(){ 41 alert("1");},false); 42 button1.addEventListener("click",function(){ 43 alert("2");},false); 44 45 46 attachEvent() 47 在IE8中可以使用attachEvent()来绑定事件 48 参数 49 1.事件的字符串onclick 50 2.回调函数 51 这种方法也可以同时为一个事件绑定多个处理函数 52 不同的是它是后绑定先执行，执行顺序和addEventListener()相反 53 正常浏览器不支持 54 button1.attachEvent("onclick",function(){ 55 alert("hi3"); 56 57 */ 58 bind(button1,"click",function(){ 59 alert("hh");}); 60 61 }; 62 63 //定义一个函数，用来为指定元素绑定响应函数 64 /* 65 参数 66 obj 要绑定事件的对象 67 eventStr 事件的字符串 68 callback 回调函数 69 addEventListener()中的this，是绑定事件的对象 70 attachEvent()中的this.是window 71 需要统一两个方法的this 72 */ 73 74 function bind(obj,eventStr,callback){ 75 if(obj.addEventListener){ 76 obj.addEventListener(eventStr,callback,false); 77 }else{ 78 /* 79 this是由调用方式决定 80 callback.call(obj); 81 */ 82 obj.attachEvent("on"+eventStr,function(){ 83 callback.call(obj);//浏览器调用匿名函数 匿名函数调用callback,可以去指定this 84 }); 85 } 86 } 87 88 </script> 89 <style type="text/css"> 90 </style> 91 <body> 92 <button id="button1">button</button> 93 </body> 94 </html>