javaScirpt学习之事件

一、事件对象

在事件处理程序中，浏览器会为之传入一个event对象，该对象的常用属性和方法如下：

type：触发的事件类型，如click，keypress等

target：事件的目标

currentTarget:事件处理程序当前正在处理事件的那个元素

在事件处理程序内部，this始终等于curentTarget的值，如果事件处理程序直接赋给了目标元素，那么这三个值是相等的。但是，如果事件处理程序是注册到父节点上，那么this和currentTarge则等于父节点，而target则等于实际发生事件的子节点元素。

eventPhase:事件发生到哪个阶段：0事件捕获阶段，1事件处于目标对象上，2冒泡阶段。

常用方法：

preventDefault()取消事件的默认行为

stopImmediatePropagation()取消事件的进一步捕获或者冒泡。

stopPropagation()取消事件冒泡

不同浏览器对上述对象和方法的调用也存在一定差异，因此，下列代码实现了一个跨浏览器的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;
        }
    },
    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;
        }
    },
    getEvent:function(event){
        return event?event:window.event;
    },
    getTarget:function(event){
        return event.target?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;
        }
    }


};

三、常见的事件类型（这里只备注常用的）

1.UI事件

UI事件值那些不一定和用户操作有关的事件。包括

1）load 在页面完全加载，包括图像（延迟图像实现的依据），js文件，框架，css等资源都加载完毕后才会触发，

2）unload 在页面完全卸载时在window上触发，在所有框架都卸载后在框架上触发，或者迁入内容卸载完毕后在object上触发。

3）resize 窗口大小变化时在window上触发

4）scroll 当用户滚动带有滚动条的元素中内容在，在该元素上触发。

5）error 当发生javascript错误时，在window上触发；当无法加载图像时在img上触发；

注意上述事件，有些不仅仅是在window上出发，如load在<img>上，scroll在其他元素上也能够出发

备注：很多js库，如jquey，其$(function())与load的区别有两点，1）window.onload只能赋值一次，这是DOM0的限制，运用上面的eventUtil也可以对一个事件增添多个事件处理程序。2）window的load是在所有资源全部加载才触发，而库中的全局函数则是在dom资源可用就能够触发，如果想实现同样的效果，可以利用document的"DOMContentLoaded"事件。

error：在js发生错误时出发

 

EventUtil.addHandler(window,"load",function(event){
    alert("window is ready");
});

 

2,焦点事件

focus：在元素获得焦点时候触发，不冒泡，所有浏览器都支持

blur：在元素失去焦点时候触发，不冒泡，所有浏览器支持

focusin：元素获得焦点的时候触发，冒泡

focusout:元素失去焦点时候触发，冒泡

 

3.鼠标与滚轮事件（也是最常用的一类事件）

click：用户单击鼠标左键时触发，按下回车键也能触发

dbclick：用户双击左键时触发

mousedown：用户按下了任意鼠标按钮手触发，不能通过按键触发这个事件

mouseup ：用户释放鼠标按键时触发，不能通过按键触发这个事件

mouseenter：用户从元素外进入元素内时触发，这个事件不冒泡，并且在光标移动到后代元素的时候不会触发

mouseleave ：用户从元素上方移动到元素外的时候触发，事件不冒泡，并且在光标移动到后代元素的时候不会触发

mouseout： 鼠标从元素内进入元素外时触发，事件冒泡，鼠标移动到子元素时候也会触发

mouseover 鼠标从元素外进入元素内时触发，事件冒泡，鼠标移动到子元素时候也会触发

mousemove 在元素内部移动时重复触发

mousewheel 鼠标滚轮事件，该事件可以在任何元素上触发，最终会冒泡到document或者window

只有在同一个元素上相继触发mousedown和mouseup，才会触发一次click，只有触发了两次click，才会触发一次dbclick；

对于鼠标事件，event对象会包含下列属性：

event.clientX与event.clinetY：鼠标相对于视口的坐标；

event.pageX与event.pageY:鼠标相对于页面的坐标；

event.screenX与event.screenY:鼠标相对于屏幕的坐标：

event.relateTarget:其中，mosueover和mouseout事件中，event的relateTarget的值不再为空，对于mouseover来说，代表与之相关的失去焦点的元素；mouseout则与之相反

event.shiftKey/event.ctrlKey/event.altKey/event.meatKey:代表是否在点击鼠标的同时按下了对应的键盘键

event.button:对于mousedown和mouseup事件来说，因此点击任何鼠标按键都会触发，此时event.button 取值如果为0代表按下了左键，如果为1代表中间键（滚轮），为2代表右键。

 

 

4，键盘与文本事件（在文本框上输入文本时最常用到）

keydown:按钮键盘任意键时候出出发，如果按住不放，就重复触发

keypress:按下键盘上的字符键才触发，按住不放，重复触发

keyup:释放键盘时候，触发

textInput事件：DOM3级引入了一个新事件textInput,这个事件与keypress的不同之处在于：1）keypress可以在任何获得焦点的元素上触发，textInput仅在可编辑区域触发；2）textInput只有在用户输入实际字符按键时候才会触发，而keypress在按下影响文本显示的按键（如退格）时候也会触发

如果按下了字符键，那么触发顺序是：keydown——>keypress——>keyup；keydown和keypress是在文本变化之前触发的，keyup则是在文本变化之后触发的。

对于这些事件，event对象会包含以下属性：

在发生keydown和keyup事件时候，event对象的keyCode会包含一个代码，是对应的ASCII,如数字A是65等。

在发生keypress时候，event的charCode属性也包含一个值，代表所表示字符的ASCII编码，此时的keyCode通常为0或者等于该键的键码。

常见按键的键码有：

回车：13

退格：8

制表tab:9

如果用跨浏览器的方法取得键码：

 

var code=event.charCode||event.keyCode;

 

 

三、事件模拟

事件模拟：dispatchEvent()或者IE8之前的fireEvent()，但是感觉貌似要么使用原生的事件模拟快捷方法：如submit(),focus()等，或者如jquery那般重构事件对象，很少有这样触发事件模拟的。