js高级程序设计笔记8--事件

最新推荐文章于 2021-05-23 02:43:45 发布

xiaoerjun

最新推荐文章于 2021-05-23 02:43:45 发布

阅读量260

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xiaoerjun/article/details/54885192

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件流

描述的是从页面中接收事件的顺序。IE和Netscape开发团队提出了差不多完全相反的事件流的概念。

事件冒泡(IE)

事件开始时由最具体的元素接收，然后逐级向上播到较为不具体的节点（文档）.

事件捕获（Netscape)

其思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
“DOM2级事件”规范要求事件应该从document对象开始传播，但很多浏览器都是从window对象开始捕获事件的。由于老版本的浏览器不支持，因此很少有人使用事件捕获。

DOM2级事件流

包括3个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先捕获事件，然后是实际的目标接收到事件。最后是冒泡阶段，可以在这个阶段对事件做出响应。

事件处理程序

可以通过函数中的局部变量event访问事件对象。

<input type="button" value="click me" onclick="alert(event.type)"/>

this值等于事件的目标元素。

<input type="button" value="click me" onclick="alert(this.value)"/>

DOM0级事件处理程序：将一个函数赋值给一个事件处理程序属性。

btn.onclick=function(){...}

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

btn.addEventListener("click",function(){alert(this.id);},false);

IE事件处理程序

IE实现了与DOM类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。添加的事件处理程序都会被添加到冒泡阶段。

btn.attachEvent("onclick",function(){...});

注：是onclick而不是DOM的addEventLIstener的click.
在IE中使用attachEvent()与使用DOM0级方法的主要区别在与事件处理程序的作用域。在使用DOM0级方法时，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法时，事件处理程序会在全局作用域中运行，因此this等于window。

btn.attachEvent("onclick",function(){
    alert(this === window)//true
});

跨浏览器的事件处理程序

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;
        }
    },
}

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event.

event.preventDefault():阻止事件的默认行为。
evnet.stopPropagation()；立即阻止事件在DOM层次中的传播。
event.evnetPhase:事件发生的阶段。

IE中的事件对象

访问IE中的event对象有几种不同的方式。在使用DOM0级方法添加处理程序时，event对象作为window对象的一个属性存在。

btn.onclick = function(){
    var event = window.event;
    alert(event.type);
};

如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数传入函数中。

btn.attachEvent("onclick",function(event){alert(event.type);})

IE中的事件具有如下包含如下属性和方法：
cancelBubble:默认值为false,将其设置为true可以取消事件冒泡。（与DOM的stopPropagation()相同）
returnValue:默认值为true,将其设置为false可以取消事件的默认行为。(与DOM的preventDefault相同)
srcElement:事件的目标（与DOM中的targer属性相同）

跨浏览器的事件对象

var EventUtil = {
    ...
    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;
        }
    }
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
}

事件类型

UI事件

load事件。当页面加载后（包括所有图像，js文件，css文件等外部资源），就会触发load事件。
根据“DOM2级事件”规范，应该在document而非window上面触发load事件，但是所有浏览器都在window上实现了该事件，以确保向后兼容。
unload事件。在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会触发unload事件。利用这个事件最多的情况是清楚引用，避免内存泄漏。
resize事件。当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。何时触发resize事件不同浏览器有不同的机制。IE，Safari，chrome,opera会在浏览器窗口变化了1像素时就触发resize事件，而FireFox则会在用户停止调整窗口大小时才会触发。
scroll事件
scroll事件是在window对象上发生的，当它实际上表示的则是页面中相应元素的变化。

鼠标与滚轮事件

click:鼠标单击
dblclick:鼠标双击
mousedown:鼠标按下时触发
mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。此事件不会冒泡。
mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。此事件不会冒泡。
mousemove:当鼠标指针在元素内部移动时重复的触发。
mouseout:在鼠标指针位于一个元素上方，然后用户将其首次移入另一个元素时触发。
mouseover:在鼠标指针位于一个元素外部，然年用户将其首次移入另一个元素边界之内时触发。
mouseup:释放鼠标按钮时触发。

DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值。IE8及之前版本不支持这个属性。在IE8中，mouseover事件触发时，fromElement属性保存相关元素。mouseout事件触发时，toElement属性保存着相关元素。

var EventUtil = {
    ...
    getRelatedTarget:function(event){
        if(event.relatedTarget){
            return event.relatedTarget;
        }else if(event.toElement){
            return event.toElement;
        }else if(event.fromElement){
            return event.fromElement;
        }else{
            return null;
        }
    }
}

键盘与文本事件

keydown:按下键盘
keypress:当用户按下键盘上的字符键时触发。
keyup:释放键盘上的键
1.键码：event对象的keyCode属性会包含一个代码，与键盘上一个特定的键对应。对于数字字母键，keyCode的属性值与ASCII码只能怪对应小写字母或数字的编码相同。
2. 字符编码
按下能够插入或删除字符的键都会触发keypress事件。按下其他键能够触发此事件因浏览器而异。event对象有个charCode事件。这个属性只有在发生keypress事件时才包含。而且这个值是按下的键所代表字符的ASCII编码。IE8及其之前版本和Opera则是在keyCode保存ASCII码。

var EventUtil = {
    getCharCode:function(event){
        if(typeof event.charCode == "number"){
            reutrn event.charCode;
        }else{
            return event.keyCode;
        }
    }
}

DOM3级变化

DOM3级的键盘事件不再包含charCode属性。而是两个新属性key和char.
key的值为一个字符串。为相应键的文本字符。而char的值按下字符键时的行为与key相同。但是按下非字符键时返回null.
IE9支持key属性，但不支持char属性。Sarari5和Chrome支持名为keyIdentifier的属性。在按下非字符键时（例如shift）时与key相同，对于字符键，keyIdentifier返回一个格式“U+0000”的字符串，类似Unicode值。