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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery返回定位插件详解
May 15 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现简单评论功能
Aug 19 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下MYSQL limit的优化
2008/01/10 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP最常用的正则表达式
2017/02/13 PHP
php时间戳转换代码详解
2019/08/04 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
简洁的十分钟Python入门教程
2015/04/03 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
python开发中module模块用法实例分析
2015/11/12 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
英智兴达软件测试笔试题
2016/10/12 面试题
党校培训思想汇报
2013/12/30 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
大学生评语大全
2014/04/18 职场文书
横幅标语大全
2014/06/17 职场文书
详解Vue的options
2021/05/15 Vue.js
浅谈Python数学建模之固定费用问题
2021/06/23 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs