jQuery事件对象总结

更新时间：2016年10月17日 15:56:07 作者：光明大神棍的博客

事件是脚本编程的灵魂,本篇来介绍jQuery中的事件处理及事件对象.这里整理了详细的代码,有需要的小伙伴可以参考下。

本人对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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery事件绑定用法详解
这篇文章主要介绍了jQuery事件绑定用法,结合多个实例较为详细的分析了常见的jQuery事件绑定实现技巧与使用方法,需要的朋友可以参考下
2016-09-09
Jquery获取radio选中值实例总结
在本篇文章里小编给大家分享了关于Jquery获取radio选中值实例总结内容，有兴趣的朋友们可以学习下。
2019-01-01
jquery专业的导航菜单特效代码分享
这篇文章主要介绍了jquery专业的下拉菜单特效，一个精致的导航菜单会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的导航菜单，感兴趣的小伙伴可以参考下。
2015-08-08
jquery代码规范让代码越来越好看
本文主要介绍了jquery的代码规范。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
jquery实现简单Tab切换菜单效果
这篇文章主要介绍了jquery实现简单Tab切换菜单效果的相关资料,需要的朋友可以参考下
2016-06-06
jquery+css实现移动端元素拖动排序
这篇文章主要为大家详细介绍了jquery+css实现移动端元素拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
Jquery 类网页微信二维码图块滚动效果具体实现
网页微信二维码图块滚动效果想必大家都有见到过吧，在接下来的文章中将为大家详细介绍下使用Jquery是如何实现，感兴趣的朋友可以参考下
2013-10-10
jquery+php后台实现省市区联动功能示例
这篇文章主要介绍了jquery+php后台实现省市区联动功能,涉及jQuery事件响应及页面元素属性动态变换,以及ajax后台动态交互相关操作技巧,需要的朋友可以参考下
2019-05-05
jQuery动画效果-slideUp slideDown上下滑动示例代码
jQuery动画上下滑动效果在网页中的应用还是比较广泛的，其实很简单通过slideUp slideDown方法便可轻松实现，具体如下，喜欢的朋友可以参考下，希望对大家学习jquery有所帮助
2013-08-08
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
这篇文章主要介绍了firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误,分析了下，原来是利用flash进行post上传时没有包含原来的session信息，而是重新创建了一个session，知道原因了，我们来看看如何解决吧。
2015-03-03

jQuery事件对象总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具