js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

最新推荐文章于 2022-06-29 23:03:15 发布

weixin_34218890

最新推荐文章于 2022-06-29 23:03:15 发布

阅读量167

点赞数

文章标签： javascript ViewUI

js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

一、总结

一句话总结：event.type 描述事件的类型。 event.target 触发该事件的 DOM 元素。 event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'。

1、event.target和event.currentTarget的区别是什么？

target属性的值是发生事件的那个元素，currentTarget是绑定事件的那个元素，相当于this

你给哪个元素设置了事件监听，event.currentTarget始终返回的就是哪个元素

event.target 触发该事件的 DOM 元素。
event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'

2、如何获取正在发生事件的名字？

event的type属性

22         $('#btn1').click(function(e){ 23 //event.type 获取触发事件名 24 //alert(e.type)

3、如何获取是哪个元素在发生事件？、

target属性的值是发生事件的那个元素，currentTarget是绑定事件的那个元素，相当于this

event.target 触发该事件的 DOM 元素。

31         $('#div1').click(function(e){ 32 //event.target触发该事件的 DOM 元素 33  alert(e.target.tagName) 34 //currentTarget表示绑定事件的元素 35  alert(e.currentTarget.tagName) 36  })

event.target 触发该事件的 DOM 元素。
event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'

二、如何获取正在发生事件的名字和是哪个元素在发生事件

1、事件对象

JavaScript在事件处理函数中默认传递了event对象，在入门视频中我们已经详细讲解过事件对象。jQuery对JavaScript原有的事件对象进行封装，解决了浏览器的兼容性问题，并且创建了一些新的属性和方法，使我们使用起来更加方便。

event对象的属性

event.type 描述事件的类型。
event.target 触发该事件的 DOM 元素。
event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery.min.js"></script>
 9     <style type="text/css">
10     body{height: 3000px}
11     div{width: 150px;height: 100px;border:1px solid orange;position: fixed;left:150px;}
12     p{width: 50px;height:50px;background: green}
13       </style>
14 </style>
15 </head>
16 <body>
17 <h3>jQuery事件对象</h3>
18 <div id="div1"><p></p></div>
19 <input id="btn1" type="button" value="事件对象">
20 <script type="text/javascript">
21     $(function(){
22         $('#btn1').click(function(e){
23             //event.type 获取触发事件名
24             //alert(e.type)
25 
26             //event.target触发该事件的 DOM 元素
27             alert(e.target.tagName)
28             alert(e.currentTarget.tagName)
29         })
30 
31         $('#div1').click(function(e){
32             //event.target触发该事件的 DOM 元素
33             alert(e.target.tagName)
34             //currentTarget表示绑定事件的元素
35             alert(e.currentTarget.tagName)
36         })
37     })
38 </script>
39 </body>
40 </html>

weixin_34218890

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件一、总结一句话总结：event.type 描述事件的类型。 event.target 触发该事件的 DOM 元素。 event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'。 1、event.target和event.currentTarget的...
复制链接

扫一扫