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方式提 ...
随机推荐
- 一款开源Office软件---Lotus Symphony在Linux系统下的应用
点击下载观看试用录像 Linux系统下的办公软件有OpenOffice.永中Office.红旗Red Office.金山Wps Office及StarOffice等,今天我为大家介绍IBM推进军O ...
- 给iOS项目中添加图片，并通过UIImageView引用和显示该UIImage图片
[问题] 关于iOS/iPhone中的文件选择对话框,用于用户去选择图片等文件 过程中,问题转换为,需要给当前iOS项目中,添加一个图片. 类似于Windows开发中的资源文件,其中图片文件属于资源的 ...
- jquery实现瀑布流效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- groupadd---创建一个新的工作组
groupadd命令 groupadd命令用于创建一个新的工作组,新工作组的信息将被添加到系统文件中. 语法 groupadd(选项)(参数) 选项 -g:指定新建工作组的id: -r:创建系统工 ...
- Hive通过查询语句向表中插入数据过程中发现的坑
前言 近期在学习使用Hive(版本号0.13.1)的过程中,发现了一些坑,它们也许是Hive提倡的比关系数据库更加自由的体现(同一时候引来一些问题).也许是一些bug.总而言之,这些都须要使用Hive ...
- Tomcat之虚拟主机配置以及web应用配置
Tomcat之虚拟主机配置以及web应用配置 Tomcat文件夹结构例如以下: bin ---- 启动和关闭须要的bat文件所在的文件夹 conf --- 配置文件夹 lib --- tomcat执 ...
- MySQL具体解释（13）------------事务
一. 什么是事务 事务就是一段sql 语句的批处理.可是这个批处理是一个atom(原子) .不可切割,要么都运行,要么回滚(rollback)都不运行. 二.为什么出现这样的技术 为什么要使用事务这个 ...
- 将vue-cli 2.x的项目升级到3.x
尝试将vue-cli 2.x的项目升级到3.x,记录一下升级过程,和遇到的坑 1. 直接复制替换src文件夹 2. 安装项目需要的依赖 (可以将原来package.json dependencies下 ...
- JAVA MessageDigest（MD5加密等）
转自http://blog.csdn.net/hudashi/article/details/8394158 一.概述 java.security.MessageDigest类用于为应用程序提供信息摘 ...
- GraphX 图数据建模和存储
背景 简单分析一下GraphX是怎么为图数据建模和存储的. 入口 能够看GraphLoader的函数. def edgeListFile( sc: SparkContext, path: String ...