javaScript中的事件对象event是怎样

事件对象event，每当一个事件被触发的时候，就会随之产恒一个事件对象event，该对象中主要包含了关于该事件的基本属性，事件类型type（click、dbclick等值）、目标元素target（我的理解是事件源对象，即触发该事件的dom元素）等，以及一些与该事件相关的方法，取消事件默认行为preventDefault()、组织事件继续冒泡或捕获stopPropagation()等等，这里我只列举了，项目中我用到的属性和方法。

既然事件被触发，就随之产生了一个event对象，笔者在IE中测试了，不需要通过赋值即可使用，或许低版本的需要吧，火狐浏览器是需要对其进行赋值的，在这里我觉得需要养成一个习惯，多谢一行代码呗，每次在事件处理程序中使用event对象，都通过赋值的方式去使用：

var event = event||window.event;

其实，默认参数数组中第一元素就是event对象，也就是说，可以用数组元素赋值

var event = arguments[0];

type属性，应该是最容易理解的，事件类型，单击click，双击dbclick等等

target属性，触发事件的dom元素对象，我看到网上说target是火狐浏览器，srcElement是IE中的，但是我测试的结果是，在IE11中两个都可以使用了，一样的效果，但是火狐中只能使用target属性，浏览器之间的实现方式能不能有个通用的标准呢，兼容性很纠结呢，所以和event对象的获取一样，建议是通过赋值的方式去获取触发事件的dom对象：

var target = event.target||event.srcElement;

preventDefault()方法是用来取消默认事件行为的，比如超链接，点击超链接，会根据href属性，跳到另一个页面，之前在项目中，就遇到很多需要取消超链接的默认点击行为，在点击事件处理程序中，取消默认的事件行为，可以如下操作：

if(event.preventDefault){//判断该函数是否存在 event.preventDefault; }else{ returnValue = false; }

这样也实现了取消超链接的默认行为，其实在项目中，还看到别的同事使用的别的方式，也取消是默认的点击行为

也行

stopPropagation()方法直接就取消事件的继续冒泡或者捕获了，这个很实用的，如果父元素和子元素都绑定了某个相同类型的事件，比如都绑定了click事件，现在用户触发了一个事件，事件在捕获阶段被触发，针对父元素，则会继续向下捕获，进而触发子元素的事件，针对子元素，在冒泡阶段被触发，也同样因为冒泡行为，会触发父元素的事件，因此往往需要取消这种无意的触发，

if(event.stopPropagation){//判断是否存在 event.stopPropagation(); }else{ event.cancleBubble = true; }

转载于:https://www.cnblogs.com/2881064178dinfeng/p/7099806.html

javaScript中的事件对象event是怎样相关推荐

Javascript中的事件对象和事件源
什么是事件对象之前说事件委托(事件代理)的时候,也提过事件对象和事件源,今天在这里简单总结一下. 当触发某个事件的时候,会产生一个事件对象event,这个对象里面包含与事件相关的所有信息. 事件对象 ...
js中的事件对象event （获取元素的,x,y坐标）
event的使用获取元素的,x,y坐标如图所示当鼠标放在上面那个框上时获取其坐标,并且在下面框中显示其实需要使用到鼠标移动事件 onmousemove event 事件对象中封装了当前事项相关 ...
php event loop,理解javascript中的事件循环(Event Loop)
背景在研究js的异步的实现方式的时候,发现了JavaScript 中的 macrotask 和 microtask 的概念.在查阅了一番资料之后,对其中的执行机制有所了解,下面整理出来,希望可以帮助 ...
JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式我们在上一篇文章 DOM操作详解中已经讲过事件的概 ...
java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式方式1:直接在html元素上注册<body onLoad="ready()"></body > ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
js中获取事件对象的方法小结
代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在htm ...
浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...

javaScript中的事件对象event是怎样

javaScript中的事件对象event是怎样相关推荐

最新文章

热门文章