js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据
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>
js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据的更多相关文章
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶 10-11/12 表单伪类选择器的作用
js进阶 10-11 表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- [.net 面向对象程序设计进阶] (12) 序列化(Serialization)(四) 快速掌握JSON的序列化和反序列化
[.net 面向对象程序设计进阶] (12) 序列化(Serialization)(四) 快速掌握JSON的序列化和反序列化 本节导读: 介绍JSON的结构,在JS中的使用.重点说明JSON如何在.N ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用（Zoom）
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...
- js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）
js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...
随机推荐
- 自己增删改查Razor页面
AccountContext db = new AccountContext(); public ActionResult Index() { return View(db.SysUsers); } ...
- Advanced-REST-client-http接口测试工具
前言 作为一名在IT金字塔底层的苦逼码农也会接触http接口,各位开发大佬肯定也会有需要写或者测试http接口的时候.大多数接口测试工具都需要本地安装客户端,我这里分享一个谷歌浏览器的测试接口插件非常 ...
- GPU-Z：显卡体质、显卡各传感器实时状态的查看
1. TechPowerUp GPU-Z:查看显卡体质 下载地址:Download TechPowerUp GPU-Z | techPowerUp 点击 bus interface 后的?进行显卡的体 ...
- Vijos——T 1629 八
https://vijos.org/p/1629 描述 八是个很有趣的数字啊.八=发,八八=爸爸,88=拜拜.当然最有趣的还是8用二进制表示是1000.怎么样,有趣吧.当然题目和这些都没有关系. 某个 ...
- asp.net Code学习一(vs code跨平台软件操作)
1.命令行: dotnet new -t web 创建web项目 dotnet new restore build pubilsh run test pack dotnet -info / -h do ...
- zico源代码分析（二） 数据读取和解析部分
第一部分:分析篇 首先,看一下zico的页面,左侧是hostname panel,右侧是该主机对应的traces panel. 点击左侧zorka主机名,右侧panel会更新信息,在火狐浏览器中使用f ...
- QQ群功能设计与心理学
刚刚在一个Java技术交流群,发了个 "博客投票"的广告. 群主两眼一黑,瞬间就把我给干掉了. 看到QQ给出的系统消息,发现QQ群的一个功能做得很不错. 大家注意到,右边有个&qu ...
- C# List 复制克隆副本
[C#技术] C# List 复制克隆副本数字人 发表于:2012-8-28 18:02:49废话不多说,看代码: 方法一: List<string> t = new List<st ...
- ajax对服务端发送请求
//兼容处理获取ajax对象 var req = ''; if (window.XMLHttpRequest) req = new XMLHttpRequest(); else req = ...
- Zookeeper源码用ant进行编译为eclipse工程--转载
原文地址:http://www.it165.net/os/html/201411/10142.html Zookeeper GitHub的下载地址是:https://github.com/apache ...