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 AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
js onclick事件传参讲解
Nov 06 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
微信小程序 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python深入学习之装饰器
2014/08/31 Python
Django日志模块logging的配置详解
2017/02/14 Python
简单易懂的python环境安装教程
2017/07/13 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
求职自荐信的格式
2014/04/07 职场文书
出国签证在职证明
2014/09/20 职场文书
民间借贷被告代理词
2015/05/23 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书