码迷,mamicode.com
首页 > 编程语言 > 详细

javaScirpt学习之事件

时间:2015-07-22 12:54:01      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:

一、事件的添加和删除

不同浏览器,不同DOM级别,添加和删除事件的方法也不同,具体可以参见后面的EventUtil元素。

二、事件对象

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

type:触发的事件类型,如click,keypress等

target:事件的目标

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

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

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

常用方法:

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

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


};

 

javaScirpt学习之事件

标签:

原文地址:http://www.cnblogs.com/bobodeboke/p/4666857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!