原生JS及jQuery中事件委托的写法
程序员文章站
2022-06-16 10:04:00
...
在绑定节点事件处理程序时遇到的问题:
- 每个 函数都是对象,都会占用内存;内存中的对象越多,性能就越差。
- 其次,必须事先指定所有事件处理程 序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间。
采用事件委托的优点:
- document 对象很快就可以访问,而且可以在页面生命周期的任何时点上为它添加事件处理程序 (无需等待 DOMContentLoaded 或 load 事件)。换句话说,只要可单击的元素呈现在页面上, 就可以立即具备适当的功能。
- 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少, 所花的时间也更少。
- 整个页面占用的内存空间更少,能够提升整体性能。
- 绑定事件后,即使目标元素是以后再添加进来的也有效。
- 适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress等。
下面以给每个li 元素绑定click事件为例:
<ul class="container">
<li class="item">li-1</li>
<li class="item">li-2</li>
<li class="item">li-3</li>
<li class="item">li-4</li>
<li class="item">li-5</li>
<li class="item">li-6</li>
</ul>
原生JS事件委托:
var _li = document.getElementsByTagName('li'),
_ul = document.getElementsByTagName('ul')[0];
/* 事件委托绑定事件 */
_ul.onclick = function (e) {
var _it = e.target;
if (_it.tagName == 'LI') {
// 能进里说明当前点击的是LI元素
console.log(_it.innerHTML);
}
}
jQuery事件委托:
on()方法
/*
* .on()方法,jQuery 1.7新增,提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live().
* */
$('ul').on('click', 'li', function (e) {
console.log(e.target.innerHTML);
});
delegate()方法
$('ul').delegate('li', 'click', function (e) {
console.log(e.target.innerHTML);
});
live()方法
/*
* 从 jQuery 1.7 开始,不再建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户,应该优先使用 .delegate() 来替代 .live()。
* */
$('li').live('click', function (e) {
console.log(e.target.innerHTML);
});
End.
上一篇: mysql的这些坑你踩过吗?快来看看怎么优化mysql?
下一篇: 24c02读写(iic总线)
推荐阅读
-
JS中的事件委托实例浅析
-
原生js实现复制对象、扩展对象 类似jquery中的extend()方法教程
-
JQuery中的事件及动画用法实例教程
-
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
-
模拟jQuery中的ready方法及实现按需加载css,js实例代码
-
js中的事件委托或是事件代理使用详解
-
原生js、jQuery、layui中的continue、break
-
原生JS中应该禁止出现的写法
-
JQuery的焦点事件focus() 与按键事件keydown() 及js判断当前页面是否为*页面 子页面刷新将*页面刷新 window.top.location
-
入口函数的作用,以及原生js和jQuery库中的入口函数的不同