relatedTarget、fromElement、toElement相关元素
2015-12-13 17:52
363 查看
在发生mouseover与mouseout事件时,还会涉及更多元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素的边界之内。对mouseover事件而言,事件主目标是获取光标元素,而相关元素就是那个失去光标的元素。类似的,对于mouseout事件,主目标是失去光标的元素,而相关元素是获得光标的元素。
DOM通过event对象的relatedTraget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值;对于其他事件,它的属性值就为null。IE不支持relatedTarget属性,但是提供了保存同样信息的不同属性。在mouseover事件触发时,IE的fromElement属性中保存了相关元素;当mouseout事件触发时。IE的toElement属性中保存着相关属性值。具体实例如下:
//事件 移入移出
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}
}
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+type,fn);
}
}
addEvent(window,'load',function(){
var box=document.getElementById('box');
addEvent(box,'mouseover',function(evt){
alert(getTarget(evt));
});
});
function getTarget(evt){
var e=evt||window.event;
if(e.srcElement){//IE
if(e.type=='mouseover'){
return e.fromElement.tagName;
}else if(e.type=='mouseout'){
return e.toElement.tagName;
}
}else if(e.relatedTarget){//W3C
return e.relatedTarget;
}
}
DOM通过event对象的relatedTraget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值;对于其他事件,它的属性值就为null。IE不支持relatedTarget属性,但是提供了保存同样信息的不同属性。在mouseover事件触发时,IE的fromElement属性中保存了相关元素;当mouseout事件触发时。IE的toElement属性中保存着相关属性值。具体实例如下:
//事件 移入移出
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}
}
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+type,fn);
}
}
addEvent(window,'load',function(){
var box=document.getElementById('box');
addEvent(box,'mouseover',function(evt){
alert(getTarget(evt));
});
});
function getTarget(evt){
var e=evt||window.event;
if(e.srcElement){//IE
if(e.type=='mouseover'){
return e.fromElement.tagName;
}else if(e.type=='mouseout'){
return e.toElement.tagName;
}
}else if(e.relatedTarget){//W3C
return e.relatedTarget;
}
}
相关文章推荐
- windbg基本知识和常用命令
- java中PriorityQueue优先级队列的使用
- 重温一下基本数据类型以及自动提升数据类型的问题
- 第三周项目2-建设“顺序表”算法库
- 数据结构实验3(图的DFS和BFS实现)
- 10015---JavaScript--表单验证
- cocos2d-x 面试题
- mybatis批量操作
- Cocos2d-JS的屏幕适配方案
- Java Nio 三、Java NIO Channel
- Jsp中如何使用Ckeditor富文本编译器以及实现上传文件的功能
- 【批量添加】-拼接sql字符串
- Kettle连接Mysql数据库异常
- 支持向量机通俗导论(理解SVM的三层境界)
- 第七章 基于MVC的应用程序
- 二叉树的构建及各种遍历方式
- POJ 3669 Meteor Shower【BFS + 预处理】
- Apache 的 httpd.conf 详解
- 子树判断
- i++与++i的区别