JavaScript 註冊事件處理函式
在JavaScript中,為元素註冊事件處理函式的方式不止一種。
下面分別通過程式碼例項做一下介紹它們各自的使用方式和優缺點。
一.直接在HTML標籤內部註冊事件處理函式:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #ant{ width:100px; height:100px; background-color:red; } </style> <script type="text/javascript"> function changeBg(){ let odiv = document.getElementById("ant"); odiv.style.backgroundColor = "green"; } </script> </head> <body> <div id="ant"></div> <input type="button" onclick="changeBg()" value="檢視演示"/> </body> </html>
上面程式碼為input按鈕註冊click點選事件處理函式。
註冊方式解析如下:
(1).事件處理函式在HTML元素內部註冊。
(2).onclick是HTML元素的事件屬性,它的屬性值是事件觸發後呼叫執行的函式。
(3).引號中的函式必須帶有小括號,比如changeBg()而不是changeBg。
因為此種方式註冊事件處理函式等同於如下程式碼:
[JavaScript] 純文字檢視 複製程式碼obt.onclick=function(){ changeBg() }
事件發生後,就會執行匿名的事件處理函式,然後呼叫changeBg函式,所以必須帶小括號。
(4).onclick事件屬性前面必須帶on。
優缺點如下:
(1).註冊方式簡單,初學者可能最先掌握此方式。
(2).瀏覽器相容性好,各個瀏覽器都支援。
(3).與HTML標籤內容混合在一起,讓頁面看起來十分亂。
(4).只能註冊一個事件處理函式,大家知道HTML元素寫兩個屬性只會有一個生效,另一個被覆蓋。
二.通過dom元素物件事件屬性註冊:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #ant{ width:100px; height:100px; background-color:red; } </style> <script type="text/javascript"> function changeBg(){ let odiv = document.getElementById("ant"); odiv.style.backgroundColor = "green"; } window.onload=function(){ let obt=document.getElementById("bt"); obt.onclick=function(){ changeBg(); } } </script> </head> <body> <div id="ant"></div> <input type="button" id="bt" value="檢視演示"/> </body> </html>
此程式碼實現了上一段程式碼相同的效果,點選按鈕可以修改div顏色的背景色。
註冊方式解析如下:
(1).獲取按鈕的dom元素物件obt。
(2).然後通過dom元素物件的事件屬性onclick註冊事件處理函式,更通俗一點,就是為dom元素物件的事件屬性賦值一個函式,當事件觸發時,就會呼叫此函式。
(3).點選按鈕,事件觸發,呼叫事件處理函式,此事件處理函式再呼叫其內部的changeBg函式。
優缺點如下:
(1).容易掌握。
(2).瀏覽器相容性好,各個瀏覽器都支援。
(3).只能為同一個元素物件註冊一個相同型別的事件處理函式,否則後面的會覆蓋前面的。
三.addEventListener註冊事件處理函式:
此方法可以為指定元素註冊事件處理函式,ES5新增。
優點與缺點總結如下:
(1).可以為同一個元素註冊多個事件處理函式。
(2).更能更多一些。
(3).掌握起來稍稍複雜(當然它也很簡單,與前兩種比稍微複雜一些)。
(4).具有一定相容性問題,IE9以下瀏覽器不支援。
此方法的具體用法可以參閱JavaScript addEventListener()一章節。
相關文章
- JavaScript 批量註冊事件處理函式JavaScript事件函式
- for迴圈批量註冊事件處理函式事件函式
- JavaScript為事件處理函式傳遞引數JavaScript事件函式
- echarts 繫結事件處理函式Echarts事件函式
- JavaScript事件處理JavaScript事件
- JavaScript 非同步函式的 Promisification 處理JavaScript非同步函式
- 如何使用 controllerExtensions 給 SAP Fiori Elements 表格註冊事件響應函式Controller事件函式
- 在javascript中使用純函式處理副作用JavaScript函式
- [譯] 如何使用純函式式 JavaScript 處理髒副作用函式JavaScript
- Spring Ioc原始碼分析系列--Ioc容器註冊BeanPostProcessor後置處理器以及事件訊息處理Spring原始碼Bean事件
- js 註冊事件的兩種方式詳解,傳統註冊事件與方法監聽註冊事件(addEventListener)JS事件dev
- 陣列處理函式陣列函式
- 插入式註解處理器
- Nacos - 服務端處理註冊請求服務端
- 事件註冊與事件代理學習事件
- Swoole 回撥函式的註冊與呼叫函式
- JavaScript和JQuery的滑鼠mouse事件冒泡處理JavaScriptjQuery事件
- 在c中,怎麼註冊回撥函式函式
- 事件處理事件
- Flink處理函式實戰之四:視窗處理函式
- Sanic 處理函式修飾器函式
- mongoDB中聚合函式java處理MongoDB函式Java
- C語言之字串處理函式C語言字串函式
- 事件處理函式中, e.stopPropagation()能放在 onChangeColor()後邊執行嗎?事件函式
- Flink處理函式實戰之五:CoProcessFunction(雙流處理)函式Function
- 如何使用原生的 JavaScript 程式碼,觸發 SAP UI5 按鈕控制元件的點選事件處理函式JavaScriptUI控制元件事件函式
- 好程式設計師分享React-010-事件處理函式的this指向問題程式設計師React事件函式
- React事件處理React事件
- vue事件處理Vue事件
- JavaSwing 事件處理Java事件
- Flutter | 事件處理Flutter事件
- 六、函式、包和錯誤處理函式
- Presto 標量函式註冊和呼叫過程簡述REST函式
- 公司寶商標註冊|OPPO註冊OCAR商標被駁回,商標駁回處理方法
- javaScript函式JavaScript函式
- thinkphp 輸出變數使用函式處理PHP變數函式
- Clickhouse SQL日期處理函式及案例分享SQL函式
- MySQL-日期和資料處理函式MySql函式