原生JS及jQuery中事件委託的寫法

在繫結節點事件處理程式時遇到的問題：

採用事件委託的優點:

下面以給每個li 元素繫結click事件為例：

="container"

>
="item"
>li-
1<
/li>
="item"
>li-
2<
/li>
="item"
>li-
3<
/li>
="item"
>li-
4<
/li>
="item"
>li-
5<
/li>
="item"
>li-
6<
/li>
<
/ul>

var _li = document.

getelementsbytagname
('li'),
_ul = document.
getelementsbytagname
('ul')[
0];/* 事件委託繫結事件 */
_ul.
onclick
=function
(e)}

on()方法

/*

* .on()方法，jquery 1.7新增，提供繫結事件處理程式所需的所有功能。幫助從舊的jquery事件方法轉換，see .bind(), .delegate(), 和 .live().
* */$(
'ul').
on('click'
,'li'
,function
(e))
;

$

('ul').
delegate
('li'
,'click'
,function
(e))
;

/*

* 從 jquery 1.7 開始，不再建議使用 .live() 方法。請使用 .on() 來新增事件處理。使用舊版本的使用者，應該優先使用 .delegate() 來替代 .live()。
* */$(
'li').
live
('click'
,function
(e))
;

原生js事件委託

之前面試的時候就被問過，什麼是事件委託？事件委託 給父元素繫結事件，用來監聽子元素的冒泡事件。也就是事件目標 子元素 不處理事件，把事件委託給父元素去處理。看下圖理解事件冒泡 事件委託的好處 不需要對每乙個子元素繫結事件，只需要在父元素上繫結事件，減少了操作dom節點的次數，從而減少瀏覽器的重載入，...

原生js中的事件監聽方法

好久沒有使用過原生js中的監聽方法，竟然發現有些陌生，幾個方法之間的區別也有些混亂了。不過看過了api文件，又將他們之間的區別和用法理清楚了，這裡進行總結。一 傳統事件繫結方法window.onload function document.getelementbyid btn onclick fun...

快速上手原生js中的事件

我們在學習的時候，最初接觸的事件繫結方式大多是傳統事件繫結方法。傳統事件繫結方法事例如下 window.nl ad function document.getelementbyid btn nclick function document.nm usem ve function 1234 5678 ...