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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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 var_dump()函数的详解
2013/06/05 PHP
php Calender(日历)代码分享
2014/01/03 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
JS作用域深度解析
2016/12/29 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
Python中的魔法方法深入理解
2014/07/09 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Python Celery多队列配置代码实例
2019/11/22 Python
通过实例解析Python return运行原理
2020/03/04 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
英国在线泳装店:Simply Swim
2019/05/05 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
幼儿园教师教学反思
2014/02/06 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
应急处置方案
2014/06/16 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
党员评议自我评价
2015/03/03 职场文书
工程部岗位职责范本
2015/04/11 职场文书
Nginx快速入门教程
2021/03/31 Servers
Node.js实现断点续传
2021/06/23 Javascript
Win11查看设备管理器
2022/04/19 数码科技
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL