要想搞明白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. laravel生命周期和核心思想

    工欲善其事,必先利其器.在开发Xblog的过程中,稍微领悟了一点Laravel的思想.确实如此,这篇文章读完你可能并不能从无到有写出一个博客,但知道Laravel的核心概念之后,当你再次写起Larav ...

  2. java 并发编程 Executor框架

    http://blog.csdn.net/chenchaofuck1/article/details/51606224 demo package executor; import java.util. ...

  3. Shape Drawable Resources

    1,示例 它们的代码如下: shape_oval.xml <?xml version="1.0" encoding="utf-8"?> <sh ...

  4. Linux系统下强制踢掉登录用户

    1,利用who命令,找出用户登录的终端代号 who root     pts/0        2017-03-14 22:30 (223.1.1.1) root     pts/1        2 ...

  5. layer父页获取弹出层输入框里面的值

    主要是因为修改功能,原来页面填写数据如图 改为 其中点击填写明细弹出框 填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的 ...

  6. string与int的相互转换C++(转)

    string与int之间的相互转换C++(转) #include<iostream> #include<string> #include<sstream> usin ...

  7. Django基础之admin功能

    Django默认开起了后台 1.访问admin后台 2.用户和密码进行登录 ============================================================== ...

  8. Android开发: 关于性能需要考虑的

    刚做Android开发时,只管完成任务,将需求完成,以能完成一款界面酷炫的app为自豪.然而,随着代码量的增加,越来越意识到,一款成功的移动端产品,光有酷炫的外衣还不够,还需要在各方面都优秀. 试想, ...

  9. Win7访问不了WINXP共享文件

    用win xp的机器可以访问,但用win 7的机器无法访问共享文件 提示:您没有权限访问.请与网络管理员联系请求访问权限 网上找了相应的资料 做了如下动作 1. 打开网上邻居→本地连接→属性里,“看是 ...

  10. day14-二分法、匿名函数、内置函数以及面向过程编程

    目录 二分法 匿名函数 内置函数 面向过程编程 二分法 二分法查找适用于数据量较大时,但是数据需要先排好顺序.主要思想是:(设查找的数组区间为array[low, high]) (1)确定该区间的中间 ...