js進階 12-7 如何知道你是從哪一個元素移動到當前元素與事件調用時如何添加額外數據

時間 2020-05-31

標籤進階如何知道哪一個元素移動當前事件調用添加額外數據欄目 JavaScript 简体版

原文原文鏈接

js進階 12-7 如何知道你是從哪一個元素移動到當前元素與事件調用時如何添加額外數據

1、總結

一句話總結：event的relatedTarget屬性和data屬性。

一、如何知道你是從哪一個元素移動到當前元素？

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  })

二、事件調用時如何添加額外數據？

event的data屬性javascript

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  })

三、事件調用時添加的額外數據放在哪？

放在匿名函數前面css

四、事件最重要的是什麼？

事件監聽的對象是誰，就是這裏選擇器裏面的內容html

2、如何知道你是從哪一個元素移動到當前元素與事件調用時如何添加額外數據

一、相關知識

event.relatedTarget 返回當鼠標移動時進入或退出的那個元素
event.data 事件調用時的額外數據

二、代碼

 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>