12-事件委託(事件代理)

什麼是事件委託

通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來作,這個事件原本是加在某些元素上的,然而你卻加到別人身上來作,完成這個事件。
  舉個列子:有三個同事預計會在週一收到快遞。爲簽收快遞,有兩種辦法:一是三我的在公司門口等快遞;二是委託給前臺MM代爲簽收。現實當中,咱們大都採用委託的方案(公司也不會容忍那麼多員工站在門口就爲了等快遞)。前臺MM收到快遞後,她會判斷收件人是誰,而後按照收件人的要求籤收,甚至代爲付款。這種方案還有一個優點,那就是即便公司裏來了新員工(無論多少),前臺MM也會在收到寄給新員工的快遞後覈實並代爲簽收。javascript

原理:java

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

 

做用:app

1.性能要好
2.針對新建立的元素,直接能夠擁有事件函數

事件源 :性能

  跟this做用同樣(他不用看指向問題,誰操做的就是誰),event對象下的this

使用情景:spa

  •爲DOM中的不少元素綁定相同事件;
  •爲DOM中尚不存在的元素綁定事件;code

示例:對象

<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>

語法:

on(type,selector,data,fn);

描述:在選定的元素上綁定一個或多個事件處理函數

參數解釋
events( String) : 一個或多個空格分隔的事件類型
selector( String) : 一個選擇器字符串,用於過濾出被選中的元素中能觸發事件的後代元素
data: 當一個事件被觸發時,要傳遞給事件處理函數的 event.data
fn:回調函數
相關文章
相關標籤/搜索