jQuery事件对象总结


Posted in Javascript onOctober 17, 2016

 本人对jquery的event不懂,搜索了很多关于jquery event事件介绍,下面我来记录一下,有需要了解jquery event事件用法的朋友可参考。希望此文章对各位有所帮助。

学习要点:

事件对象 冒泡和阻止默认行为

一、事件对象

在JS中,我们已经详细讨论了JS的事件对象,这里就挑几个常用的探讨

<code class=" hljs xml"></code><div><code class=" hljs xml">
  <input type="text">
</code></div>

1.event.type 属性获取触发事件名

<code class=" hljs javascript">$("div").click(function (e) {
  console.log(e.type);    // click
});</code>

2.event.target获取绑定DOM的元素

<code class=" hljs javascript">$("div").click(function (e) {
  console.log(e.target);   // div
});</code>

3.event.data 获取额外数据,可以是数字、字符串、数组、对象

<code class=" hljs javascript">$("div").bind("click", {"name" : "zhang", "age" : 20}, function (e) {
  for(var i in e.data) {
    console.log(i + " = " + e.data[i]);
  }
})</code>

4.event.relatedTarget 获取移入移出目标点离开或进入的那个 DOM 元素

<code class=" hljs javascript">$("div").mouseover(function (e) {
  console.log(e.relatedTarget);    // body
});</code>

5.event.currentTarget 获取绑定的那个 DOM 元素,相当于 this,区别与 event.target

<code class=" hljs xml"><ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul></code>
<code class=" hljs javascript">// 事件委托
$("ul").click(function (e) {
  console.log(e.target);   // li
});
$("ul").click(function (e) {
  console.log(e.currentTarget);    // ul
});</code>

PS : target表示触发事件的DOM,currentTarget表示绑定事件的元素 6.event.result 表示获取上次事件的值

<code class=" hljs lua"></code><div><code class=" hljs lua">
  <input type="text">
$("div").click(function () {
  return "123";
});
$("div").click(function (e) {
  console.log(e.result);   // 123
});</code></div>

7.event.timeStamp 获取当前时间戳

<code class=" hljs javascript">$("div").click(function (e) {
  console.log(e.timeStamp);
});</code>

8.event.which 获取鼠标的左中右键

<code class=" hljs javascript">$("div").mousedown(function (e) {
  var key = '';
  switch (e.which) {
    case 1:
      key = "左键";
      break;
    case 2:
      key = "中键";
      break;
    case 3:
      key = "右键";
      break;
  }
  console.log(key);
});</code>

同时event.which也可以获取键盘上的键

<code class=" hljs javascript">$("input").keyup(function (e) {
  console.log(e.which);
});</code>

9.event.ctrlKey 判断是否按下了ctrl键

<code class=" hljs javascript">$("input").keyup(function (e) {
  console.log(e.ctrlKey);   // 返回布尔值
})</code>

10.获取鼠标当前的位置

<code class=" hljs avrasm">$(document).click(function (e) {
  console.log("screenX: " + e.screenX);
  console.log("pageX: " + e.pageX);
  console.log("clientX: " + e.clientX);
});</code>

二.冒泡和默认行为 1.事件冒泡和阻止冒泡 先来看看一个冒泡的例子

<code class=" hljs php"></code><div><code class=" hljs php">
  <input type="button" value="按钮">
$("input").click(function () {
  console.log("按钮被触发");
});
$("div").click(function () {
  console.log("div被触发");
});
$(document).click(function () {
  console.log("document被触发");
});
// 当单击按钮时,三个事件都被触发
// 当单击div时,div和document被触发
// 当单击document时,也仅有document事件被触发</code></div>

现在我们阻止冒泡,看看结果

<code class=" hljs javascript">$("input").click(function (e) {
  console.log("按钮被触发");
  e.stopPropagation();
});
$("div").click(function (e) {
  console.log("div被触发");
  e.stopPropagation();
});
$(document).click(function () {
  console.log("document被触发");
});</code>

无论你怎样单击按钮和div,它也只能触发自己的时间,因为冒泡被阻止了

2.阻止默认行为

<code class=" hljs lua"></code><div><code class=" hljs lua"> 
$("a").click(function (e) {
  e.preventDefault();
});</code></div>

3.同时阻止默认行为和冒泡

<code class=" hljs javascript">$("a").click(function (e) {
  console.log("a");
  e.stopPropagation();
  e.preventDefault();
});
$("div").click(function () {
  console.log("div");
});</code>

或者用 return false;

<code class=" hljs javascript">$("a").click(function (e) {
  console.log("a");
  return false;
});
$("div").click(function () {
  console.log("div");
});</code>

3.阻止事件冒泡和默认行为的一些方法

判断是否取消了默认行为

<code class=" hljs javascript">$("a").click(function (e) {
  e.preventDefault();
  console.log(e.isDefaultPrevented());  // true
})</code>

取消冒泡后取消后续的事件处理函数

<code class=" hljs javascript">$("a").click(function (e) {
  console.log("a");
  // e.preventDefault();   // 三个都触发
  // e.stopPropagation(); // 触发前两个
  // e.stopImmediatePropagation();  // 只触发第一个
});
$("a").click(function () {
  console.log("i am a");
}); 
$(document).click(function () {
  console.log("i am document");
})</code>

判断是否调用了 stopPropagation()方法

<code class=" hljs javascript">$("div").click(function (e) {
  e.stopPropagation();
  console.log(e.isPropagationStopped()); // true
})</code>
判断是否执行了 stopImmediatePropagation()方法
<code class=" hljs javascript">$('div').click(function (e) {
  e.stopImmediatePropagation();
  console.log(e.isImmediatePropagationStopped());   // true
});</code>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
jQuery DOM操作实例
Mar 05 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
微信小程序 MINA文件结构
Oct 17 #Javascript
Jquery实现上下移动和排序代码
Oct 17 #Javascript
微信小程序 Page()函数详解
Oct 17 #Javascript
微信小程序 触控事件详细介绍
Oct 17 #Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 #Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 #Javascript
学习Node.js模块机制
Oct 17 #Javascript
You might like
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
做网页的一些技巧
2007/02/01 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Python生成器(Generator)详解
2015/04/13 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
行政主管岗位职责
2013/11/18 职场文书
探矿工程师自荐信
2014/01/24 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
小班下学期评语
2014/05/04 职场文书
党的群众路线调研报告
2014/11/03 职场文书
费用申请报告范文
2015/05/15 职场文书
投诉书格式范本
2015/07/02 职场文书
经典祝酒词大全
2015/08/12 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle