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

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

@(JavaScript)[学习笔记]

---

[TOC]

---

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事件