要想搞明白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消失

  1. $(document).click(function(event) {
  2. if ($(event.target).attr("class") != "unitName") {
  3. if ($("#showDiv").css("display") == "block") {
  4. $("#showDiv").css("display", "none");// 点击外部的时候隐藏名字提示框
  5. }
  6. }
  7. })

查看事件的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. Git管理多个远程分支

    在此目录下使用GIT要注意一下几点: 因为这个目录是管理远程多个不同的分支的项目,所以使用GIT之前确认一下几点: 打开git bash,使用命令:git config –list查看目前本地的目录文 ...

  2. js实现左右点击图片层叠滚动特效

    需要加载js有 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></s ...

  3. HTML城市联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. [ SDOI 2006 ] 仓库管理员的烦恼

    \(\\\) Description 有 \(n\) 种货物和 \(n\) 个仓库,开始第 \(i\) 个仓库里有 \(a_{ij}\) 个第 \(j\) 种货物. 现在要让每种货物都只放到一个仓库里 ...

  5. [ NOI 2002 ] 银河英雄传说

    \(\\\) Description 有 \(n\) 列战场,每一列一开始只有一个战舰,编号就是对应的战场编号. 有 \(m\) 次操作: \(M_{i,j}\) :把 \(i\) 所在的一整列接在 ...

  6. CSS笔记集合

    CSS CSS 认识 CSS全称为层叠样式表,主要是用于定义HTML内容在浏览器内的显示样式. CSS样式由选择符和声明组成,而声明又由属性和值组成. CSS中注释语句:/*注释语句*/.Html中使 ...

  7. web安全测试--XSS(跨站脚本)与CSRF

    XSS攻击原理 反射型 发出请求时,xss代码出现在URL中,作为输入提交到服务器端,服务器端解析后响应,xss代码随响应内容一起传回浏览器,最后浏览器解析执行xss代码.这个过程像一次反射,故叫反射 ...

  8. Java 基础入门随笔(4) JavaSE版——程序流程控制

    上一节对于运算符有了大致的了解,这一节针对程序流程控制进行复习!程序流程控制包括顺序结构.判断结构(if).选择结构(switch).循环结构. 1.判断结构 ①if语句的第一种格式:        ...

  9. QT,折腾的几天-----关于 QWebEngine的使用

    几天前,不,应该是更早以前,就在寻找一种以HTML5+CSS+Javascript的方式来写桌面应用的解决方案,为什么呢?因为前端那套可以随心所欲的写样式界面啊,恩.其实我只是想使用H5的一些新增功能 ...

  10. golang zip 压缩,解压(含目录文件)

    每天学习一点go src. 今天学习了zip包的简单使用,实现了含目录的压缩与解压. 写了两个方法,实现了压缩.解压. package ziptest import ( "archive/z ...