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实现瀑布流页面
Apr 11 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jquery实现广告上下滚动效果
Mar 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
PHP include任意文件或URL介绍
2014/04/29 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
php数组遍历类与用法示例
2019/05/24 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
安装python及pycharm的教程图解
2019/10/10 Python
python数据预处理方式 :数据降维
2020/02/24 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
大学在校生求职信范文
2013/11/21 职场文书
大家检讨书5000字
2014/02/03 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
环境卫生倡议书
2014/08/29 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA