javascript event 对象（事件对象）

zilu 发布于2019-08-26 12:18 / 3393人阅读

摘要：什么是事件对象在触发上的某个事件时，会产生一个事件对象。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。键盘操作导致的事件对象中，会包含按下的键有关的信息。取消默认行为，取消右键菜单阻止默认事件环境菜单，上下文菜单

什么是事件对象？

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

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

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元素

oEvent.currentTarget;（ie低版本中不存在）表示当前所绑定事件的元素，跟target的区别看下面



  
    event.target和event.currentTarget的区别

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

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

oEvent.preventDefault();（在ie低版本中用oEvent.returnValue=true）//阻止事件的默认行为，比如阻止a的href链接。在智能设讲用return false。



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

oEvent.clientX;鼠标的横坐标。

oEvent.clientY;鼠标的纵坐标。

阻止默认事件

普通事件是没有返回值的，在事件中我们可以通过return false来阻止默认事件。下面我们在右键菜单中通过return false阻止弹出右键菜单。
我们在某个动作里用return false告诉浏览器，不用你帮忙了，我们自己处理。比如下面的代码我们在oncontextmenu右键菜单事件里return false告诉浏览器，我不需要默认的菜单了，如果我们需要一个自定义菜单，我们可以return false默认菜单然后自己定义自己的菜单。



  
    return false取消默认行为，取消右键菜单
    
  
  
    oncontextmenu环境菜单，上下文菜单

GPU云服务器云服务器火狐获取event对象事件对象 IE事件对象 js事件对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108453.html

聊聊DOM中很重要的一个知识点：事件

摘要：事件事件就是浏览器告知程序，用户的行为，用户点击了页面中的某个按钮或者用户输入用户名或密码等操作可以称为事件事件的类型事件根据使用的场景不同，可以分为如下几种依赖于设备的输入事件键盘事件和鼠标事件，这些事件都是直接和设备相关的独立于设备的输事件事件就是浏览器告知JavaScript程序，用户的行为，用户点击了HTML页面中的某个按钮或者用户输入用户名或密码等操作可以称为事件事件的...

church 2019-08-23 11:42 评论0 收藏0
《JavaScript 闯关记》之事件

摘要：事件捕获团队提出的另一种事件流叫做事件捕获。所有节点中都包含这两个方法，并且它们都接受个参数要处理的事件名作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。 JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，Web 浏览器...

ConardLi 2019-08-22 10:44 评论0 收藏0
JavaScript 笔记 —— 标准事件对象与 IE 事件对象

摘要：另外，标准事件对象还有一个属性，该属性在事件处理函数当中始终与相等，而属性则是指向事件触发的具体目标。取消事件默认行为有如下的标准事件对象使用的方法取消事件默认行为。而在标准事件绑定当中，的值等于被绑定的元素。标准的事件绑定函数是 addEventListener 函数，而 IE 浏览器（IE9 以下）则是用 attachEvent。这两个函数中的事件处理函数都可以传入一个 eve...

animabear 2019-08-21 10:24 评论0 收藏0
<<编写可维护的javascript>> 笔记7(事件处理)

摘要：在所有应用中事件处理都是非常重要的所有的均通过事件绑定到上所以大多数前端工程师需要花费很多时间来编写和修改事件处理程序遗憾的是在诞生之初这部分内容并未受太多重视甚至当开发者们开始热衷于将传统的软件架构概念融入到里时事件绑定仍然没有收到多大重在所有JavaScript应用中事件处理都是非常重要的. 所有的JavaScript均通过事件绑定到UI上, 所以大多数前端工程师需要花费很多时间...

microelec 2019-08-21 17:10 评论0 收藏0
JavaScript学习总结（九）事件详解

摘要：布尔值表示捕获阶段调用事件处理程序，表示冒泡阶段通过对象的方法，也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是，当设置成时用以取消事件的默认行为与中的相同。其实这篇文章挺早之前就写了，但是由于sf保存方面的bug，所以当时写了一大堆，结果没保存，觉得这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给我的javascript学习总结做...

LiveVideoStack 2019-08-21 10:21 评论0 收藏0
JavaScript系列之事件详解

摘要：响应某个事件的函数就叫事件处理程序或事件侦听器。为事件指定事件处理程序的方法主要有种。事件处理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，解决事件处理程序过多问题。事件委托优点提高性能。 JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门事件 JavaScript与HTML之间的交互是通过事件实现的...

pakolagij 2019-08-21 17:16 评论0 收藏0