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 相关文章推荐
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP6新特性分析
2016/03/03 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
微信小程序纯文本实现@功能
2020/04/08 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python实现飞机大战小游戏
2019/11/08 Python
python3 求约数的实例
2019/12/05 Python
django列表筛选功能的实现代码
2020/03/27 Python
Django设置Postgresql的操作
2020/05/14 Python
如何用python 操作zookeeper
2020/12/28 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
九年级历史教学反思
2016/02/19 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
正则表达式基础与常用验证表达式
2022/06/16 Javascript