要想搞明白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. CSS3常用知识点

    CSS3常用知识点 1 css3选择器 1.1 属性选择器 /* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/ .attr2 a[class~="kawa& ...

  2. 关于Webpack的的认识及傻瓜式教学

    刚学习了Webpack,ememememememememem就赶脚是一个打包工具,将js.css.json.img等等通通打包为最终的文件,最后渲染为一个页面. 也是终于捋清了Webpack的思路,在 ...

  3. C#上机作业及代码Question1

    第一题创建控制台应用程序,利用下面的公式计算 q 的近似值,并运行出 k=10 时 q 的值. 本着开源的精神,献给各位,题目简单,随便写写,功能都实现了,不过现在先上传简单题,有一些难度的题目我先留 ...

  4. 【NOI2012】魔幻棋盘

    Description 将要读二年级的小 Q 买了一款新型益智玩具——魔幻棋盘,它是一个N行M列的网格棋盘,每个格子中均有一个正整数.棋盘守护者在棋盘的第X行Y列(行与列均从1开始编号) 并且始终不会 ...

  5. BFS POJ 3414 Pots

    题目传送门 /* BFS:六种情况讨论一下,BFS轻松解决 起初我看有人用DFS,我写了一遍,TLE..还是用BFS,结果特判时出错,逗了好长时间 看别人的代码简直是受罪,还好自己终于发现自己代码的小 ...

  6. 编写UI自动化测试用例原则

    1.一个脚本是一个完整的场景,从用户登陆操作到用户退出系统关闭浏览器.2.一个脚本脚本只验证一个功能点,不要试图用户登陆系统后把所有的功能都进行验证再退出系统3.尽量只做功能中正向逻辑的验证,不要考虑 ...

  7. 网上商城 Incorrect datetime value: '' for column 'ordertime' at row 1

    今天在做商城项目的[提交订单]功能的时候,向数据库插入数据报错:Incorrect datetime value: '' for column 'ordertime' at row 1 public ...

  8. java生成excel

    package test.poi; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; ...

  9. Discuz伪静态代码

    <?php /** * [伪静态跳转(xugui_redirect.{modulename})] (C)2012-2099 Powered by 懒人V难人. * Version: 1.0 * ...

  10. 梦想MxWeb3D协同设计平台 2018.10.12更新

    SDK开发包下载地址: http://www.mxdraw.com/ndetail_10107.html 1. 全新的在线的三维协同设计平台,高效异步方式,基于JavaScript和WebGL技术,前 ...