微信扫一扫打赏支持

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

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

一、总结

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

 

 

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

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

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

  1. event.target 触发该事件的 DOM 元素。
  2. 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         })
  1. event.target 触发该事件的 DOM 元素。
  2. event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'

 

 

 

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

1、事件对象

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

event对象的属性
  1. event.type 描述事件的类型。
  2. event.target 触发该事件的 DOM 元素。
  3. 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>

 

 

 

 

 
posted @ 2018-07-05 19:41  范仁义  阅读(2368)  评论(0)  编辑  收藏  举报