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、相关知识

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

 

2、代码

1  2  3  5  6     
      7      8      9     14 15 16 17 
jQuery事件对象
18 
     
      
     
19 20 21 
     
      22     
      
23     
      
24     
      
25     
      
26 
     
27 53 54