2.事件繫結
事件繫結就是通過給一個物件新增一個事件,在該事件發生後,執行一個函式
事件繫結方法:
-
在DOM元素中直接繫結
詳情請戳事件繫結-DOM元素中直接繫結
-
在JavaScript程式碼中通過on來進行繫結
詳情請戳事件繫結-on
-
在JavaScript程式碼中通過addEventListener()方法來進行繫結
-
在JavaScript程式碼中通過attachEvent()方法來進行繫結(IE8以下相容性問題的解決方案)
IE的方法,其他瀏覽器均不支援:)
總結
在不考慮相容性的情況下:
- 在DOM元素中直接寫事件繫結不利於程式碼的維護和修改,而且會在html骨架中新增很多冗餘的東西,這裡不考慮使用
- on和addEventListener()方法比較:
- 兩者中的this均指向當前物件
- 兩者的事件處理函式都可以為匿名函式或者命名函式
on在這裡沒有什麼限制
addEventListener()方法中使用命名函式更為整潔,而且有利於事件繫結的移除 - 如果要對事件新增多個事件處理函式
on只能新增一個,如果有多個,後面的會覆蓋前面的
addEventListener()方法則沒有限制 - 事件處理函式的執行時機
on只能在事件冒泡時執行事件處理函式
addEventListener()方法可以通過第三個引數-布林值來控制事件處理函式的執行時機
在考慮相容性問題(IE8以下)的情況下:
- on在使用時需要注意事件處理函式圓括號內的事件物件引數的呼叫方法,在IE中event是自帶的事件物件
- addEventListener()是標準的繫結事件監聽函式的方法,是W3C所支援的,但是並不支援IE8以下
- 利用框架裡面寫好的相容性函式,或者使用attachEvent()方法
- 讓IE被W3C的大車輪碾壓致死吧 :-)
相關文章
- 事件繫結事件
- JSX繫結事件JS事件
- JavaScript 事件繫結JavaScript事件
- js on繫結事件JS事件
- 繫結自定義事件事件
- v-on 繫結事件事件
- JS-事件繫結JS事件
- Vue事件繫結原理Vue事件
- Hooks與事件繫結Hook事件
- React事件優雅繫結React事件
- 元件繫結原生事件元件事件
- IOS繫結touchend事件失效iOS事件
- React事件繫結的方式React事件
- python tkinter如何繫結事件?Python事件
- JS的事件繫結和事件流模型JS事件模型
- zepto繫結事件改變冒泡事件流事件
- JS學習之事件和事件繫結JS事件
- jQuery事件中on實現繫結多個事件jQuery事件
- 微信小程式事件繫結微信小程式事件
- 080 元件自定義事件-繫結元件事件
- Swoole 使用on()繫結事件報錯事件
- Vue事件獲取觸發事件物件和繫結事件物件Vue事件物件
- JS給全域性繫結事件以及給除某個元素外的其他元素繫結事件JS事件
- jQuery之_事件繫結與解綁jQuery事件
- echarts 繫結事件處理函式Echarts事件函式
- 模板語法之--強制資料繫結和繫結事件監聽事件
- React事件繫結幾種方法測試React事件
- 1.22 JQuery5:繫結自定義事件jQuery事件
- Vue 如何給元件繫結原生事件Vue元件事件
- three.js事件繫結外掛--onEventJS事件
- 2.攔截WebView事件WebView事件
- 【測試平臺開發】Vue指令、屬性繫結、事件繫結學習教程Vue事件
- React應該如何優雅的繫結事件?React事件
- 動態生成的html元素繫結click事件HTML事件
- 前端基礎之原生js事件繫結案例前端JS事件
- jQuery原始碼剖析(五) - 事件繫結原理剖析jQuery原始碼事件
- vue系列--vue是如何實現繫結事件Vue事件
- jQuery實現DOM元素事件動態繫結jQuery事件
- uni-app入門教程(3)資料繫結、樣式繫結和事件處理APP事件