要想搞明白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获取点击事件的事件对象的更多相关文章

  1. jquery利用event.which方法获取键盘输入值的代码

    jquery利用event.which方法获取键盘输入值的代码,需要的朋友可以参考下. 实例 显示按了哪个键: $("input").keydown(function(event) ...

  2. jQuery Mobile Slider 禁用点击事件

    阿子原创,转载请注明出处. 在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作.为此需要禁用Slider的点击事件. 官方A ...

  3. jQuery获取点击对象的父级

    一.使用$('body').on('click','.index',function(event){})绑定事件时,例: <div class="project-box"&g ...

  4. 使用jQuery模拟鼠标点击a标签事件

    来源于:https://mo2g.com/view/42/ <html> <head> <meta charset="UTF-8"> <t ...

  5. jquery data方法获取某个元素上事件

    获取某个元素上的事件,jquery的给元素绑定的事件可以用data方法取出来. 通过$(element).data("events")来获取 // 比如给一个button绑定两个c ...

  6. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  7. jquery 触发a链接点击事件

    jquery 触发a链接点击事件 <p class="btnSubmit"><a href="javascript:submitData();" ...

  8. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  9. jQuery绑定和解绑点击事件及重复绑定解决办法

    原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...

随机推荐

  1. 转发:吐血总结,彻底明白 python3 编码原理

    吐血总结,彻底明白 python3 编码原理 写的不错,转发学习一下,侵删.. 原文地址https://zhuanlan.zhihu.com/p/40834093 防止原文看不到了 这里粘贴复制一下: ...

  2. [转]windows 7 下快速搭建php环境(windows7+IIS7+php+mysql)

    转贴:http://apps.hi.baidu.com/share/detail/10406992 (1).采用理由: 优点:最大化的桌面图形化操作系统,可维护性优秀.基于IIS v6.0/v7.0( ...

  3. Meta标签 h5

    一  PC端meta标签 1 页面关键词 <meta name="keywords" content="your tags"> 2 页面描述 < ...

  4. springboot项目中,@transactional 无效

    问题: springboot项目,依然是使用jpa.Hibernate来操作mysql,涉及到数据库的操作,就少不了事务.写了一个接口,用来测试@Transaction注解的作用,发现没有效果 分析: ...

  5. dive into python:模块的导入和搜索文件路径的配置

    1.Python中导入模块:import sys:相当于Java中的导入包.类. 比如,我们导入sys模块,使用:import sys; 2.Python中调用函数的时候,会从默认配置的库文件夹中(s ...

  6. github与git常用的一些基本配置与命令

    首次Git设置:ssh-keygen -t ras -C "email@xxx" 生成SSH (共钥)将生成的SSH key复制到文本框中即可(title默认为邮箱名) 你的身份( ...

  7. Xcode 动态库及Framework 安装路径设置

    使用Xcode开发动态库及Framework时,需要为其设置Install path.在设置Install path时,可能会使用到以下几个路径: 1)绝对路径:               绝对路径 ...

  8. R语言常用数学函数

    语言的数学运算和一些简单的函数整理如下: 向量可以进行那些常规的算术运算,不同长度的向量可以相加,这种情况下最短的向量将被循环使用.   > x <- 1:4 > a <- 1 ...

  9. What is JSON

    JSON (JavaScript Object Notation)  是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON具有以下这些形式: 对象是一个无序的“‘名称/值’对” ...

  10. ERwin 正向工程

    1.物理模型带字段备注 COMMENT ON 将模型切换至 physical 模式选择 Model ---> Domain Dictionary , 在 tab 标签中,切换至comment 然 ...