DOM-9 【事件处理函数-冒泡捕获-阻止冒泡默认事件】

一、事件处理函数

（1）事件处理函数的定义

通过某一个事件而产生某一种效果，就叫做绑定事件处理函数

元素本身就具备事件，绑定事件不是绑定事件本身，而是绑定事件的处理函数，也叫事件的反馈

事件 + 事件的反馈 = 交互体验（前端核心）

交互是用户通过某一个事件操作而得到了一个什么样的效果反馈

（2）事件绑定的方法

1.句柄绑定

为某一个元素指定了一个事件句柄，某一个句柄等于一个处理函数，就是这个元素的句柄

1. 句柄： 就是事件

2. 事件句柄： 事件发生时要进行的操作

3. 事件源： 事件作用在哪个元素身上，哪个元素就是事件源

优点：兼容性好，兼容所以浏览器

缺点：一个元素只能绑定一个事件处理函数

2. 内联事件监听器（不建议）

3. 事件监听器（IE9一下不支持，W3C规范）

elem.addEventListener(事件类型，事件处理函数，false)

优点：可以绑定多个事件处理函数

缺点：兼容性不好

一个元素绑定了同一个事件只执行一次

4. IE8及以下绑定方法

elem.attachEvent(事件类型，事件处理函数)

（3）事件处理函数的运行环境

（4）添加事件处理函数兼容写法

（5）解除事件处理函数

1. element.onclick = null/false
2. element.removeEvebtListener(‘click’, 函数名, false)
3. element.aetachEvent(‘onclick’, 函数名)

取到函数引用的方法：

（6）面试题

每次循环立即执行函数生成临时的AO，里面存储着i，所有当点击的时候，就会找各自作用域里面的i，所以打印出来的值就不同

二、冒泡捕获

（1）事件冒泡的概念

一层一层向上传递事件的现象就叫做冒泡

只要是嵌套结构，默认的子元素就会向父元素去事件冒泡，只要父级有相同的事件就会被触发

（2）事件捕获的概念

事件监听方法的第三个参数为false就是事件冒泡，为true就是事件捕获

事件捕获与事件冒泡正好相反，它是从父级开始向子元传递事件

事件捕获必须是嵌套关系，自嵌套关系最顶层的父级元素开始捕获事件，直到事件源捕获事件就结束了

（3）总结

1. 先捕获后冒泡
2. 点击子元素一层一层的传递给父元素的现象叫做事件冒泡
3. 点击子元素由父元素一层一层的给子元素传递的现象叫做事件捕获
4. 点击那个元素哪个元素就是事件源
5. 事件源是不存在冒泡或者捕获的，它是正常执行的
6. focus、blur、change、submit、reset、select这些是没有捕获和冒泡事件的
7. IE浏览器是没有事件捕获的，除了Chrome老版本浏览器都没有浏览器，新版的浏览器（火狐、欧朋）是有捕获的，主要和webkit blink内核有关系

三、阻止冒泡默认事件

（1）取消冒泡

1. e.stopPropagation() (W3C)

2. e.cancelBuble = true (IE)

（2） 取消冒泡兼容写法

调用：

（3）事件对象

事件对象存在事件处理函数的参数里面的

IE8的事件对象是存在window里面的

兼容性写法： var e = e = window.event（window可省，但在严格模式下会报错）

（4）取消默认事件

1. 阻止右键菜单弹出

return false

兼容性好，但只有在句柄的事件绑定上使用

W3C：e.preventDefault()（IE9不兼容）

e.returnValue = false

2. 阻止链接跳转

javascript:void(0)

<a href = "javascript:void(0)">百度一下</a>

javascript:;

<a href = "javascript:;">百度一下</a>

“#”

<a href = "#">百度一下</a>

e.preventDefault()

a.onclick = function(e){
	e.preventDefault();
}

（5）案例

1.点击文字打印“我点击了”，点击黄色区域跳转

2.阻止表单提交