慕课网课程学习--JS事件探秘

事件流

事件冒泡（IE）：事件最先被最具体的元素（文档中嵌套层次最深的节点）接受，然后逐级向上传播至最不具体的节点（.. -> body ->html -> document）；

事件捕获（网景）：不具体的节点更早接收到事件，最具体的节点最后接收到事件，和事件冒泡相反。

1、HTML事件处理程序

原理：把事件直接在HTML结构中的HTML元素上。

方法一、

<input type="button" value="click" onclick="alert(‘hello‘)">

方法二、

<input type="button" value="click" onclick="show()">
<script>
  function show() {
    alert(‘hello‘);
  }
</script>

缺点：HTML和JS代码紧密耦合在一起。

2、DOM0级事件处理程序 （简单、跨浏览器优势、用得较多）

原理：把一个函数赋值给一个事件的处理程序属性。

1 <input type="button" value="click" id="bnt">
2 <script>
3   var bnt1 = document.getElementById(‘bnt‘); //获得bnt按钮对象
4   btn1.onclick = function() {     //onclick事件是bnt按钮对象的属性
5        alert(‘hello‘);
6   }
7 </script>

如果想取消这个事件(删除bnt1的onclick属性)：

bnt1.onclick = null;

3、DOM2级事件处理程序

原理：通过定义两个方法实现， 1)指定事件处理程序 2)删除事件处理程序。

所有的DOM节点均包含这两个方法.

对于IE,Opera： attachEvent();  detachEvent();

接收两个参数(因为是IE，事件流为：事件冒泡，所以没有第三个参数--IE8及更早版本的浏览器只支持事件冒泡)：

1、要处理的事件名(如‘onclick‘，需要加‘on‘)

2、事件处理程序的函数

 1 <input type="button" value="click" id="bnt">
 2 <script>
 3    function show () {
 4       alert(‘hello‘);
 5    }
 6
 7     var bnt1 = document.getElementById("bnt");
 8     bnt1.attachEvent(‘onclick‘, show; //添加事件
 9     bnt1.detachEvent(‘onclick‘, show, false); //删除事件
10 </script>

其他浏览器： addEventListener();  removeEventListener();

接收三个参数：

1）要处理的事件名(如click，注意没有‘on‘)

2）事件处理程序的函数

3）布尔值（true-捕获阶段调用，false-冒泡阶段调用）

 1 <input type="button" value="click" id="bnt">
 2 <script>
 3   function show () {
 4      alert(‘hello‘);
 5   }
 6
 7    var bnt1 = document.getElementById("bnt");
 8    bnt1.addEventListener(‘click‘, show, false); //添加事件
 9    bnt1.removeEventListener(‘click‘, show, false); //删除事件
10 </script>

浏览器兼容性处理

方法：判断浏览器具有那种事件处理的能力。

 1 <script>
 2 var eventUtil = {
 3     addHandler: function(element, type, handler) {
 4         if (element.addEventListener) { //DOM2级事件处理程序
 5             element.addEventListener(type, handler, false);
 6         } else if (element.attachEventListener) {
 7             element.addEventListener("on" + type, handler); //IE事件处理程序
 8         } else {
 9             element["on" + type] = handler; //因为type为事件属性，所以可以用中括号
10         }
11     };
12
13     removeHandler: function(element, type, handler) {
14         if (element.removeEventListener) { //DOM2级事件处理程序
15             element.removeEventListener(type, handler, false);
16         } else if (element.detachEventListener) {
17             element.EventListener("on" + type, handler);
18         } else {
19             element["on" + type] = null;
20         }
21     };
22 }
23
24 function show() {
25     alert("hello");
26 }
27
28 var bnt1 = document.getElementById("bnt");
29 eventUtil.addHandler(bnt1, "click", show);
30
31 </script>
32
33 <input type="button" value="click" id="bnt">

非IE浏览器，可以直接使用event，IE8之前的IE浏览器必须使用window.event。

1、DOM中的事件对象：

在触发DOM上的事件都会产生一个事件对象-Event。Event常用属性、方法：

1. type ：事件类型
2. Target ：事件目标
3. stopPropagation() ： 阻止事件冒泡
4. preventDefault() : 阻止事件默认行为

2、IE中的事件对象：

Event常用属性、方法：

1. type ：事件类型
2. srcElement ：事件目标
3. cancelBubble ： 阻止事件冒泡(true阻止)
4. returnValue : 阻止事件默认行为(false阻止)

 3、解决兼容性问题：

1 var event = event || window.event;
2 if(event.stopPropagation) {  //事件方法在判断时也不需要加()
3   event.stopPropagation();
4 }else {
5   event.cancelBubble = true;
6 }
7