js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据...

最新推荐文章于 2022-10-27 13:49:30 发布

Joe?

最新推荐文章于 2022-10-27 13:49:30 发布

阅读量126

点赞数

文章标签： javascript ViewUI

js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据

一、总结

一句话总结：event的relatedTarget属性和data属性。

1、如何知道你是从哪个元素移动到当前元素？

event.relatedTarget

29         //event.relatedTarget 获取移入移出目标点离开或进入的那个 DOM 元素
30         $('div').mouseover(function(e){ 31  alert(e.relatedTarget) 32  }) 33  $('div').mouseout(function(e){ 34  alert(e.relatedTarget) 35  })

2、事件调用时如何添加额外数据？

event的data属性

37         //额外数据
38         $('#btn1').click(2016,function(e){ 39  alert(e.data) 40  }) 41  $('#btn1').click('ABC',function(e){ 42  alert(e.data) 43  }) 44  $('#btn1').click({name:'zhangsan'},function(e){ 45  alert(e.data.name) 46  }) 47 var arr=[{name:'zhangsan'},'ABC',[100,200,300]] 48  $('#btn1').click(arr,function(e){ 49  alert(e.data[2][0]) 50  })

3、事件调用时添加的额外数据放在哪？

放在匿名函数前面

4、事件最重要的是什么？

事件监听的对象是谁，就是这里选择器里面的内容

二、如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据

1、相关知识

event.relatedTarget 返回当鼠标移动时进入或退出的那个元素
event.data 事件调用时的额外数据

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-3.1.1.min.js"></script>
 9     <style type="text/css">
10         input{width: 100px;height: 30px;}
11         div{width: 100px;height: 100px;border:1px solid green;}
12         #xy{width: 300px;position: fixed;}
13       </style>
14 </style>
15 </head>
16 <body>
17 <h3>jQuery事件对象</h3>
18 <div id="div1"><p id="pid"></p></div>
19 <input id="btn1" type="button" value="事件对象">
20 <input id="xy" type="text">
21 <ol>
22     <li></li>
23     <li></li>
24     <li></li>
25     <li></li>
26 </ol>
27 <script type="text/javascript">
28     $(function(){
29         //event.relatedTarget 获取移入移出目标点离开或进入的那个 DOM 元素
30         $('div').mouseover(function(e){
31             alert(e.relatedTarget)
32         })
33         $('div').mouseout(function(e){
34             alert(e.relatedTarget)
35         })
36 
37         //额外数据
38         $('#btn1').click(2016,function(e){
39             alert(e.data)
40         })
41         $('#btn1').click('ABC',function(e){
42             alert(e.data)
43         })
44         $('#btn1').click({name:'zhangsan'},function(e){
45             alert(e.data.name)
46         })
47         var arr=[{name:'zhangsan'},'ABC',[100,200,300]]
48         $('#btn1').click(arr,function(e){
49             alert(e.data[2][0])
50         })
51     })
52 </script>
53 </body>
54 </html>

Joe?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据...

js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据一、总结一句话总结：event的relatedTarget属性和data属性。 1、如何知道你是从哪个元素移动到当前元素？event.relatedTarget29 //event.relatedTarget 获取移入移出目标点离开或进入的那个 DOM 元素30 ...
复制链接

扫一扫