JavaScript常见事件对象与操作实例总结

　　

本文实例讲述了JavaScript常见事件对象与操作。分享给大家供大家参考,具体如下:

　　

触发DOM上的事件时,会生成一个事件对象,它包含着所有与事件有关的信息,诸如导致事件的元素,事件的类型以及其他与特定事件相关的信息。所有的浏览器都支持事件对象,但支持的方式不同。

　　

　　

兼容DOM的浏览器会将事件对象传入事件处理程序(DOM0)级与用于级都支持):

　　 　　 　　var btn=. getelementbyid (“myBtn”); 　　btn。onclick=函数(事件){ 　　console.log (event.type);//暗慊鳌? 　　}; 　　btn.addEventListener(“点击”,函数(事件){ 　　console.log (event.type);//暗慊鳌? 　　假}; 　　 　　之前 　　 　　

<代码>事件。类型保存的是被触发的事件类型。

　　

通过HTML属性指定事件处理程序时,事件中保存的是事件对象:

　　 　　 　　& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/Click我”/比; 　　 　　之前 　　 　　

事件对象包含着创建它的特定事件相关的属性和方法,所以可能每个特定事件都有自己所特有的属性和方法,不过所有事件都会有这些属性和方法:

　　

　　 　　 　　 　　属性/方法 　　类型 　　读/写 　　说明 　　 　　 　　泡沫 　　布尔 　　只读 　　事件是否冒泡。 　　 　　 　　可取消的 　　布尔 　　只读 　　是否可以取消事件的默认行为。 　　 　　 　　currentTarget 　　元素 　　只读 　　与当前事件处理程序相关的元素。 　　 　　 　　defaultPrevented 　　布尔 　　只读 　　真实的表示已调用preventDefault()方法(DOM3新增)。 　　 　　 　　细节 　　整数 　　只读 　　与事件相关的细节信息。 　　 　　 　　eventPhase 　　整数 　　只读 　　调用事件处理程序的阶段,1:捕获;2:处于目标;3:冒泡。 　　 　　 　　preventDefault () 　　函数 　　只读 　　取消事件的默认行为(如果可取消为真,就可以调用这个方法)。 　　 　　 　　stopImmediatePropagation () 　　函数 　　只读 　　阻止事件被进一步捕获或者冒泡,同时阻止任何事件处理程序被调用(DOM3新增)。 　　 　　 　　stopPropagation () 　　函数 　　只读 　　阻止事件被进一步捕获或者冒泡(如果泡沫为真,就可以调用这个方法)。 　　 　　 　　目标 　　元素 　　只读 　　事件的目标。 　　 　　 　　受信任的 　　布尔 　　只读 　　事实:事件是由浏览器生成的;错误的:事件是通过JavaScript创建的(DOM3新增)。 　　 　　 　　类型 　　字符串 　　只读 　　被触发的事件类型。 　　 　　 　　视图 　　AbstractView 　　只读 　　与事件相关的抽象视图、相当于发生事件的窗口对象。 　　 　　 　　 　　

　　

在事件处理程序内部,这始终等于currentTarget,而目标等于事件的实际目标。如果直接将事件处理程序指定给目标元素,那么这三个值相等:

　　 　　 　　& lt;脚本type=" text/javascript祝辞 　　var btn=. getelementbyid (“myBtn”); 　　btn。onclick=函数(事件){ 　　console.log(事件。currentTarget===);//真实的 　　console.log(事件。目标===);//真实的 　　} 　　& lt;/script> 　　 　　

如果事件处理程序指定到按钮的父节点上,那么它们是不同的:

　　 　　 　　& lt;脚本type=" text/javascript祝辞 　　document.body。onclick=函数(事件){ 　　console.log(事件。currentTarget===document.body);//真实的 　　控制台。日志(这===document.body);//真实的 　　console.log(事件。目标===. getelementbyid (“myBtn”));//真实的 　　} 　　& lt;/script> 　　 　　之前 　　 　　

如果需要通过一个函数来处理多个事件,那么可以使用类型属性:

　　 　　 　　& lt;脚本type=" text/javascript祝辞 　　var btn=. getelementbyid (“myBtn”); 　　var处理程序=函数(事件){ 　　开关(event.type) { 　　例“点击”: 　　console.log(“点击”); 　　打破; 　　例“鼠标悬停”: 　　event.target.style。写成backgroundColor=昂焐? 　　打破; 　　例“mouseout”: 　　event.target.style。写成backgroundColor=" "; 　　打破; 　　} 　　}; 　　btn。onclick=处理程序; 　　btn。鼠标移到目标上=处理程序; 　　btn。onmouseout=处理程序; 　　& lt;/script> 　　 　　之前 　　 　　

JavaScript常见事件对象与操作实例总结