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 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
Javascript基础教程之变量
Jan 18 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python使用py2exe打包程序介绍
2014/11/20 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python实现扫雷游戏的示例
2020/10/20 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
家具厂厂长岗位职责
2014/01/01 职场文书
银行工作检查书范文
2014/01/31 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
工程管理英文求职信
2014/03/18 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
2014年会计人员工作总结
2014/12/10 职场文书