慕课网课程学习--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级事件处理程序 （简单、跨浏览器优势、用得较多）

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

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

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

bnt1.onclick = null;

3、DOM2级事件处理程序

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

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

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

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

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

2、事件处理程序的函数

<input type="button" value="click" id="bnt">
<script>
   function show () {
      alert('hello');
   }
  
    var bnt1 = document.getElementById("bnt");
    bnt1.attachEvent('onclick', show; //添加事件
    bnt1.detachEvent('onclick', show, false); //删除事件
</script>

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

接收三个参数：

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

2）事件处理程序的函数

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

<input type="button" value="click" id="bnt">
<script>
  function show () {
     alert('hello');
  }
 
   var bnt1 = document.getElementById("bnt");
   bnt1.addEventListener('click', show, false); //添加事件
   bnt1.removeEventListener('click', show, false); //删除事件
</script>

浏览器兼容性处理

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

<script>
var eventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) { //DOM2级事件处理程序
            element.addEventListener(type, handler, false);
        } else if (element.attachEventListener) {
            element.addEventListener("on" + type, handler); //IE事件处理程序
        } else {
            element["on" + type] = handler; //因为type为事件属性，所以可以用中括号
        }
    };

    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) { //DOM2级事件处理程序
            element.removeEventListener(type, handler, false);
        } else if (element.detachEventListener) {
            element.EventListener("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    };
}

function show() {
    alert("hello");
}

var bnt1 = document.getElementById("bnt");
eventUtil.addHandler(bnt1, "click", show);

</script>

<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、解决兼容性问题：

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

 

 

---