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>
