什么是事件委托?
对"事件处理程序过多"问题的解决方案,就是需要触发子事件时,只用给某父元素指定一个事件处理程序,就可以管理某一类型的所有事件.
事件委托的原理和优点?
1.原理: 事件冒泡
- 当元素的事件被触发后，所有的父级元素的同名事件会被依次触发,子元素 -> 父元素 -> body -> html -> document -> window,IE8和之前的浏览器只到document
2.优点:
- 整个页面占用的内存更少,能够提升整体性能
- document对象能很快被访问,而且在页面生命周期的任何时间点为它添加事件处理程序(无需等待DOMContentLoaded或者load事件),换句话说:只要可单击的元素呈现在页面当中,就可以立即获得适当的功能
- 在页面中设置事件处理程序的事件更少,所需要引用的DOM更少,时间更短.
用途
1.多个元素注册同一事件时
例:比如给下列每一个li元素注册一个点击事件
原始写法,循环遍历注册(数据一多就会消耗大量的内存)
<ul id='ul'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var liList = document.getElementsByTagName('li');
for (var i = 0; i < liList.length; i++) {
liList[i].onclick = function () {
alert(this.innerHTML)
}
}
</script>
采用事件委托,只需要给li的父元素注册点击事件即可
document.getElementById('ul').onclick = function (e) {
//事件的兼容性代码
e = e || window.event;
//e.target就是li
console.log(e.target.innerHTML);
}
target:可返回触发该事件的节点,如生成事件的元素、文档或窗口等
event.target.nodeName //获取事件触发元素标签name（li,p...）
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML //获取事件触发元素的内容（li）
若ul有其他的元素不用注册点击事件,怎么做?
使用e.target做判断筛选即可
2.动态添加属性
例:设置一个新增Li标签的按钮,并为其注册点击事件
原始的循环遍历并不能为新增的标签增加事件
<ul id='ul'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id="btn">
点我有惊喜
</button>
<script>
var ul = document.getElementById('ul')
var liList = document.getElementsByTagName('li');
for (var i = 0; i < liList.length; i++) {
liList[i].onclick = function () {
alert(this.innerHTML)
}
}
document.getElementById('btn').onclick = function(){
let li = document.createElement('li');
li.innerHTML = '欢迎来到德莱联盟';
ul.appendChild(li);
}
</script>
事件委托:后续添加的每一个li都有点击事件
<ul id='ul'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id="btn">
点我有惊喜
</button>
<script>
var ul = document.getElementById('ul')
ul.onclick = function (e) {
//事件的兼容性代码
e = e || window.event;
//e.target就是li
console.log(e.target.innerHTML);
}
ul.onclick = function(){
let li = document.createElement('li');
li.innerHTML = '欢迎来到德莱联盟';
ul.appendChild(li);
}
</script>
最适合事件委托技术的事件有:
- click
- mousedown
- mouseup
- keyup
- keydown
虽然mouseover和mouseout也有事件冒泡,但要适当处理它们并不容易,因为需要经常计算元素的位置(在移入移出时)
jQuery的事件委托语法
//$('父元素').on('事件名','子元素触发',事件触发时的回调函数);
$('ul').on('click','li',function(e){
console.log(e.target.innerHTML);
})
