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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
如何在vue 中引入使用jquery
Nov 10 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
PHP个人网站架设连环讲(二)
2006/10/09 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
美国羊皮公司:Overland
2018/01/15 全球购物
EJB的几种类型
2012/08/15 面试题
教学大赛获奖感言
2014/01/15 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书