要想搞明白js的事件机制，必须搞清楚几个概念：事件对象，事件源，还有事件流

事件对象：

当事件发生时会产生事件对象，事件对象的作用是用来记录“事件发生是一些相关的信息。注意事件对象只有在事件发生时才会产生，我们无法手动创建，并且事件对象只能在处理函数内部访问，处理函数允许结束后该对象自动销毁。

怎么理解那？？

<script>  document.onmousemove = function (ev) {  var e = ev || window.event;  var div = document.getElementById('div');  div.innerHTML = "clientX:"+ e.clientX;  }  </script>

如上代码，当onmousemove事件发生时，就会产生一个事件对象，就是程序中的event对象，我们只能在这个匿名函数中访问到这个event对象，在函数外面是访问不到的，同样我们也无法手动创建这个event对象；

如何获取事件对象那？？

var e = event || window.event; 这句话就是定义了一个变量来获取事件对象，因为不同的浏览器获取事件对象的方法有点不太一样，IE下是window.event，标准下是event，为了兼容所以写了event || window.event.

事件对象也分为：

鼠标事件对象，键盘事件对象等，顾名思义鼠标事件发生时产生鼠标事件对象，键盘事件发生时产生键盘事件对象；既然是对象，就必然有一些属性方法啥的。

鼠标事件对象上的常用属性：

clientX，clientY，screenX，screenY，offsetX，offsetY

键盘事件对象上的属性有：

keyCode: 用来获取键盘码的;比如空格的键盘是32，回车13等

cltkey: 判断alt键是否被按下，按下是true，反之false

Ctrlkey: 判断Ctrlkey键是否被按下，按下是true，反之false

Shiftkey : 判断Shiftkey 键是否被按下，按下是true，反之false

说到这里相信大家应该理解“事件对象”了吧！接着说一说事件源。

事件源：

在事件中，当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件，当点击a发生onclick事件时，事件源就是a标签，当点击input发送onclic事件是，事件源就是input。

如何获取事件源那？？

IE下：window.event.srcElement

标准下：event.target

由此可见，我们是通过事件对象获取到的事件源。

例如:点击一个div外部的时候使div消失

    $(document).click(function(event) {if ($(event.target).attr("class") != "unitName") {if ($("#showDiv").css("display") == "block") {$("#showDiv").css("display", "none");// 点击外部的时候隐藏名字提示框
            }}})

查看事件的target:

jQuery通过event获取点击事件的事件对象相关推荐

easyui tab 引用html,jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
本文实例讲述了jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法.分享给大家供大家参考,具体如下: 我们在使用EasyUI Tabs框架时,在框架最顶层的弹出窗体中需要操作当前Ta ...
jquery 沟选项获取点击添加和删除的数据
var push = new Array(); var del = new Array(); $("body").delegate('.relevance', 'change', ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
php jquery点击事件,jQuery操作html元素点击事件详解
这次给大家带来jQuery操作html元素点击事件详解,jQuery操作html元素点击事件的注意事项有哪些,下面就是实战案例,一起来看一下. 移除或禁用html元素的点击事件可以通过css实现也可以 ...
html点击图片产生事件,jquery – 图像单击HTML5 Canvas中的事件
我有一个 HTML5画布,我在其中添加了一个图像,我想调用图像的点击事件,但事件不会触发.我正在写一个HTML代码和jqmobile的一些代码 This text is displayed if yo ...
jquery 监听td点击事件_React 事件 | 1. React 中的事件委托
说到 React 的事件,也算是 React 的一个非常有亮点的优化,它在原生事件体系的基础上,单独实现了一套事件机制.想要了解这个机制,首先的了解下什么是事件委托以及事件委托的好处. 事件委托假设 ...
jquery click()方法模拟点击事件对a标签不生效的解决办法
jquery click()方法模拟点击事件对a标签不生效的解决办法参考文章: (1)jquery click()方法模拟点击事件对a标签不生效的解决办法 (2)https://www.cnblog ...
jquery动态渲染绑定点击事件不生效
原因:动态添加的HTML元素是在CSS,JS代码加载完成后再渲染的HTML页面.浏览器解析这些通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面时,这时绑定事件的标签元素还没有生成 ...
初始化触发点击事件_【Vue原理】Event - 源码版之自定义事件
专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本[2.5.17] Vue 的自定义事件很简单,就是使用观察者模 ...

jQuery通过event获取点击事件的事件对象

事件对象：

jQuery通过event获取点击事件的事件对象相关推荐

最新文章

热门文章