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 submit()不能提交表单的解决方法
Apr 24 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python松散正则表达式用法分析
2016/04/29 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python程序运行原理图文解析
2018/02/10 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
幼儿教师思想汇报
2014/01/10 职场文书
运动会通讯稿150字
2014/02/15 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
人事任命书范文
2014/06/04 职场文书
计划生育个人总结
2015/03/02 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
借款民事起诉状范文
2015/05/19 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python