jQuery通过event获取点击事件的事件对象
要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流
事件对象:
当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息。注意事件对象只有在事件发生时才会产生,我们无法手动创建,并且事件对象只能在处理函数内部访问,处理函数允许结束后该对象自动销毁。
怎么理解那??
如上代码,当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获取点击事件的事件对象的更多相关文章
- jquery利用event.which方法获取键盘输入值的代码
jquery利用event.which方法获取键盘输入值的代码,需要的朋友可以参考下. 实例 显示按了哪个键: $("input").keydown(function(event) ...
- jQuery Mobile Slider 禁用点击事件
阿子原创,转载请注明出处. 在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作.为此需要禁用Slider的点击事件. 官方A ...
- jQuery获取点击对象的父级
一.使用$('body').on('click','.index',function(event){})绑定事件时,例: <div class="project-box"&g ...
- 使用jQuery模拟鼠标点击a标签事件
来源于:https://mo2g.com/view/42/ <html> <head> <meta charset="UTF-8"> <t ...
- jquery data方法获取某个元素上事件
获取某个元素上的事件,jquery的给元素绑定的事件可以用data方法取出来. 通过$(element).data("events")来获取 // 比如给一个button绑定两个c ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- jquery 触发a链接点击事件
jquery 触发a链接点击事件 <p class="btnSubmit"><a href="javascript:submitData();" ...
- 使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...
- jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
随机推荐
- redis之简单动态字符串(SDS)
O(N):时间复杂度 N的值越大 时间复杂度随N的平方增大 O(1):就是说N很大的时候,复杂度基本不增长了.基本就是常量了. 在Redis数据库里 包含字符串值的键值对 在底层都是由SDS实现的. ...
- zabbix详细介绍及其自动动态发现
zabbix3.2.1 第1章 安装 1.1 查看系统环境 [root@centos7-2 ~]# [root@centos7-2 ~]# hostname -I 10.0.0.10 172.16.1 ...
- 横向移动-广告图(web)
项目 (移动的广告牌) 要求: 1,实现图片一次以移动的方式出现,到最后一张完全出现时,回弹到第一张 2,鼠标放在图片上面图片移动,鼠标离开,图片停止移动 HTML结构 <!DOCTYPE ht ...
- SVN服务器搭建 内网可用外网不可用的问题
检查1:内网端口映射到了外网端口,这样外网才能够访问到 映射的方式有两种: 1.通过路由器的虚拟服务器功能,网上一搜一大把. 2.将路由器的DMZ功能开启,并把DMZ主机设置为目标计算机. 检查2:S ...
- mysql的简单优化【简单易学】
1.选取最适用的字段属性: 表字段尽量设小,不要给数据库增加没必要的空间:如:值为'01'.'02',给char(2)即可: 2.使用连接(JOIN)来代替子查询(Sub-Queries): 使用jo ...
- Laravel5.1学习笔记21 EloquentORM 集合
Eloquent: Collections Introduction Available Methods Custom Collections Introduction All multi-resul ...
- Json-->Newton.Json.dll的使用方法
Newton.Json.dll for .NET2.0 实体1 public class Student { public string ID { get; set; } ...
- MYSQL 使用事务
直接上代码,ID是唯一标识 CREATE PROCEDURE PRO2() BEGIN DECLARE t_error INTEGER; DECLARE CONTINUE HANDLER FOR SQ ...
- 第一次创建svn的项目的使用方法
1.第一步.在服务器上创建svn项目,将开发人人员你的账号密码添加上去. 2.第二步.开始在本地创建一个文件夹,点文件夹,右键->tortoisSVN->repo-brower 填写svn ...
- sql server用SQL语句查看字段说明
SELECT t.[name] AS 表名,c.[name] AS 字段名,cast(ep.[value] )) AS [字段说明] FROM sys.tables AS t INNER JOIN s ...