在发生mouseover和mouseout事件时,还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内。对mouseover事件而言,事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素。类似地,对mouseout事件而言,事件的主目标是失去光标的元素,而相关元素则是获得光标的元素。

DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值;对于其他事件,这个属性的值是null。IE不支持realtedTarget属性,但提供了保存着同样信息的不同属性。在mouseover事件触发时,IE的fromElement属性中保存了相关元素;在mouseout事件出发时,IE的toElement属性中保存着相关元素。可以把下面这个跨浏览器取得相关元素的方法添加到EventUtil对象中:

var EventUtil = {
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getRelatedTarget: function (event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
}
};
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mouseout", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var relatedTarget = EventUtil.getRelatedTarget(event);
alert("Moused out of " + target.tagName + " to " + relatedTarget.tagName);
});

这个例子的<div>元素的mouseout事件注册了一个事件处理程序。当事件触发式,会有一个警告框显示鼠标移除和移入的元素信息。

relatedTarget、fromElement、toElement相关元素的更多相关文章

  1. relatedTarget, fromElement, toElement

    原文:http://www.quirksmode.org/js/events_mouse.html#relatedtarget W3C在mouseover和mouseout事件中添加了relatedT ...

  2. mouseover和mouseout事件的相关元素

    在发生mouseover和mouseout事件时,还会涉及更多的元素,这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内.对mouseover事件而言,事件的主目标获得光标元素 ...

  3. HTML笔记(五)表单<form>及其相关元素

    表单标签<form> 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入信息的元素. 输入标签<input> 输入标签的输入类型由其类型属性type决定.常见的输入 ...

  4. 【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  5. JS——操作内容、操作相关元素

    操作内容:普通元素.innerHTML = "值": 会把标记执行渲染普通元素.innerText = "值": 将值原封不动的展示出来,即使里面有标记 var ...

  6. 如何在集合中巧用Where来查找相关元素

    在我们的项目中我们经常会查找一些集合中的重要元素,当然我们可以使用常规的foreach循环和if语句来查询,但是我们要学会使用System.Linq命名空间下面的静态类Enumerable下面的静态方 ...

  7. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  8. HTML解析类 ,让你不使用正则也能轻松获取HTML相关元素 -C# .NET

    功能: 1.轻松获取指元素HTML元素. 2.可以根据属性标签进行筛选 3.返回的都是Llist强类型无需转换 用过XElement的都知道 用来解析XML非常的方便,但是对于HTML的格式多样化实在 ...

  9. HTML笔记(七)head相关元素<base> & <meta>

    <head>元素是所有头部元素的容器. 可添加的标签有:<title>.<base>.<link>.<meta>.<script> ...

随机推荐

  1. 【状压dp】Petrozavodsk Winter Training Camp 2018 Day 1: Jagiellonian U Contest, Tuesday, January 30, 2018 Problem E. Guessing Game

    题意:给你n个两两不同的零一串,Alice在其中选定一个,Bob去猜,每次询问某一位是0 or 1.问你最坏情况下最少要猜几次. f(22...2)表示当前状态的最小步数,2表示这位没确定,1表示确定 ...

  2. windows下配置ssh(FreeSSHD + putty)

    windows下配置ssh(FreeSSHD + putty): 1.关于配置过程找到一篇很好的博客,推荐大家先好好看一下,这篇博文解决了大方向问题. 地址:http://blog.csdn.net/ ...

  3. Codeforces Round #222 (Div. 1) C. Captains Mode 状压

    C. Captains Mode 题目连接: http://codeforces.com/contest/377/problem/C Description Kostya is a progamer ...

  4. BZOJ 1588: [HNOI2002]营业额统计 双向链表

    BZOJ 1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 512 MBSubmit: 9619  Solved: 3287 题目连接 ht ...

  5. Python学习笔记(四):字符串的学习

    总结的内容: 1.字符串常用的方法 2.Python字符串格式化 3.Python字符串转义字 字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 创建字符 ...

  6. 回顾下$.ajax()方法参数

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  7. 【scrapy】使用方法概要(一)(转)

    [请初学者作为参考,不建议高手看这个浪费时间] 工作中经常会有这种需求,需要抓取互联网上的数据.笔者就经常遇到这种需求,一般情况下会临时写个抓取程序,但是每次遇到这种需求的时候,都几乎要重头写,特别是 ...

  8. [重要更新][Quartus II][14.1正式版]

    [Quartus II][14.1正式版] ----14.1版本最大的变化就是增加了2大系列的器件库: MAX 10和Arria 10.这2大系列据Altera中国区代理 骏龙科技的人说,就是为了和X ...

  9. Hibernate: Implicit & Explicit Polymorphism

    As I was going through the various inheritance strategies in Hibernate, I came across the ‘class’ el ...

  10. WP8.1 VS iOS VS Android全方面大比拼

    众所周知,苹果的OS和谷歌的Android系统都有着相对成熟的设计和较好的用户体验,而随着WP8.1的发布,微软WP系统在交互方面也有了很多改进和提升,而今天小编便为大家全面对比一下这三大系统.   ...