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、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
div{width: 100px;height: 100px;border:1px solid green;}
#xy{width: 300px;position: fixed;}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<div id="div1"><p id="pid"></p></div>
<input id="btn1" type="button" value="事件对象">
<input id="xy" type="text">
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<script type="text/javascript">
$(function(){
//event.relatedTarget 获取移入移出目标点离开或进入的那个 DOM 元素
$('div').mouseover(function(e){
alert(e.relatedTarget)
})
$('div').mouseout(function(e){
alert(e.relatedTarget)
}) //额外数据
$('#btn1').click(2016,function(e){
alert(e.data)
})
$('#btn1').click('ABC',function(e){
alert(e.data)
})
$('#btn1').click({name:'zhangsan'},function(e){
alert(e.data.name)
})
var arr=[{name:'zhangsan'},'ABC',[100,200,300]]
$('#btn1').click(arr,function(e){
alert(e.data[2][0])
})
})
</script>
</body>
</html>