DOM事件
事件通俗的讲,就是onClick ,onMouseIn,onMouseOut等等诸如此类的都是事件.也就是文档或浏览器窗口中发生的一些特定的交互瞬间.通常事件有三个特点:变化,通知,监听
1.如何监听事件
DOM事件分两种:
DOM Level 0
又称传统事件处理——通过对象属性将一个函数值指定为事件处理程序的做法。也就是将要添加的事件处理程序直接赋给该对象的事件处理程序属性。任何对象只允许指定一个事件处理程序。
//DOM level 0
button.onclick = function(){}
浏览器是如何调用onclick？反推得知，其实是类似于onclick.call('button',鼠标事件)
DOM level 2
DOM level 2 是经过W3C认证的事件，它将事件的传播方式分为了三个阶段：事件捕获阶段（Capturing Phase）、目标阶段（Target Phase）和冒泡阶段（Bubble Phase）。
捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
目标阶段：到达目标事件位置（事发地），触发事件；
冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。
//DOM level 2
button.addEventListener('click',function(){})
level 2事件通过EventTarget.addEventListener() 方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。该方法允许给一个事件注册多个 listener。
by:https://www.w3.org/TR/2016/WD-uievents-20160804/images/eventflow.svg
简单来说,addEventListener是为了实现多重监听的一种手段
事件机制
依照上图我们可以发现,DOM事件有两种事件的机制,捕获和冒泡
先做一个实例,一目了然
首先设置一个div,id为parent1,它包含一个按钮,其id为child1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件机制</title>
</head>
<body>
<div id='parent1'>
<button id='child1'>btn</button>
</div>
<script>
child1.addEventListener('click',function(){
console.log("捕获，child");
}
,true);
parent1.addEventListener('click',function(){
console.log("捕获，parent");
}
,true);
child1.addEventListener('click',function(){
console.log("冒泡，child");
}
,false);
parent1.addEventListener('click',function(){
console.log("冒泡，parent");
}
,false);
</script>
</body>
</html>
点击btn按钮结果如下
事件捕获:结果可知,当你使用事件捕获时，父级元素先触发，子级元素后触发
事件冒泡:子级元素先触发，父级元素后触发
*两种模型
Netscape和Microsoft是不同的实现方式。
Netscape中，事件会从最内层的元素开始发生，一直向上传播，直到document对象,就像冒泡一样。
Microsoft中，事件会从最外层开始触发，这就叫做事件冒泡。
两种事件处理顺序刚好相反。IE默认支持事件冒泡，Mozilla, Opera 两种都支持 。
一般使用冒泡
2.事件委托
紧接着上述的例子,我们尝试将e打印出来
child1.addEventListener('click',function(event){
console.log(event);
});
得到了MouseEvent的对象信息
找到了JS事件中最具代表行的信息target 和currentTarget.再次修改代码,为父子元素分别添加打印target 和currentTarget
child1.addEventListener('click',function(event){
console.log('这是子元素');
console.log(event.target);
console.log(event.currentTarget);
});
parent1.addEventListener('click',function(event){
console.log('这是父元素');
console.log(event.target);
console.log(event.currentTarget);
});
首先点击外层的div得到
再点击按钮得到
一目了然,课得出以下结论.
event.target
如上图得知,event.target 是鼠标所点击的元素,也就是触发事件的元素
event.currentTarget
而event.currentTarget是指被监听的元素,即事件绑定的元素
以上两种方式所写的例子可以算一个最简单的事件委托,究其原因,可发现触发事件的元素和被监听的元素不一定是一个元素!
事件委托实例
1.多个元素共用一个监听器时
创建一个ul,并包含两个li,其中一个li中包含一个span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<style>
ul, li {
list-style: none;
border: 1px solid;
padding: 5px;
background: darkgrey;
}
li {
text-align: center;
margin: 10px;
background: #fff
}
</style>
</head>
<body>
<ul>
<li><span>点击<span></li>
<li>点击</li>
</ul>
</body>
</html>
赋予ui点击事件,并监听
var elementUl = document.querySelector('ul');
function fn(event) {
var el = event.target;
while (el.tagName !== 'LI') {
if (el === elementUl){
el =null;
break;
}
el = el.parentNode;//返回當前元素的父节点
}
if (el) {
console.log(el)
}
}
elementUl.addEventListener('click', fn);
分别点击第一个span的li
这例子实现了点击li的范围内,不论li本身还是li旗下的所有元素,都会返回得到li的本身.
2.实现动态内容的监控
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
li{
border: 1px solid;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id=addButton>+</button>
</body>
</html>
addButton.onclick = function(){
var li = document.createElement('li')
li.textContent = 'new'
document.querySelector('ul').appendChild(li)
}
document.querySelector('ul').onclick = function(e){
console.log(e.target)
}
总结
事件委托的特点
1.可以大量节省内存占用，减少事件注册
2.实现当新增子对象时无需再次对其绑定事件,实现动态内容很方便
