JQ JS 寫法比較
JQ選擇器 可以一次選擇多個元素,一次性套用CSS、掛載事件
原生 querySelectorAll 的結果為 NodeList,需要以迴圈方式套用CSS、掛載事件
原生寫法 會造成 大量DOM操作而效能不佳,採取事件代理方式可解決 (下見)
JQ click 與 on 差別
click 對於 後續新增的 DOM 無法偵測到
on 則是能夠 動態事件綁定,後續新增的 DOM 仍有掛載事件的效果
動態事件綁定實現
利用事件冒泡,類似於事件代理的方式,
子元素被點時,母元素接受到事件而觸發事件
.on('觸發方式','被點擊的選擇器')
// JQ寫法
// 儲存變數,避免用到又要再次尋找存取,亦可統一管理變數
const myBtn = $('#myBtn')
myBtn.click(FuncName)
myBtn.on('click', FuncName)
// 無動態事件綁定效果
$('li span').click(function(){ /* do stuff*/ );
$('li span').on('click',function(){ /* do stuff*/ );
// on 動態事件綁定實現
$('li').on('click','span',function(){ /* do stuff*/ );
// 原生JS寫法
const myBtn = document.querySelector('#myBtn')
myBtn.addEventListener('click', funcName)
const listItems = document.querySelectorAll('.listItem')
listItems.forEach((el) => {
el.addEventListener('cick', () => {
// do stuff
})
})
新人筆記: 若有錯誤歡迎提出勘誤,感謝各路大神
利用DOM事件傳遞機制 "冒泡"
減少監聽器的數量,節省不少記憶體資源
Ex:列表下多個Item,利用事件代理只需一個,而非每個Item都掛載監聽器
避免迴圈掛載監聽器,節省 DOM 操作次數
棄用監聽器更為方便
SPA頁面切換,僅更換內容不換頁,監聽器因內容置換而用不到,
但仍會占用資源,因此棄用該監聽器可節省資源。
使用事件代理,只需要棄用一個監聽器即可。
適合使用事件代理的事件
click , mousedown , mouseup ,
keydown , keyup , keypress
這些不適合
mouseover , mouseout 需要計算位置較不容易把控
mouseenter , mouseleave, focus , blur 則沒有冒泡特性
// 原生JS 事件代理
const myList = document.querySelector('.myList')
myList.addEventListener('click', clickListItem)
function clickListItem(e){
const className = e.target.classList
if (className.contains('')) { /* do stuff */}
const tagName = e.target.tagName.toLowerCase()
if (tagName === 'a') { /* do stuff */ }
}
JS中的事件委托或是事件代理详解
JQ click 與 on 差異