<!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>
分享到：
相关推荐
2. **事件绑定兼容性写法** 为了确保代码能在不同浏览器中运行，可以采用以下兼容性写法： ```javascript if (element.addEventListener) { element.addEventListener(事件名, 事件函数, isBubble); } else ...
本文将详细讲解JavaScript处理事件绑定的一些兼容性写法，适用于不同的浏览器环境。 首先，让我们看一个基本的事件绑定函数的实现。这个函数`addEvent`接受三个参数：目标对象`obj`，事件类型`type`，以及事件处理...
标题中的“IE8 的兼容性问题总结”表明了本文将主要讨论在开发Web应用时，针对Internet Explorer 8（简称IE8）浏览器所遇到的兼容性挑战。在Web开发领域，尤其是在IE8这样的旧版浏览器上，由于其对现代Web标准支持的...
在IE浏览器中，我们可以通过window.event.srcElement属性来访问事件源，但在Firefox等其他浏览器中，这一属性是不存在的，因此需要寻找兼容性写法。这篇文档便是对window.event.srcElement属性及其兼容性写法的详细...
本文将深入探讨几个JavaScript事件兼容性的关键写法，帮助开发者更好地处理这些问题。 首先，我们来看键盘事件及其`keyCode`属性的兼容性。在JavaScript中，监听键盘事件通常使用`onkeypress`、`onkeydown`或`...
以下就详细汇总了这些常用原生JS的兼容性写法。 ### 一、添加事件监听方法 在DOM2级事件模型中，添加事件监听的方法是`addEventListener`，但在IE8及更早版本的浏览器中，需要使用`attachEvent`方法来添加事件监听...
在JavaScript编程中，IE（Internet Explorer）和FF...通过使用如上的兼容性写法，可以确保代码在不同的浏览器环境下都能正常工作。在实际项目中，还可以利用库如jQuery或Modernizr来进一步简化跨浏览器的兼容性问题。
与其他库的兼容性问题 当项目中同时使用了多个JavaScript库时，可能会出现命名空间冲突的问题。为此，jQuery提供了 `noConflict()` 方法来解决这一问题，示例代码如下： ```javascript $.noConflict(); jQuery...
JavaScript事件绑定机制是JavaScript编程中一个非常重要的概念，它涉及到用户与网页交互时的响应处理。在提供的内容中，展示了三种...在实际开发中，根据项目需求和浏览器兼容性选择合适的事件绑定方式是十分必要的。
如果需要处理事件，建议统一使用W3C标准的事件模型，即通过`addEventListener`注册事件监听器，并通过事件回调函数的参数接收`event`对象。 #### 结语 解决浏览器之间的JS兼容问题是一项重要的技能，它不仅有助于...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它在不同的浏览器和环境中可能存在兼容性问题。以下是一些常见的JavaScript兼容性语法，旨在确保代码在各种浏览器上都能正常工作。 1. **获取CSS样式的...
以下是一些关键的知识点，涉及了JavaScript、DOM操作、事件处理以及浏览器兼容性策略。 1. **跨浏览器JavaScript兼容性**： - 不同浏览器对JavaScript语法的支持程度不同，例如IE低版本不支持`let`和`const`等ES6...
这些属性在不同的浏览器中表现并不一致，因此在开发中经常需要使用一些兼容性写法，来确保脚本能在不同的浏览器环境中正常工作。 另外，`e.preventDefault()`方法在W3C标准和旧版IE浏览器中处理方式存在差异。W3C...
不同浏览器对Fullscreen API的实现可能存在差异，因此在实际开发中，需要使用一些跨浏览器的兼容性写法，例如使用`requestFullScreen`、`webkitRequestFullScreen`、`mozRequestFullScreen`等不同前缀的方法。...
在探讨如何用JavaScript获取页面的高度和宽度时，我们需要考虑不同浏览器间的兼容性问题，特别是像Internet Explorer（IE）、Mozilla Firefox（火狐）和Google Chrome（谷歌）这样的主流浏览器。由于这些浏览器对DOM...
1. **事件对象获取**：这里使用了一种兼容性写法来获取事件对象。`event`参数通常是由浏览器自动传递给事件处理函数的。但是不同的浏览器环境下，这个参数可能有所不同。此代码段通过`event ? event : (window.event...
上述代码片段演示了如何识别和处理特定的键盘热键事件，并通过兼容性写法来确保在不同的浏览器环境下都能正常工作。 为了确保良好的用户体验，开发者需要了解键盘事件模型，熟悉`keydown`、`keyup`和`keypress`等...
综上所述，创建JavaScript插件涉及到封装、命名空间、配置选项、事件处理、DOM操作、公共API设计、模板引擎的使用、JSON数据处理以及兼容性考虑等多个方面。通过这些知识点的组合，你可以构建出强大的、可重用的...
本文将通过一段示例代码来详细解析一种通用的JS事件处理方式，并探讨其在不同浏览器环境下的兼容性问题。 #### 二、示例代码分析 ##### 2.1 HTML结构 ```html <title>test // JS代码 ...