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方式提 ...
随机推荐
- CSU 8月月赛 Decimal 小数化分数
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1303 这个OJ很容易跪所以我贴一下题目 Description 任意一个分数都是有理数,对于任意一 ...
- SQL优化工具SQLAdvisor使用（转）
一.简介 在数据库运维过程中,优化SQL是业务团队与DBA团队的日常任务.例行SQL优化,不仅可以提升程序性能,还能够降低线上故障的概率. 目前常用的SQL优化方式包括但不限于:业务层优化.SQL逻辑 ...
- 自己动手写SSO（单点登录）
SSO在我们的应用中非常常见,例如我们在OA系统登录了,我们就可以直接进入采购系统,不需要再登录了,这样使我们非常方便.现在网上也有很多实现方法,于是乎我也想写一个看看.我主要用到的是cookie的机 ...
- linux6.0系统如何安装portmap
因为在6.0的系统里,portmap已经改名了.在Redhat或CentOS5中可以使用 service portmap start启动服务,然后在启动nfs服务,实现挂载. 6里面可是试试 serv ...
- UML中的用例图
用例图构成:參与者(actor).用例(use case).子系统(subsystem) 关联(Association) 泛化(Inheritance) 就是通常理解的继承关系,子用例和父用例类似,但 ...
- 4个开源的Gmail替代品
资料来源 https://opensource.com/alternatives/gmail 本文是对原文翻译,在调试 privmx 时么有成功,这些代码大多用于 php5 ,对PHP7 不兼容. 相 ...
- Rsync 指令的使用方法
RsyncLinux版下载:http://rsync.samba.org/download.htmlWindows版下载:https://www.itefix.no/i2/cwrsync-get 选( ...
- gullo.me 的 natvps
gullo.me 的 natvps 1. 在下面的地址中输入内网 IP,查看许可的网络资源 https://hosting.gullo.me/plugin/support_manager/knowle ...
- zendiscovery 的Ping机制
ping是集群发现的基本手段,通过在网络上广播或者指定ping某些节点获取集群信息,从而可以找到集群的master加入集群.zenDiscovery实现了两种凭机制:广播与单播.本篇将详细分析一些这M ...
- 用jersey写 java restfull web services 输出xml格式数据
1 logic package com.toic.rest; import com.toic.model.Folder; import java.util.logging.Logger; import ...