jQuery系列(十二):事件委托


1、什么是事件委托

通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。
  舉個列子:有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法:一是三個人在公司門口等快遞;二是委托給前台MM代為簽收。現實當中,我們大都采用委托的方案(公司也不會容忍那么多員工站在門口就為了等快遞)。前台MM收到快遞后,她會判斷收件人是誰,然后按照收件人的要求簽收,甚至代為付款。這種方案還有一個優勢,那就是即使公司里來了新員工(不管多少),前台MM也會在收到寄給新員工的快遞后核實並代為簽收。

原理:

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

作用:

  性能要好
  針對新創建的元素,直接可以擁有事件

事件源 :

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

使用情景:

  •為DOM中的很多元素綁定相同事件;
  •為DOM中尚不存在的元素綁定事件;

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>
    <li class="felix">felix</li>
    <li>fff</li>
    <li>fff</li>

</ul>
</body>
<script src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //通過on()方法
        $('ul').on('click','#name,.felix',function(){
            console.log(this);
        });
        //未來追加的元素
        $('ul').append('<a id="name">relix</a>')
    })
</script>
</body>
</html>

語法:

on(type,selector,data,fn);

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

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM