JavaScript中事件委託(事件代理)詳解

 

在JavaScript的事件中,存在事件委託(事件代理),那麼什麼是事件委託呢?

事件委託在生活中的例子:

有三個同事預計會在週一收到快遞。爲簽收快遞，有兩種辦法：一是三我的在公司門口等快遞；二是委託給前臺MM代爲簽收。現實當中，咱們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就爲了等快遞）。前臺MM收到快遞後，她會判斷收件人是誰，而後按照收件人的要求籤收，甚至代爲付款。這種方案還有一個優點，那就是即便公司裏來了新員工（無論多少），前臺MM也會在收到寄給新員工的快遞後覈實並代爲簽收。

事件委託在JavaScript中:

好比要給一個dom節點添加一個點擊事件,可是如今事件不加在該dom節點自己,而是加在它的父節點身上,利用它父節點觸發事件,給該dom節點實現事件效果。

實現原理:

事件委託是利用事件的冒泡原理來實現的，何爲事件冒泡呢？就是事件從最深的節點開始，而後逐步向上傳播事件 舉個例子：頁面上有這麼一個節點樹，div>ul>li>a;好比給最裏面的a加一個click點擊事件，那麼這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那麼咱們給最外面的div加點擊事件，讓裏面的ul，li，a實現事件效果，因此都會觸發，這就是事件委託，委託它們父級代爲執行事件。

利用事件委託的做用

• 節省資源,提升效率 在JavaScript中，添加到頁面上的事件處理程序數量將直接關係到頁面的總體運行性能，由於須要不斷的與dom節點進行交互，訪問dom的次數越多，引發瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間 若是使用事件委託,則只會與dom節點進行一次交互,有效的減小了和dom交互次數,節省資源,提升效率

• 對於新建立的dom節點,也能夠擁有事件

使用場景:

• 重複的給dom節點添加事件
• 給dom樹中還沒有建立的元素(動態建立)添加事件

使用js添加事件委託

先給出一個例子1:

<ul id="ul">
    <li>週一去遊玩</li>
    <li>週二去上班</li>
    <li>週三去休息</li>
    <li>週四去吃飯</li>
</ul>

//利用事件委託給每個li標籤添加點擊事件
<script>
    var ul = document.querySelector("#ul");
    ul.onclick = function(){
        alert("快醒醒,天天都要上班的!")
    }
</script>

　　

例子中利用父級ul作事件處理，當li被點擊時，因爲冒泡原理，事件就會冒泡到ul上，由於ul上有點擊事件，因此事件就會觸發

在例子1中,全部的事件代碼都相同,那麼若是不一樣呢? 例子2:

    <ul id="ul">
        <li>週一去遊玩</li>
        <li class="work-day">週二去上班</li>
        <li>週三去休息</li>
        <li>週四去吃飯</li>
    </ul>
<script>
    var ul = document.querySelector("#ul");
    ul.onclick = function(e) {
        var e = event || window.event;
        var target = e.srcElement || e.target;
        if(target.className == "work-day"){
            alert("good boy");
        }else{
            alert("快醒醒,天天都要上班的!");
        }
    }
</script>

　　

這個例子中就會針對於class屬性等於"word-day"的li元素作出不一樣的事件,其餘事件則爲默認事件

jQuery的事件委託

    $(function () {
        $('#ul').on('click', 'li', function () {
            if ($(this).hasClass('work-day')) {
                alert("good boy");
            } else {
                alert("快醒醒,天天都要上班的!");
            }
        })
    });

　　

---

總結:

合理使用事件委託能夠幫助咱們節省資源,提升效率;也能夠給dom中還沒有建立的節點添加事件(能夠本身嘗試一下)。

適合用事件委託的事件：

• click
• mousedown
• mouseup
• keydown
• keyup
• keypress

須要當心的是:mouseover和mouseout雖然也有事件冒泡，可是須要特別的注意，由於須要常常計算它們的位置，處理起來不太容易。

不適合用事件委託的事件：

• mousemove(每次都要計算它的位置，很是很差把控)
• focus，blur等(自己就沒用冒泡的特性，天然就不能用事件委託了)