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、相关知识

  1. event.relatedTarget 返回当鼠标移动时进入或退出的那个元素
  2. 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 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据的更多相关文章

  1. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  2. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  3. js进阶 10-11/12 表单伪类选择器的作用

    js进阶 10-11  表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...

  4. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  5. [.net 面向对象程序设计进阶] (12) 序列化(Serialization)(四) 快速掌握JSON的序列化和反序列化

    [.net 面向对象程序设计进阶] (12) 序列化(Serialization)(四) 快速掌握JSON的序列化和反序列化 本节导读: 介绍JSON的结构,在JS中的使用.重点说明JSON如何在.N ...

  6. 【 D3.js 进阶系列 — 6.1 】 缩放的应用（Zoom）

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  7. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

  8. 【 D3.js 进阶系列 — 4.0 】 绘制箭头

    转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...

  9. js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）

    js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...

随机推荐

  1. 小项目: low版本的 员工信息程序:

    ### 附加两个文件1 user_info 和worker_info flag = False def logon(): #登录函数 global flag usr = input('Username ...

  2. Day1下午解题报告

    预计分数:0+30+30=60 实际分数:0+30+40=70 T1水题(water) 贪心,按长度排序, 对于第一幅牌里面的,在第二个里面,找一个长度小于,高度最接近的牌 进行覆盖. 考场上的我离正 ...

  3. XSY3244 10.31 D

    XSY3244 10.31 D 题意: ​ 数轴上有\(N\)只老鼠\(M\)个洞,每个洞有一个容量,求所有老鼠进洞的最小代价.(\(N,M\leq1000000\),时限\(2s\)) 题解: ​ ...

  4. 华为PUSH SDK 接入方法

    本文参考了华为推送平台官网及其Demo:http://developer.huawei.com/cn/consumer/wiki/index.php?title=%E6%8E%A5%E5%85%A5% ...

  5. 火车票问题．以及x轴连续矩形，最大面积问题

    假设火车有10个站点: 1000个座位 api(1)  -> param  : leftStation, rightStation -> result : cnt             ...

  6. Hirens Boot DVD 15.2 功能恢复版 v1.1 -- 制作U盘启动盘

    Hirens Boot DVD 15.2 功能恢复版 v1.1 这个版本比 Hirens Boot DVD 15.2 功能要多,在正式版本中缺少的商业工具这个版本都包含了,所以这个应用程序被称为恢复版 ...

  7. C++ 复制到粘贴板

    网上好多教程讲如何复制到剪切板,但是有可能复制的是乱码,为了方便,将CString类型的复制到剪切板 CString source;if (OpenClipboard()){//防止非ASCII语言复 ...

  8. WPF 入门《常用控件》

    1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素.如: StackPanel面板 <GroupBox Header="select number?"& ...

  9. Android RecyclerView And CardView

    Google I/O 2014大会公布Android L系统,还有Material Design全新的设计风格.而Material Design卡片式的设计.Google Play应用商店和G+ AP ...

  10. 网页设计实战3 ufo类型的科技网页如何实现

    网页设计实战3 ufo类型的科技网页如何实现 一.总结 一句话总结:基础的图片素材就是如何几张图片,这个效果只是通过jquery或者js让那个png图片旋转起来了,如此而已.其实核心就是一个trans ...