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点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jquery实现掷骰子小游戏
Oct 24 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数据库配置文件一般做法分享
2012/07/07 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python write无法写入文件的解决方法
2019/01/23 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python