JavaScript高程学习笔记之事件(13)

目录

• JavaScript高程学习笔记之事件(13)

JavaScript高程学习笔记之事件(13)

@(JavaScript)[学习笔记]

---

---

1. 事件流

事件流描述从页面中接收事件的顺序

1.1 事件冒泡

IE的事件流叫做事件冒泡，即事件开始时有最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点

1.2 事件捕获

Netscape团队提出另一种事件流事件捕获，不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件

1.3 DOM事件流

“DOM2级事件”规定的事件流包含3个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段

2. 事件处理程序

响应某个事件的函数叫做事件处理程序。名字以on开头，onclick，onload

2.1 HTML事件处理程序

某个元素支持的每种事件，都可以使用与相应事件处理程序同名的HTML特性来指定。特性的值是应该能够执行的JavaScript代码
指定事件处理程序。函数中会有一个局部变量event

2.2 DOM0级事件处理程序

将一个函数赋值给事件处理程序属性，在事件处理程序可以用this访问元素的任何属性和方法。

2.3 DOM2级事件处理程序

DOM2级事件处理程序定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()
接收3个参数：要处理的事件名、作为事件处理程序的函数和函数的一个布尔值。
true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。

2.4 IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。接收两个参数：事件处理程序名称和事件处理程序函数。都会添加冒泡阶段
attachEvent()第一个参数是"onclick"，而不是DOM中的"click"
IE中使用上述方法与DOM0级事件的主要区别在于作用域，上述方法事件处理程序会在全局作用域中运行，因此this=window。
可以为同一按钮添加添加多个事件处理程序，执行顺序是倒序，而非正序

2.5 跨浏览器的事件处理程序

恰当使用能力检测。保证处理事件的代码能在大多数浏览器中运行，只需关注冒泡阶段
addHandler()方法和removeHandler()方法，添加和移出事件处理函数

var EventUtil = {

    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
        removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    }

3. 事件对象

触发DOM上的某个事件，会产生一个事件对象event，这个对象包含所有与事件有关的信息。

3.1 DOM事件对象

兼容DOM的浏览器会将一个event对象传入事件处理程序
在事件处理程序内部，对象this始终等于currentTarget的值，而target只包含事件的实际目标。如果将事件处理程序指定给目标元素，则三个值相等

        var btn = document.getElementById("myBtn");
        btn.onclick = function(event){
            alert(event.currentTarget === this);
            alert(event.target === this);
        };

用type属性处理多个程序
阻止特定事件的默认行为preventDefault()方法
停止事件在DOM层次中的传播stopPropagation()方法
eventPhase属性，确定事件位于事件处理程序的阶段

3.2 IE中事件对象

有几种不同的方式访问IE中的event对象
DOM0级：event对象作为window对象的一个属性
attachEvent()添加：event对象作为参数传入函数
HTML特性：通过名叫event的变量访问

3.3 跨浏览器的事件对象

对EventUtil对象加以增强

var EventUtil = {

    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function(event){
        return event ? event : window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

4. 事件类型

“DOM3级事件”规定了几类事件

• UI事件
• 焦点事件
• 鼠标事件
• 滚轮事件
• 文本事件
• 键盘事件
• 合成事件
• 变动事件

• 变动名称事件

  4.1 UI事件

1. load事件
   页面完全加载时就会触发load事件
   两中方法定义onload事件，
   第一种：使用跨浏览器对象EventUtil
   第二种：为body元素添加onload特性
2. unload事件
   文档完全卸载后触发。用户从一个页面切换另一个页面，发生unload事件。利用这个事件最多的情况是清除引用，避免内存泄漏
   两个方法
   第一种：使用跨浏览器对象EventUtil
   第二种：：为body元素添加unload特性
3. resize事件
   当浏览器窗口被调整到新的高度或宽度，就会触发resize事件。
   通过JavaScript或者body元素onresize特性处理

4. scroll事件
   文档滚动期间被触发，输出页面的垂直滚动位置

   4.2 焦点事件

   会在页面元素获得或失去焦点时触发。利用这些事件与document.hasFocu()方法和document.activeElement属性配合，知晓页面行踪
   6个焦点事件：blur, DOMFocusIn, DOMFocusOut, focus, focusin, focusout

   4.3 鼠标与滚轮事件

   DOM3定义了9个鼠标事件：
   click，dblclick，mousedown，mouseenter，mouseleave，mousemove，mouseout，mouseover，mouseup

   4.4 键盘与文本事件

   对键盘事件的支持主要遵循DOM0级。
   “DOM3级事件”仍然有许多遗留问题，有3个键盘事件
   keydown，keypress，keyup

   4.5 复合事件

   处理IME的输入序列

   4.6 变动事件

   DOM2级的变动事件能在DOM中的某一部分发生变化时给出提示

   4.7 HTML5事件

   contextmenu事件
   beforeunload事件
   DOMContentLoaded事件
   readystatechage事件
   pageshow和pagehide事件
   haschage事件

   4.8 设备事件

   orientationchage事件
   MozeOrientation事件
   deviceorientation事件
   devicemotion事件