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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
JS之小练习代码
2008/10/12 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
基于node实现websocket协议
2016/04/25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python中的print()输出
2019/04/12 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
python绘制多个子图的实例
2019/07/07 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
计算机网络专业自荐信
2014/07/04 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
老公出轨后的保证书
2015/05/08 职场文书
六年级作文之预言作文
2019/10/25 职场文书