JQuery7:事件委托

栏目: jQuery · 发布时间: 7年前

内容简介:版权声明:本文为博主尹成联系QQ77025077,微信18510341407原创文章,欢迎转载侵权不究。 https://blog.csdn.net/yincheng01/article/details/84066866

版权声明:本文为博主尹成联系QQ77025077,微信18510341407原创文章,欢迎转载侵权不究。 https://blog.csdn.net/yincheng01/article/details/84066866

#事件委托

事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

###一般绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

###事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

###取消事件委托

// ev.delegateTarge 委托对象
$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

学院 Go 语言视频主页

https://edu.csdn.net/lecturer/1928

清华团队带你实战区块链开发

扫码获取海量视频及源码 QQ群:721929980

JQuery7:事件委托

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

xHTML+CSS+Dreamweaver CS3标准网站构建实例详解

xHTML+CSS+Dreamweaver CS3标准网站构建实例详解

李晓斌 / 第1版 (2007年9月1日) / 2007-9 / 49.9

《xHTML+CSS+Dreamweaver CS3标准网站构建实例详解》特别适合网站美工、网站前端架构师、网页设计爱好者、Wap页面设计师作为学习Web标准网页制作的入门图书,也适合Web标准网站高手作为案头随手查询手册,也适合作为美术院校和培训学校相关专业的培训教材。一起来看看 《xHTML+CSS+Dreamweaver CS3标准网站构建实例详解》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

html转js在线工具
html转js在线工具

html转js在线工具