js事件綁定

時間 2019-11-12

原文原文鏈接

1. 事件：所謂事件，就是用戶在窗口上對各類組件的操做html

例如：瀏覽器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7     window.onload=function(){
 8         var Obtn=document.querySelector("#btn");
 9                 Obtn.onclick=function(){
10                     alert('點擊事件發生了');
11                 };
12     }
13     </script>
14 </head>
15 <body>
16     <div class="box">
17         <input type="button" id="btn" value="點我">
18     </div>
19 </body>
20 </html>

運行結果：函數

2. 事件綁定：就是當某個對象的事件發生時（或者操做某個組件時），由此而關聯產生的現象或者方法。簡單的說，就是爲某個對象的某個事件綁定相關的事件處理程序測試

例如：spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7     window.onload=function(){
 8         var Obtn=document.querySelector("#btn");
 9                 Obtn.onclick=function(){
10                     alert('我是onclick事件關聯綁定的alert事件方法');
11                 };
12     }
13     </script>
14 </head>
15 <body>
16     <div class="box">
17         <input type="button" id="btn" value="點我">
18     </div>
19 </body>
20 </html>

運行結果：3d

3.事件綁定的方法：code

3.1 在DOM元素中之間綁定，即行間事件htm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7     function aluoha(){
 8         alert('good job,huanying2015!');
 9     }
10     </script>
11 </head>
12 <body>
13     <div class="box">
14         <input type="button" id="btn" value="點我" onclick="aluoha();">
15     </div>
16 </body>
17 </html>

運行結果：對象

3.2 在JavaScript代碼中綁定事件blog

此種綁定事件的方法，能夠是JavaScript代碼和HTML標籤分離，文檔及結構清晰，便於開發和管理，這是一種分塊的思惟方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7     window.onload=function(){
 8         var Obtn = document.querySelector('#btn');
 9         Obtn.onclick=function(){
10              alert('good job,huanying2015!');
11         }
12     }
13     </script>
14 </head>
15 <body>
16     <div class="box">
17         <input type="button" id="btn" value="點我" >
18     </div>
19 </body>
20 </html>

運行結果：

3.3 使用事件監聽來綁定事件

使用addEventListener（非ie瀏覽器）或者 attachEvent（ie瀏覽器）來綁定監聽函數：

非IE瀏覽器監聽事件：

語法格式：element.addEventListener(event,function,useCapture) ;

element：監聽對象；

addEventListener：事件監聽函數

event：事件

function：觸發事件時，執行的函數

useCapture：可選，定義了function 在觸發階段執行仍是冒泡階段執行。值爲true, 在觸發階段執行，值爲false,在冒泡階段執行，默認爲false;

（備註：通過測試，發現ie9,ie10,ie11也支持addEventListener；ie8及如下就不支持了）

補充說明：事件監聽分爲三個階段進行：捕獲階段--->目標階段--->冒泡階段，能夠用如下的關係圖來理解：

代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7     window.onload=function(){
 8         var Obtn = document.querySelector('#btn');
 9        Obtn.addEventListener('click',function(){
10            alert("本次使用了addEventListener 來監聽綁定alert函數");
11        },false);
12     }
13     </script>
14 </head>
15 <body>
16     <div class="box">
17         <input type="button" id="btn" value="點我" >
18     </div>
19 </body>
20 </html>

運行結果：

IE瀏覽器的監聽事件：

語法格式：element.attachEvent(event,function)

element：監聽對象

attachEvent：事件監聽函數

event：事件（備註：ie瀏覽器的事件，須要在事件前加上on 。例如click，IE監聽事件須要加上on ，變成 onclick）

function：觸發事件時，執行的函數

（注意：IE有點坑，IE11不支持這種寫法，反而支持addEventListener 的寫法）

代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7     window.onload=function(){
 8         // var Obtn = document.querySelector('#btn');  // 由於IE8如下不支持document.querySelector()獲取元素
 9         var Obtn = document.getElementById('btn');
10         console.log(Obtn);
11         Obtn.attachEvent('onclick',hello123);
12 
13         function hello123(){
14             alert("本次使用了attachEvent 來監聽綁定alert函數");
15         };  
16     }
17     </script>
18 </head>
19 <body>
20     <div class="box">
21         <input type="button" id="btn" value="點我" >
22     </div>
23 </body>
24 </html>

運行結果：

相關標籤/搜索

每日一句

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