事件委託(事件代理)

時間 2019-11-17

標籤事件委託代理简体版

原文原文鏈接

什麼是事件委託 javascript

通俗的講,事件就是 onclick , onmouseover , onmouseout, 等就是事件,委託就是讓別人來作.這個事件原本就是加在某些元素上的,然而你卻加到別人身上來作,完成這個事件.java

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

原理 : 利用冒泡的原理,把事件加到父級上,觸發執行效果.app

　 做用 : 函數

　　　　1 . 性能更好性能

　　　　2 . 針對新建立的元素,直接能夠擁有事件.this

　 事件源 : 跟 this 做用同樣(不看指向問題,誰操做的就是誰) , event 對象下的.spa

使用情景 : code

　　　　1 . 爲DOM重不少元素綁定相同的事件;對象

　　　　2 . 爲DOM重尚不存在的元素綁定事件

示例 :

<body>
        <ul>
            <li class="luffy">路飛</li>
            <li>路飛</li>
            <li>路飛</li>
            
        </ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    //經過on()方法
     $('ul').on('click','#namei,.luffy',function(){
        console.log(this);
       })
            
   //將來追加的元素 
    $('ul').append('<a id="namei">娜美</a>')

}
</script>