当前位置:首页 > 在线留言 >

javascript 事件对象

编辑:北京聚贤贵都宾馆有限公司时间:2017-09-05 12:05:07阅读次数:2
javascript 事件对象

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

DOM中的事件对象

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

按钮1 ... 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表示事件是由开发人员通过Javascript创建的(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中一样是一个局部变量,可以直接访问。

按钮1 ... 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; } 编写跨浏览器的事件对象

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:潜江SEO http://qianjiang.raoyu.net

上一篇:Smarty保留变量用法分析 下一篇:最后一页

相关阅读