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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python去掉字符串中空格的方法
2014/03/11 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
最新自我评价范文
2013/11/16 职场文书
工作表现自我评价
2014/02/08 职场文书
学习交流会主持词
2014/04/01 职场文书
党委班子对照检查材料
2014/08/19 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
Redis可视化客户端小结
2021/06/10 Redis
golang中的struct操作
2021/11/11 Golang