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.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
深入PHP数据加密详解
2013/06/18 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python3爬虫怎样构建请求header
2018/12/23 Python
python3字符串操作总结
2019/07/24 Python
python3图片文件批量重命名处理
2019/10/31 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
yy生日主持词
2014/03/20 职场文书
车间主任岗位职责
2015/02/03 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
妇产科护理心得体会
2016/01/22 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS