<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>attachEvent Test</title>
<style type="text/css">
html,body
{
padding:0px;margin:0px;
font-family: "宋体";color: #4b4b4;background-color: #fff;
height:100%;text-align: center;
}
</style>
</head>
<body>
<br />
<div style="width:100%;height:200px;border:1px solid #ccc;">
<div id="top_mycoomix_div" style="display:block;border:1px solid #ccc;">
attachEvent test
</div>
</div>
<script type="text/javascript">
//方法一
Object.prototype.attachEvent = function(method,func)
{
//alert(this);//[object HTMLBodyElement]
if(!this[method]){
this[method]=func;
}
else{
this[method]=this[method].attach(func);
}
}
Function.prototype.attach=function(func){
var f=this;
return function(){
f();
func();
}
}
function hiddenTopMycoomix()
{
alert("into hiddenTopMycoomix function");
document.getElementById("top_mycoomix_div").style.display = "none";
}
//监听document.body必须设置body的样式height:100%;点击页面才能达到预期效果，否则只能在可见区域点击才有效.
//监听document则不存在这个问题
//不标准的调用方式
//window.document.body.attachEvent("onclick",function(){hiddenTopMycoomix();});
//window.document.body.attachEvent("onclick",hiddenTopMycoomix);
</script>
<script type="text/javascript">
//方法二
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
//封装后统一的调用方式
//addListener(document.body,"click",hiddenTopMycoomix);
</script>
<script type="text/javascript">
//方法三
//引入用到的coos脚本库部分，实际应用中不在页面上而采用导入js文件的方式
var coos = function(){this.version = "1.0";};
coos.$id = function(id)
{
return document.getElementById(id);
};
coos.$obj = function(el)
{
var obj = el;
if(typeof(el) == "string")
{
obj = document.getElementById(el);
}
return obj;
};
coos.event = function(e)
{
var e = e || window.event;
return e;
};
coos.event.format = function(e)
{
var e = e || window.event;
try
{
if(!e.pageX && e.clientX)//firefox3 nonsupport pageX
{
e.pageX = e.clientX + document.body.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
}
}
catch(e){}
if(window.event)
{
e.charCode = (e.type == "keypress") ? e.keyCode : 0;
e.eventPhase = 2;
e.isChar = (e.charCode > 0);
e.preventDefault = function ()
{
this.returnValue = false;
};
if(e.type == "mouseout")
{
e.relatedTarget = e.toElement;
}
else if(e.type == "mouseover")
{
e.relatedTarget = e.formElement;
}
e.stopPropagation = function ()
{
this.cancelBubble = true;
};
e.target = e.srcElement;
e.time = (new Date()).getTime();
}
try
{
if (e.target.nodeType == 3)
{// defeat Safari bug
e.target = e.target.parentNode;
}
//如果不存在keyCode属性，同时存在which属性则赋值,因为该属性为只读属性(has only a getter)
if(!e.keyCode && e.which)
{
e.keyCode = e.which;
}
}
catch(e){}
return e;
};
coos.event.add = function(el,EventType,callback)
{
var obj = coos.$obj(el);
if(obj.addEventListener)
{
obj.addEventListener(EventType,callback,false);
}
else if(obj.attachEvent)
{
obj.attachEvent('on'+EventType,callback);
}
else
{
obj['on'+EventType] = callback;
}
};
//方便页面加载完成后执行方法的接口
coos.onloadEvent = function(fn)
{
if (window.addEventListener)
{
window.addEventListener("load",fn,false);
}
else if(window.attachEvent)
{
window.attachEvent("onload", fn);
}
else
{
window.onload = fn;
}
};
//以下为实现代码部分
var coomixTimeout = null;
function hiddenTopMycoomix2(e)
{
var obj = coos.$id("top_mycoomix_div");
if(!obj){return;}
var e = coos.event.format(e);
coomixTimeout = setTimeout(function(){obj.style.display = "none";},100);
if(e.target == obj)
{
clearTimeout(coomixTimeout);
}
}
coos.event.add(document,"click",hiddenTopMycoomix2);
//在DOM元素加载完成前的实现代码，需要在页面元素加载完成后执行,一般情况下在window.onload后执行
coos.onloadEvent(function(){
var obj = coos.$id("testDom");
obj.innerHTML = obj.innerHTML + "<br />after set value";
setTimeout(function(){obj.style.display = "none";},500);
});
</script>
<div id="testDom">testDom</div>
</body>
</html>
分享到：
相关推荐
//[removed] = function() {//为了保证兼容性，这里取两个值，哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } ...
本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考，具体如下： 方式一：(适用于IE浏览器，而且刷新不提示，只在点击浏览器关闭按钮的时候提示) [removed] [removed]=onclose; function ...
监听滚轮事件: $(document).ready(function(){ // javascript行为层 var bannerH=$(".div_last").offset().top; 获取指定元素到容器最顶部的高度 $(window).scroll(function(){ // 当页面滚动条变化时，执行的...
js 某个页面监听事件渲染完毕的时间 JavaScript页面渲染完毕时间监听是前端开发中一个非常常见的场景。主要目的是监听页面渲染完毕的时间，从而进行一些相关操作，如加载页面数据、初始化组件等。适用人群主要是前端...
自己整理的javascript document事件，可以当手册使用。需要的时候查一查。
档模式在开发中貌似很少用到，最常见的是就是在获取页面宽高的时候，比如文档宽高，可见区域宽高等。
提出一种结合DOM（Document Object Model）结构分析和页面元素（Screen Element）的计算机视觉分析方法，实现Web应用的跨浏览器兼容性测试XBCT（Cross-Browser Compatibility Testing），和现有的测试方法比较，实验...
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&...
javascript的IE和Firefox兼容性汇编 1. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行 (2)解决方法： 改用 document.formName....
8. document.formName.item(”itemName”) 问题 3 9. 集合类对象问题 3 10. 自定义属性问题 3 11. input.type属性问题 3 12. event.srcElement问题 3 13. body载入问题 3 14. 事件委托方法 3 15. Table操作...
HTML Document HTML DocumentHTML DocumentHTML Document
在写网页的时候，常常需要监听键盘事件，让我们来看看如何实现吧。 监听方式 键盘事件往往是全局监听，设监听的函数为keyboard()。 keyup事件类型。该类型触发条件为按键按下去并松开。 //长按并松开只触发一次 ...
1、监听全局键盘按下事件，例如监听全局回车事件 $(document).keydown(function(event){ if(event.keyCode == 13){ alert('你按下了Enter'); } }); 2、监听某个组件键盘按下事件，例如监听id为btn的...
在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时，自动加载更多的时候有这个需求。 我认为使用document.addEventListener会破坏...
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the...
本文实例分析了jQuery解决浏览器兼容性问题的方法。分享给大家供大家参考，具体如下： 问题: 当用户在名为abc的input控件按下回车键时,触发另一控件imgLogin的click事件 在IE 中 document.getElementById(‘abc’)....
//横竖屏事件监听方法 function screenOrientationListener(){ try{ var iw = window.innerWidth; //屏幕方向改变处理 if(iw != innerWidthTmp){ if(iw>window.innerHeight)orientation = 90; else ...
Document Manager 7.0 包括了改善可用性、管理和有用性的功能增强。 可用性增强 • 扩展的 Notes 电子邮件集成 -- 桌面激活器用户可以直接把 Lotus Notes e-mail 内容、文件附件和标题信息移动到 Document Manager...
为了确保Android应用能够在所有兼容Android的设备上正确运行，并且保持相似的用户体验，在每个版本发布之时，Android提供了一套兼容性测试...并附带有相关的兼容性标准文档（Compatibility Definition Document,CDD）。