歡迎來到大唐傳易博客!

jquery

當前位置:首頁 > 前端 > JavaScript > jquery >

徹底弄懂jquery事件委托的用法

時間:2019-11-10|欄目:jquery|網站標簽: 事件委托 |點擊:

    jquery總結起來就是對dom、事件處理、ajax的簡化,今天給大家介紹下jquery中事件處理中的委托機制。


   什么是事件委托?


   事件委托其實利用了事件冒泡機制(當事件發生后,這個事件就要開始傳播(從里到外或者從外向里),簡單點來說,比如我們常見的onclick、keydown、keyup等一系列的用戶操作綁定給其他元素來做(本應該由這個元素來操作的),這就是事件委托。

   
事件委托示意圖

 
   為什么不直接操作元素,而用事件委托來操作元素呢?

    
一:性能原因

    如果一個父級元素里子元素太多的時候,為每個子元素進行獨立綁定事件處理的話,無疑是浪費了很大的頁面性能。所以利用委托機制來處理是最佳的選擇。

    二:為動態生成的元素,在不可預見的頁面,比如我們常見的點擊生成更多的頁面,這種通常通過ajax去請求獲取新的html元素的時候,我們無法在事前就給予事件的綁定,只能委托父級元素來操作。

 
    
委托父級元素動態添加dom元素

 
    jquery如何進行事件的委托處理?

    jquery的.on方法內置了委托管理能力,代碼如下:

html代碼:
 
  
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

jquery代碼:

$(function () {
        $("ul").on("click","li",function () {
            alert(1);
        })
    });

li的代碼就可以巧妙的委托給ul代為處理。

對于事件委托處理,想必大家都有自己的解決方案。歡迎大家往下留言探討。大唐傳易是專門從事實戰IT編程的博客網站,歡迎大家關注并訂閱!

上一篇:用jquery讓正負值標注不同的顏色

欄????目:jquery

下一篇:用jquery ajax技術來跟服務器數據交互

本文標題:徹底弄懂jquery事件委托的用法

本文地址:http://www.cajqou.live/qdzs/JavaScript/jquery/756.html

您可能感興趣的文章

說點什么吧
  • 全部評論(0
    還沒有評論,快來搶沙發吧!

| |

如果侵犯了您的權利,請與我們聯系,我們將在24小時內進行處理、任何非本站因素導致的法律后果,本站均不負任何責任。

Copyright © 2016-2019 福州大唐傳易網絡科技有限公司 版權所有

北京pk10单双公式计算 最新足球比赛比分 pk10牛牛 老快3最大遗漏期数 新疆35选7规则 鑫亿配资 四川快乐12分析软件 秒速赛车出号规律 中原风采22选开奖今天 全民福州麻将玩不了 广东十一选五开奖号 福彩排列7走势图 陕西11选5 捷报比分篮球即时比分 a策略配资 云南快乐十分开奖走 一分钟赛车计划数据