JS事件--事件对象之DOM中的事件对象
来源:互联网 发布:百度云盘mac历史版本 编辑:程序博客网 时间:2024/06/05 17:43
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。所有浏览器都支持event对象,但支持方式不同。
兼容DOMr浏览器会将一event对象传入到事件处理程序中。无论指定的事件处理程序时使用什么方式(DOM0级和DOM2级),都会传入event对象,来看下面的例子
var btn = document.getElementById('myBtn');btn.onclick = function(evnet) { alert(event.type);// click}btn.addEVentListener('click', function(evnet){ alert(event.type);//click}, false);
这个例子中的两个事件处理程序都会弹出一个警告框,显示由event.type属性表示的事件类型。这个属性始终都会包含被触发的事件类型,例如:click.
在通过HTML特性指定事件处理程序时,变量event中保存着event对象。请看下面例子。
<input type="button" value="Click Me" onclick="alert(event.type)"/>
以这种方式提供event对象,可以让HTML特性事件处理程序与JavasScript函数执行相同的操作。
event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可以用的属性和方法也不一样。不过,所有事件都会有下表列出的成员。
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this,currentTarget和target包含相同的值。来看下面的例子。
var btn = document.getElementById('myBtn');btn.onclick = function(evnet) { alert(event.currentTarget === this);//true alert(event.target === this); //true}
这个例子检测了currentTarget和target与this的值。由于 click事件的目标是按钮,因此这三个值是相等的。如果事件处理程序在于按钮的父点中(例如document.body),那么这些值是不相同的。再看下面的例子。
var btn = document.getElementById('myBtn');document.body.onclick = function(evnet) { alert(event.currentTarget === document.body);//true alert(this === document.body); //true alert(event.target === document.getElementById('myBtn'));// true}
当单击这个例子中的按钮时,this和currentTarget都等于document.body,因为事件处理程序是注册到这个元素上的,然而,target元素却等于 按钮元素,因为它是click事件真正的目标。由于 按钮上并没有注册事件处理程序,结果click事件就是早泄到了document.body,在那里事件才得到了处理。
在需要通过一个函数处理多个事件时,可以使用type属性,例如:
var btn = document.getElementById('myBtn');var handler = function(event) { switch(event.type) { case: 'click': alert('Clicked'); break; case: 'mouseouver': alert('mouseouver'); break; case: 'mouseout': alert('mouseout'); break; }};btn.onclick = handler;btn.onmouseover = handler;btn.onmouseout = handler;
这个例子定义了一个名为handler的函数,用于处理3种事件:click mouseover 和mouseout.当单击按钮时,会出现一个与前面例子中一样的警告框。当按钮移动到按钮上面时,背景颜色应该会变成红色,而当鼠标移动出按钮的范围时,背景颜色应该会恢复为默认值。这里通过检测event.type属性,让函数能够确定发生了什么事件,并执行相应的操作。
要阻止特定的事件的默认行为,可以使用preventDefault()方法。例如,链接的默认行为就是在被单击时会导航到期href特性指定的URL。如果你想阻止链接导航这一默认行为,那么通过链接的onclick事件处理程序可以取消它,如下面的例子所示。
var link = document.getElementById('myLink');link.onclick = function(evnet) { event.preventDefault();}
只有cancelable属性设置为true的事件,才可以使用prenvetDefault()来取消其默认行为。
另外,stopPropagation()方法用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加到一个按钮的事件处理程序可以调用stopPropagation(),从而书名触发注册在document.body上面的事件处理程序,如下面的例子所示:
var btn = document.getElementById('myBtn');btn.onclick = function(evnet) { alert('Clicked'); event.stopPropagation();}document.body.onclick = function(evnet) { alert('Body clicked');}
对于这个例子而言,如果不调用stopPropagation(),就会在单击按钮时出现两个警告框。可是,由于click事件根本 不会传播到 document.body,因此就不会触发注册在这个元素上的onclick事件处理程序。
事件对象的eventPhase属性,可以用来确定事件当前正们于事件流的那个阶段。如果是在捕获阶段调用的事件处理程序,那么eventPhase等于 1;如果事件处理程序处于目标对象上,则eventPhase等于2; 如果是在冒泡阶段调用的事件处理程序,evevntPhase等于3,这里要注意的是,尽管处于目标发生在冒泡阶段,但eventPhase仍然一直等于 2.来看下面的例子。
var btn = document.getElementById('myBtn');btn.onclick = function(evnet) { alert(event.eventPhase);//2}document.body.addEventListener('click', function(event){ alert(event.eventPhase)///1}, true);document.body.onclick = function(evnet) { alert(event.eventPhase);//3}
当单击这个例子中的按钮时,首先执行的事件处理程序是在捕获阶段触发的添加到document.body中的那一个,结果会弹出一个警告框显示表示eventPhase的1.接着,会触发 在按钮上注册 的事件处理程序,此时 的eventPhasse值为2,最后一个被触发的事件处理程序,是在冒泡阶段执行的添加到document.body的那一个,显示eventPhase的值为3.页当eventPhase等于 2时,this、target和currentTarget始终都是相等的。
只有在事件处理程序执行期间,event对象才会存在;一旦事件处理程序执行完成,event对象就会被销毁。
- JS事件--事件对象之DOM中的事件对象
- DOM事件对象【JS】
- JS中的事件对象
- js--事件--事件对象
- js--事件--事件对象
- js中的事件对象和添加事件
- DOM操作-事件对象
- HTML DOM 事件对象
- DOM事件对象(addEventListener())
- HTML DOM事件对象
- JS中的DOM事件
- Js中的DOM事件
- 深入理解DOM中的事件对象
- JS事件之事件对象和事件源
- DOM学习之事件处理和事件对象
- DOM事件(JS事件)
- JavaScript高级程序设计学习笔记--事件(二)(事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象)
- DOM的事件对象event
- 加密解密(三)--Java中的非对称加密算法
- 数学科普
- Windows下安装XGBoost(python基于Anaconda2)
- linux常用命令
- Java SE 03 面向对象-上
- JS事件--事件对象之DOM中的事件对象
- windows在python安装使用xgboost走了些弯路
- 浏览器兼容性问题
- Windows的全新设计语言Project Neon
- 中国计算机学会推荐国际学术会议
- 面试题之--大数据
- Hibernate之query
- C语言字符数组和字符串
- 【插头DP】floor 题解