js/jquery事件委托

用户头像
郑州/网页设计师/10年前/165浏览
js/jquery事件委托

事件委托

JS与Jquery的事件委托

参考:http://www.ituring.com.cn/article/467

概念:

  什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
  举个列子:有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。

原理:

  利用冒泡的原理,把事件加到父级上,触发执行效果。

作用:

1.性能要好
2.针对新创建的元素,直接可以拥有事件

事件源 :

  跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的

使用情景:

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

 

$(function(){ 

        $('#ul1,#ul2').on('click','li',function(){ 

                if(!$(this).attr('s')) { 

                $(this).css('background','red'); 

                $(this).attr('s',true); 

                }else { 

                        $(this).css('background','#fff'); 

                        $(this).removeAttr('s'); 

                } 

        }) 

});


0
举报
|
1
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
户外旅行飞机情侣假日出行
卡通风格网页页面3D渲染
网页页面矢量插画
三位美女围着网页看信息矢量插画
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
男生坐在网页面前办公矢量插画
商务网页
新年快乐送福网页矢量图banner
浏览电脑网页的元素
网页设计——纸杯蛋糕
 网页背景
网页背景
卡通女孩与网页表格3D渲染
卡通风格网页页面3D渲染
卡通风格网页页面3D渲染
3D风格时尚电子商务设计元素
四个人物分别在上网贴纸合集
卡通风格网页页面3D渲染
网页电商背景矢量插画
三个青年站在网页周边矢量插画
三个青年正在装修网页矢量插画
B19【星空诗意&网页幽灵按钮】公司产品服务简介汇报
一个男生和两个女生站在网页前面打招呼矢量
一个人拿着优惠券准备支付购物电商矢量插画
你可能喜欢
大家都在看
登录注册