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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
Vue.use源码分析
Apr 22 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
微信小程序如何获取用户手机号
Jan 26 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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输出1000以内质数(素数)示例
2014/02/16 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
原生JS实现瀑布流插件
2018/02/06 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
浅析Python编写函数装饰器
2016/03/18 Python
Python中join函数简单代码示例
2018/01/09 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python各类经纬度转换的实例代码
2019/08/08 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
外贸公司实习自我鉴定
2013/09/24 职场文书
学生保证书
2015/01/16 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Python实现归一化算法详情
2022/03/18 Python
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL