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方式提 ...
随机推荐
- ASP.NET MVC Web API 学习笔记---第一个Web API程序---近来很多大型的平台都公开了Web API
1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...
- js常用代码示例及解决跨域的几种方法
1.阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = ...
- node --进行后台的环境搭建
1.下载winscp --- 输入IP 端口 账号 密码 进入当前的服务器环境 2.下载xshell5 ---- 输入IP 端口 和 winscp 达成连接. 3.把本地代码放置 winscp远 ...
- SQL数值转字符串保留指定小数位
IF EXISTS ( SELECT * FROM sysobjects WHERE xtype = 'fn' AND name = 'fn_NumberFormat' ) BEGIN DROP FU ...
- 使用STS新的工作空间无需再配置
在你的新的工作空间中找到比如 F:\java-wokespace\你的新的工作空间名称\.metadata\.plugins\org.eclipse.core.runtime\.settings 找到 ...
- 通过NFS、FTP、HTTP三种方法安装Redhat Linux (高清版)
本节教程讲述了通过在Red Hat Linux服务器端假设NSF Server来进行Linux系统安装的过程,并详细介绍了如何制作网络启动盘的细节.演示直观,讲解通俗易懂,特别适合初学者学 ...
- 用硬件卡克隆Linux集群
650) this.width=650;" onclick="window.open("http://blog.51cto.com/viewpic.php?refimg= ...
- Android之Socket的基于UDP传输
接收方创建步骤: 1. 创建一个DatagramSocket对象,并指定监听的端口号 DatagramSocket socket = new DatagramSocket (4567); 2. 创 ...
- php基础篇之一
1.PHP是什么 官方文档:超文本预处理器 2.PHP能够做一些什么? PHP主要应用在一下领域: (1)服务器端脚本,需要:PHP解析器,PHP服务器,PHP浏览器. (2)命令行脚本,只需要PHP ...
- vue踩坑记-在项目中安装依赖模块npm install报错
在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modu ...