jQuery事件对象的属性和方法详解


Posted in jQuery onSeptember 09, 2017

jQuery事件对象的属性和方法,供大家参考,具体内容如下

事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别

event.type:获取事件的类型

触发元素的事件类型

$("a").click(function(event) {
 alert(event.type); // "click"事件
});

event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标

通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离,简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法:阻止默认行为

这个用的特别多,在执行这个方法后,如果点击一个链接(a标签),浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

event.stopPropagation() 方法:阻止事件冒泡

事件是可以冒泡的,为防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数

event.which:获取在鼠标单击时,单击的是鼠标的哪个键

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents),左键报告1,中间键报告2,右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别:

js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用;

参考代码:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style>
  .left div,
  .right div {
    width: 500px;
    height: 100px;
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px solid #ccc;
  }
  
  .left div {
    background: #bbffaa;
  }
  
  .right div {
    background: yellow;
  }
  </style>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h3>事件对象的属性与方法</h3>
  <div class="left">
    <div id="content">
      外层div元素
      <br />
      <span style="background: silver;">内层span元素</span>
      <br /> 外层div元素
    </div>
    <br />
    <div id="msg"></div>
  </div>
  <script type="text/javascript">
  //为 <span> 元素绑定 click 事件 
  $("span").click(function() {
    $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
  });
  //为 Id 为 content 的 <div> 元素绑定 click 事件 
  $("#content").click(function(event) {
    $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
    event.stopPropagation(); //阻止事件冒泡 
  });
  //为 <body> 元素绑定 click 事件 
  $("body").click(function() {
    $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
  });
  </script>
</body>

</html>

jQuery事件对象的属性和方法详解

点击span冒泡到content的点击事件,然后进入到content的click function里面执行阻止冒泡语句,也就不会冒泡到body,所以点击span不会出现body元素被点击。

$('#msg').html($('#msg').html()+ "<p>内层span元素被单击</p>"); //在msg原有内容上追加
$('#msg').html("<p>内层span元素被单击</p>"); //替换原来的内容

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 #jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 #jQuery
jQuery实现的弹幕效果完整实例
Sep 06 #jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 #jQuery
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP生成静态页
2006/11/25 PHP
php发送post请求函数分享
2014/03/06 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
Javascript 学习书 推荐
2009/06/13 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
校园门卫岗位职责
2013/12/09 职场文书
后勤工作个人总结
2015/02/28 职场文书
银行求职信模板
2015/03/20 职场文书
九九重阳节致辞
2015/07/31 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技