慕課前端入門-JS事件
阿新 • • 發佈：2020-09-19
1. 概念
事件是可以被JavaScript偵測到的行為，通俗的講就是當用戶與web頁面進行某些互動時，直譯器就會建立響應的event物件以描述事件資訊。
如使用者輸入使用者名稱和密碼，點選登入。瀏覽器就向伺服器傳送登入請求。
常見的事件有：
- 使用者點選頁面上的內容
- 滑鼠經過特定的元素
- 使用者按下鍵盤的某個按鍵
- 使用者滾動視窗或改變視窗大小
- 頁面元素載入完成或載入失敗
事件控制代碼(事件處理函式、事件監聽函式)：指用於響應某個事件而呼叫的函式。每一個事件均對應一個事件控制代碼，在程式執行時，將相應的函式或語句指定給事件控制代碼。則在事件發生時，瀏覽器便執行指定的函式或語句。
2. 事件定義
事件有三要素：事件物件、事件型別、事件控制代碼。
為特定事件定義監聽函式有三種方式
2.1 直接在html中定義元素的事件相關屬性
<button onclick="alert('hello')">按鈕</button>
<body onclick="init()"></body>
缺點：違反了內容與行為相分離的原則，應儘可能少用
示例
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- 以下面程式碼為例，button是事件物件，onclick是事件型別，alert是事件控制代碼 --> <button onclick="alert('給你說了，不要點')">不要點</button> <button onclick="noClick()">不要點</button> </body> </html> <script type="text/javascript"> function noClick(){ alert("點什麼點，啥都沒有"); } </script>
2.2 DOM0級事件
在JavaScript中為元素的事件相關屬性賦值
document.getElementById("btn").onclick=function(){}
document.body.onload=init;
function init(){...}
缺點：此語法實現了“內容與行為相分離”，但元素仍只能繫結一個監聽函式。
示例
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <button id="clickme">點選我</button> </body> </html> <script type="text/javascript"> var btn = document.getElementById("clickme"); var clickme = function () { alert("DOM0級事件繫結方式"); } btn.onclick= clickme; </script>
2.3 DOM2級事件
高階處理方式，一個事件可以繫結多個監聽函式。但要注意瀏覽器相容問題
btn.addEventListener("click", function(){}, false); //DOM
btn.attachEvent("onclick", function(){}); //IE
document.body.addEventListener("load", init); //DOM
document.bbody.attachEvent("onalod", init);//IE
function init(){...}
element.addEventListener(event, function, useCapture);
/*功能：用於向指定元素新增事件控制代碼
引數：event：必須，事件型別
function：必須，事件控制代碼，即函式
useCapture：可選，布林值 指定事件是否在捕獲或冒泡階段執行，預設false。
*/
element.removeEventListener(event, function, useCapture)
/*功能：移除指定的控制代碼
引數：event：事件型別
function：必須，指定要移除的函式名
useCaption：可選，布林值，指定移除事件控制代碼的階段。
*/
示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="clickme">點選我</button>
</body>
</html>
<script type="text/javascript">
var btn = document.getElementById("clickme");
var clickme = function () {
alert("我被點選了");
}
function click2() {
alert("我再次被點選了");
}
//控制代碼指定匿名函式
btn.addEventListener('click',function(){alert("什麼事")}, false);//第3個引數預設false
//控制代碼指定變數
btn.addEventListener('click', clickme);
//控制代碼指定方法名
btn.addEventListener('click',click2);
btn.removeEventListener('click',clickme);
</script>
總結：
| 方法 | 區別 |
| html中定義 | html中寫js程式碼。 缺點：強耦合，不利於程式碼複用 |
| DOM0級事件 | 事件物件的屬性新增繫結事件 優點：鬆耦合。html與js程式碼分離。 缺點：有且只能繫結一個事件 |
| DOM2級事件 | 通過addEventListener函式繫結事件 優點：鬆耦合 支援同一DOM元素註冊多個同類型事件 新增了捕獲和冒泡的概念 |