一开始看的时候有些晕,可以监听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=