事件的綁定

時間 2019-11-29

標籤事件綁定简体版

原文原文鏈接

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。