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等等这些事件绑定事情,但还有很多朋友不 ...
随机推荐
- eccharts-gl 3D立体柱状图
echarts-gl继承于echarts echarts-gl官方实例https://echarts.baidu.com/examples/index.html#chart-type-globe 代码 ...
- datagrid上面的查询按钮设置了,但是分页工具栏不显示
原因:查询的linkbutton没有放在toolbar里. <script type="text/javascript"> $(function(){ $('#dg') ...
- 手机页面操作栏的创建及WebFont的使用
一.手机界面底部操作栏的创建. <style> .opers{ position:absolute; bottom:0px; left:0px; right:0px; height:3re ...
- JProfiler 9.1.1部署及使用
软件准备: 官网下载地址:http://www.ej-technologies.com/download/jprofiler/files 软件部署: windows安装双击即可. 注册号: L-Lar ...
- 在linux下运行mongodb
一>下载 1.去mongodb官网下拉框中找到 linux =>RHEL 6 => Package Manager: 2.Instructions for installing wi ...
- (转) 淘淘商城系列——redis-desktop-manager的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72849791 实际工作环境中,redis会安装在服务器上,我们想使用redis服务就要使用re ...
- MySql(四)Select条件查询
select条件查询的格式如下: SELECT 查询列表FROM 表名WHERE 筛选条件:123456根据筛选条件可以分为以下几类: 按照条件按表达式进行筛选 常用条件运算符如下:> .< ...
- Java多线程学习笔记(四)——Thread类中方法介绍
currentThread():返回代码正在被哪个线程调用. public class CurrentThreadWay { public static void main(String[] args ...
- 使用Unittest做单元测试,addTest()单个case的时候却执行全部的case
参考: http://tieba.baidu.com/p/6008699660 首先造成这个结果的原因是pycharm配置问题 问题验证: 测试代码: import unittest class Te ...
- java虚拟机(七)--java内存模型JMM
本文参考慕课网相关视频和博客https://mp.weixin.qq.com/s/tV0MfDdJqGwGMHCIkqnAgA,图也是这个博客的,这篇只是自己的简单总结,想要深 入理解可以访问这两块内 ...