JavaScript(JQ)事件委托以及JS闭包小记

一开始看的时候有些晕,可以监听DOM元素的方法太多,主要是写在<script></script>,下面列出来理清楚:

JS原生:

document.getElementById("menuultest").onmouseover = function(ev){    };

JQ:该段参考自https://codeplayer.vip/p/j7sq1

// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").click( [ data ,] handler );

// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").bind( "click" [, data ], handler );

// jQuery 1.3+ (1.4+支持参数data)
$("selector").live( "click" [, data ], handler );

// jQuery 1.4.2+
$("ancestor").delegate( "selector", "click" [, data ], handler );

// jQuery 1.7+
$("ancestor").on( "click", "selector" [, data ], handler );

注:从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。

==============================结束引用===========================

什么是事件委托:

利用冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

事件委托和事件监听的区别:

在js中,常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响。此时,我们可以用事件委托的方式来进行事件的监听,所以可以说事件委托是一种变相的事件监听方式。

形象化事件委托:

想象公司有两个员工要收快递,有办法是两个人在公司门外等快递送来或者是快递员打电话到了再来拿,不考虑这两种方法,那我们是不是可以想象公司前台有人帮所有公司员工签收,也就相当于委托公司前台代收,然后员工再自己来取。

 接下来看看原生JS和JQ怎么实现事件委托,先给出一段html:

<input type="button" name=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值