事件的绑定 

 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>

 

posted @ 2019-07-28 15:47  zuiaimiusi  阅读(110)  评论(0)    收藏  举报