html5 点击事件委托,DOM事件委托详解

什么是事件委托?

对"事件处理程序过多"问题的解决方案,就是需要触发子事件时,只用给某父元素指定一个事件处理程序,就可以管理某一类型的所有事件.

事件委托的原理和优点?

1.原理: 事件冒泡

当元素的事件被触发后，所有的父级元素的同名事件会被依次触发,子元素 -> 父元素 -> body -> html -> document -> window,IE8和之前的浏览器只到document

2.优点:

整个页面占用的内存更少,能够提升整体性能

document对象能很快被访问,而且在页面生命周期的任何时间点为它添加事件处理程序(无需等待DOMContentLoaded或者load事件),换句话说:只要可单击的元素呈现在页面当中,就可以立即获得适当的功能

在页面中设置事件处理程序的事件更少,所需要引用的DOM更少,时间更短.

用途

1.多个元素注册同一事件时

例:比如给下列每一个li元素注册一个点击事件

原始写法,循环遍历注册(数据一多就会消耗大量的内存)

• 1
• 2
• 3
• 4

var liList = document.getElementsByTagName('li');

for (var i = 0; i < liList.length; i++) {

liList[i].onclick = function () {

alert(this.innerHTML)

}

}

采用事件委托,只需要给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标签的按钮,并为其注册点击事件

原始的循环遍历并不能为新增的标签增加事件

• 1
• 2
• 3
• 4

点我有惊喜

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);

}

事件委托:后续添加的每一个li都有点击事件

• 1
• 2
• 3
• 4

点我有惊喜

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);

}

最适合事件委托技术的事件有:

click

mousedown

mouseup

keyup

keydown

虽然mouseover和mouseout也有事件冒泡,但要适当处理它们并不容易,因为需要经常计算元素的位置(在移入移出时)

jQuery的事件委托语法

//$('父元素').on('事件名','子元素触发',事件触发时的回调函数);

$('ul').on('click','li',function(e){

console.log(e.target.innerHTML);

})