0

0

js中event事件对象是什么?js中event事件对象的介绍

不言

不言

发布时间:2018-08-22 17:50:52

|

5415人浏览过

|

来源于php中文网

原创

本篇文章给大家带来的内容是关于js中event事件对象是什么?js中event事件对象的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

什么是事件对象?

在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。
包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。

比如:
鼠标操作导致的事件对象中,会包含鼠标位置的信息。
键盘操作导致的事件对象中,会包含按下的键有关的信息。
下面我们点击document看看event包含哪些东西。

4127927785-5b7cfedb04f3e_articlex.png

event对象的兼容写法

event事件对象不能兼容所有的浏览器,我们一般是采用下面这种方式进行兼容。

var oEvent=ev || event;

如果参数不是ev而是event的时候,兼容方式也可以写成下面这种格式。

document.onclick=function(event){
  var oEvent=event || window.event;
  console.log(oEvent);
}

测试代码如下:



  
    event兼容测试
    
  
  
  

event常用属性有哪些

  • oEvent.type;——获取绑定的事件类型,比如click,mouseover等

  • oEvent.target;(在ie低版本中用event.srcElement)——返回触发事件的元素。比如[object HTMLInputElement]指的是html里的input元素

    Mulan AI
    Mulan AI

    画布式AI视频创作平台,轻松制作爆款视频

    下载
  • oEvent.currentTarget;(ie低版本中不存在)表示当前所绑定事件的元素,跟target的区别看下面



  
    event.target和event.currentTarget的区别
    
  
  
    
  

2192296111-5b7d023fae3ee_articlex.png

  • oEvent.stopPropagation()[ˌprɒpə'ɡeɪʃn];(在ie中用oEvent.cancelBubble=false)//用于阻止事件冒泡

  • oEvent.stopImmediatePropagation();//Immediate[ɪˈmi:diət] //当一个元素绑定多个事件处理程序的时候,事件会按照顺序全部执行,如果不想让后面的事件处理程序执行,就在当前事件里加这个方法,就不执行后面的事件处理程序了。

  • oEvent.preventDefault();(在ie低版本中用oEvent.returnValue=true)//阻止事件的默认行为,比如阻止a的href链接。



  
    仿select下拉框、阻止默认动作、阻止默认行为
    
    
  
  
    
    

a链接
  • oEvent.clientX;鼠标的横坐标。

  • oEvent.clientY;鼠标的纵坐标。

相关推荐:

event对象及各种事件总结

JavaScript dom事件对象和IE事件对象实例详解

js获取事件源及触发该事件的对象_javascript技巧


相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

237

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

393

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

17

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

103

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

81

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

70

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号