事件对象的使用、属性和方法

1 event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

2 target属性可以是注册事件时的元素或者子元素,通常用于比较event.target和this来确定是不是由于冒泡而触发的,经常用于事件冒泡时处理事件委托

3 事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁

4 jQuery事件对象的作用

   li都有一个共同的父元素,而且所有的事件都是一致的,可以采用要一个技巧来处理,也是常说的"事件委托

5 event.type获取事件的类型

6 event.pageX 和 event.pageY获取鼠标当前相对于页面的坐标,通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离,简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

7 event.preventDefault()阻止默认行为,在执行这个方法后,如果点击一个链接(a标签),浏览器不会跳转到新的 URL 去,可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

8   event.stopPropagation()阻止事件冒泡,为防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数


9   event.which获取在鼠标单击时,单击的是鼠标的哪个键


10   event.which 将 event.keyCode 和 event.charCode 标准化了,event.which也将正常化的按钮按下(mousedown 和 mouseupevents),左键报告1,中间键报告2,右键报告3


11   event.currentTarget : 在事件冒泡过程中的当前DOM元素,冒泡前的当前触发事件的DOM对象, 等同于this


12   this和event.target的区别
   this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素
   

13   .this和event.target都是dom对象,使用jquey中的方法可以将他们转换为jquery对象,比如this和$(this)的使用、event.target和$(event.target)的使用
转帖:http://blog.51cto.com/lakaodekaola/2085868

原文发布于微信公众号 - 编程坑太多(idig88)

原文发表时间:2018-03-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java后端技术

细谈CSS布局方式

  [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而...

12720
来自专栏菜鸟计划

javascript 事件基础

一:事件流       事件流描述的是从页面中接收事件的顺序。 ? ?  事件冒泡 <div id="one"> <div id="tw...

37250
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例之自动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

15740
来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

392110
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

23800
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例手动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

13320
来自专栏沈唁志

jQuery中的9个选择器

15720
来自专栏落花落雨不落叶

关于Html与css的一些解释

323120
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

50430
来自专栏Micro_awake web

CSS position &居中(水平,垂直)

css position是个很重要的知识点: 知乎Header部分: ? 知乎Header-inner部分: ? position属性值: fixed:生成绝对...

66890

扫码关注云+社区

领取腾讯云代金券