事件传播机制
事件冒泡
事件从目标节点开始沿DOM树向上传播，直到document, DOM结构中的下层节点会更早ji接收到事件，下层节点会更晚接收到事件。
事件冒泡
事件捕获
事件从document开始沿DOM树向下传播，直到目标节点，DOM结构中的上层节点会更早接收到事件，下层节点会更晚接收到事件
事件捕获
DOM事件流
DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，然后是实际目标接收事件，最后是冒泡阶段。
DOM事件流
事件处理程序
事件处理程序，又叫事件监听器，就是响应某个时间的函数。事件处理程序的绑定方式有一下几种
HTML内联方式
直接在HTML对应元素的属性里加上onxxx属性，xxx是事件类型名称，属性值是要执行的JavaScript代码。如
<input type="button" value="Click Me" onclick="alert('Clicked')">
这样的方式存在的问题是HTML与JavaScript代码写在一些要改动事件处理程序就要改动两个地方，所以不推荐这种方式。
事件监听器属性
在JavaScript代码中将对应元素的onxxx属性设置为事件处理程序函数，xxx是事件类型名称，如
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage(e) {
alert(this.id);
};
</script>
用这样的方式，事件处理程序被认为是函数的方法，this指向当前元素。
要解绑事件处理程序，将对应的属性设置为null即可，如btnClick.onclick = null
DOM2级事件处理程序
使用addEventListener()方法绑定事件处理程序，使用removeEventListener方法解绑事件处理程序。
这两个方法都接受3个参数：
- 事件类型
- 作为事件处理程序的函数
- 一个布尔值，默认是
false，如果是false表示在冒泡阶段调用事件处理程序，如果是true表示在捕获阶段调用事件处理程序。
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
alert(this.id);
}, false);
</script>
这样可以为一个事件绑定多个事件处理程序，它们会按照添加顺序依次执行。而事件处理程序属性只能为一个事件绑定一个事件处理程序。
通过addEventListener()绑定的事件可以同removeEventListener()方法移除，传递的参数应该与绑定时相同。如果需要移除一个用addEventListener()绑定的事件，绑定时不要使用匿名函数
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
var handler=function() {
alert(this.id);
}
btnClick.addEventListener('click', handler, false);
btnClick.removeEventListener('click', handler, false);
</script>
阻止传播
事件处理程序函数会被传入一个Event对象作为参数。使用Event对象的stopPropagation()方法阻止事件在事件流中继续传播
<div id="container">
container
<div id="outer">
outer
<div id="inner">
inner
</div>
</div>
</div>
<script>
container.addEventListener('click', function(e) {
console.log('conctainer clicked capture');
}, true)
container.addEventListener('click', function(e) {
console.log('conctainer clicked bubble');
})
outer.addEventListener('click', function(e) {
console.log('outer clicked capture')
}, true)
outer.addEventListener('click', function(e) {
e.stopPropagation();
console.log('outer clicked bubble')
})
inner.addEventListener('click', function(e) {
console.log('inner clicked capture')
},true)
inner.addEventListener('click', function(e) {
console.log('inner clicked bubble')
},false)
</script>
当点击inner的时候,输出
事件在冒泡传递到outer的时候被阻止传播，所以container上绑定的事件监听器没有执行
阻止默认行为
一些元素具有默认的行为，如点击<a>标签会跳转，点击<input type="submit">会发送提交表单的请求
。有些时候需要用Event对象的preventDefault()方法组织默认的行为。如表单提交时阻止默认的发送数据行为，用JS验证表单内容后再发送数据。或者验证一个<a>链接不是外链的情况下再跳转
<a href="http://baid.com">baidu</a>
<script>
document.querySelector('a').onclick= function(e){
e.preventDefault()
console.log(this.href)
if(/baidu.com/.test(this.href)){
location.href = this.href
}
}
</script>
<form action="/login">
<input type="text" name="username">
<input type="submit">
</form>
<script>
document.querySelector('form').addEventListener('submit', function(evt){
evt.preventDefault()
if(document.querySelector('input[name=username]').value === 'jirengu'){
this.submit()
}
})
</script>
事件委托
事件处理程序过多会影响页面的性能，解决事件处理程序过多的问题可以用到事件委托技术。以下面的HTML代码为例
<ul class=“myList”>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
按照一般的方法，需要添加3个事件处理程序
var listItems = document.querySelectorAll('.list li')
listItems.forEach(function(item) {
item.onclick = function() {
alert(item.innerText)
}
})
使用事件使用事件委托技术，可以将事件处理程序绑定在DOM树中位置更高的元素上。
var list = document.querySelector('.list')
list.onclick = function(e) {
console.log(this)
console.log(e.target)
if (e.target.classList.contains('item')) {
alert(e.target.innerText)
}
}
控制台中可以看到
this指向的是事件处理程序所绑定的元素，而e.target指向的是事件真正触发的元素
网友评论