javascript 事件对象

页面导航:首页 > 网络编程 > JavaScript > javascript 事件对象

javascript 事件对象

来源: 作者: 时间:2016-01-22 08:40 【

在js中触发一个事件的时候,会产生一个事件对象,也就是函数处理程序中的event,通过event我们可以访问到所有与事件有关的信息,如事件的类型、事件发生对象等等。需要注意的是关

在js中触发一个事件的时候,会产生一个事件对象,也就是函数处理程序中的event,通过event我们可以访问到所有与事件有关的信息,如事件的类型、事件发生对象等等。需要注意的是关于event对象IE 和 非IE在支持方式不同。

DOM中的事件对象

不管是标签内绑定事件,DOM0级还是DOM2级,事件处理程序都会传入一个event。


...
var btn = document.getElementById(button);
btn.onclick = function(event){
    alert(event.type);
};
btn.addEventListener(click, function(event){
    alert(event.type);
});

单击按钮时,会输出事件的类型event.type,也就是click。
event中具有的属性和方法如下:

属性/方法 类型 读/写 说明
bubbles Boolean 只读 事件是否冒泡
cancelable Boolean 只读 是否可以取消事件的默认行为
currentTarget Element 只读 事件处理程序当前正在处理事件的元素
defaultPrevented Boolean 只读 值为true时代表已经调用了preventDefault()(DOM3级事件中新增)
detail Integer 只读 与事件相关的细节信息
eventPhase Integer 只读 调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”,3表示冒泡阶段
preventDefault Function 只读 取消事件的默认行为。当cancelable为true时可以使用这个方法
stopImmediatePropagation Function 只读 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3级事件中新增)
stopPropagation Function 只读 取消事件的进一步捕获或冒泡。当bubbles为true时可以使用这个方法
target Element 只读 事件的目标
trusted Boolean 只读 为true表示生成,为false表示事件是由开发人员通过script创建的(DOM3级事件中新增)
type String 只读 被触发的事件的类型
view AbstractView 只读 与事件关联的抽象视图。等同于发生事件的window对象

target 和 currentTarget

首先注意到event中存在target和currentTarget,前者代表事件的目标,这个目标是事件触发的原始目标,后者代表当前事件进行到的目标(因为事件会捕获或冒泡,所以不一定是事件的原始目标)
当事件处理程序就在目标元素上时,这两者是一样的。

var btn = document.getElementById(button);
btn.onclick = function(event){
    console.log(this === event.target);  //true
    console.log(this === event.currentTarget);  //true
}

但是如果btn在一个div内,现在给btn的父节点添加监听:


var btnWrap= document.getElementById(btnWrap);
btnWrap.onclick = function(event){
    console.log(event.target=== btn);  //true
    console.log(event.currentTarget=== btnWrap);  //true
}

点击按钮时,事件从按钮传到btnWrap,此时在btnWrap的事件处理程序中,事件的原始发生者target是btn,但是当前处理事件的是btnWrap。

cancelable 和 preventDefault()

想阻止特点事件的默认行为可以使用preventDefault方法,比较典型的是a标签的默认行为是打开其href属性指定的url,如果想阻止这个行为,在onclick事件处理程序中调用preventDefault方法即可。

var link = document.getElementById(myLink);
link.onclick = function(event){
    event.preventDefault();
}

需要注意的是只有cancelable为true的事件才能使用preventDefault方法取消默认行为。

stopPropagation()

stopPropagation可以立即停止事件在DOM中的传播,比如在某一个Div中有一些小按钮,根据事件冒泡,单击小按钮时同样会触发div的事件,为了防止这种情况可以使用stopPropagation()。

var btn = document.getElementById(button);
btn.onclick = function(event){
    event.stopPropagation();
}
var btnWrap= document.getElementById(btnWrap);
btnWrap.onclick = function(event){
    console.log(事件到达!);  //不会输出
}

IE中的事件对象

与DOM中的事件对象不同,IE中的event对象具有不同的属性,而且访问的方式不同。
在IE中通过DOM0级事件绑定的事件,event并不是一个局部变量,而是作为window的一个属性存在。

var btn = document.getElementById(button);
btn.onclick = function(event){
    alert(event.type);   //出错!
}
btn.onclick = function(){
    alert(window.event.type);   //输出click
}

但是如果事件是通过attachEvent添加或者是直接绑定的,则和DOM中一样是一个局部变量,可以直接访问。

 
...
var btn = document.getElementById(button);
btn.attachEvent(onclick, function(event){
    alert(event.type);   // 输出'click'
});

与DOM中一样,IE中的event同样具有一些事件相关的属性,如下

属性/方法 类型 读/写 说明
cancelBubble Boolean 读/写 默认值为false,但将其设置成true则可以取消事件冒泡(与DOM中stopPropagation()方法作用相同)
returnValue Boolean 读/写 默认值为true,但将其设置成false则可以取消事件的默认行为(与DOM中preventDefault()方法作用相同)
srcElement Element 只读 事件的目标(与DOM中的target属性相同)
type String 只读 被触发的事件的类型

srcElement

上一篇博客提到,在IE的attachEvent方法类,this并不是指向当前触发事件的元素,而是全局变量window,所以在事件处理程序内部最好还是使用event.srcElement比较保险。

var btn = document.getElementById(button);
btn.onclick = function(){
    alert(window.event.srcElement === this);  //true
}
btn.attachEvent(onclick, function(){
    alert(window.event.srcElement === this);  //false
}

returnValue

returnValue作用和DOM中的preventDefault()方法类似,将其赋值为false可以阻止事件默认行为。

btn.attachEvent(onclick, function(){
    window.event.returnValue = false;
}

cancelBubble

cancelBubble作用和DOM中stopPropagation()方法类似,将其赋值为true可以阻止事件进一步冒泡。

btn.attachEvent(onclick, function(){
    window.event.cancelBubble = true;
}

编写跨浏览器的事件对象

和上篇博客中提到的事件处理程序类似,事件对象同样需要为跨浏览器进行处理,根据DOM和IE的不同实现提供统一的方法。

var EventUtil = {
    //添加事件,见上篇博客
    addHandler: function(element, type, handler){},
    //移除事件,见上篇博客
    removeHandler: function(element, 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;
        }
    }

    //阻止事件捕获或冒泡(在IE中只存在冒泡)
    stopPropagation: function(event){
        if(event.stopPropagation){
            event.propagation();
        }else{
            event.cancelBubble = true;
        }
    }
}

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<