IE 与火狐下Even 事件不兼容使用小结
IE 与火狐下Even 事件不兼容使用小结
在javascript中，我们要常常用到event对象来处理一些事件，但是IE和Firefox下event对象的属性是不同的。
1.keyCode||which||charCode
IE下支持keyCode，不支持which，charCode。
Firefox下支持keyCode，除功能键外，其他键值始终为0，Firefox下支持which和charCode属性
要获取兼容IE和Firefox的键值，有如下方法：
在函数调用时传递event
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g t;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Demo</title>
<script type="text/javascript">
function test_event(e){
var e=e||event;
currKey=e.keyCode||e.which||e.charCode;
document.getElementById("key").value = currKey;
}
</script>
</head>
<body>
<input type="text" onkeyup="test_event(event)"/>
<input type="text" id="key">
</body>
</html>
在函数调用时不传递event
<!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=gb2312" />
<title>Demo</title>
<script type="text/javascript">
function test_event(e){
var e=arguments.callee.caller.arguments[0]||event;
currKey=e.keyCode||e.which||e.charCode;
document.getElementById("key").value = currKey;
}
</script>
</head>
<body>
<input type="text" onkeyup="test_event()"/>
<input type="text" id="key">
</body>
</html>
<!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=gb2312" /> <title>Demo</title> <mce:script type="text/javascript"><!-- function test_event(e){ var e=e||event; currKey=e.keyCode||e.which||e.charCode; document.getElementById("key").value = currKey; } // --></mce:script> </head> <body> <input type="text" onkeyup="test_event(event)"/> <input type="text" id="key"> </body> </html>
2.event.srcElement||event.target
在IE下，event对象有srcElement属性，没有target属性。在火狐下，event对象有target属性，没有srcElement属性
解决办法很简单：
<!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>
<title>Demo</title>
<style type="text/css">
.focus
{}{
color: Red;
}
</style>
<script type="text/javascript">
function test_event(event) {
var evt = event.srcElement || event.target;
evt.className = "focus";
}
</script>
</head>
<body>
<input type="text" id="text1" value="text1" onfocus = "test_event(event)"/>
<input type="text" id="text2" value="text2" onfocus = "test_event(event)"/>
<input type="text" id="text3" value="text3" onfocus = "test_event(event)"/>
</body>
</html>
<!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> <title>Demo</title> <mce:style type="text/css"><!-- .focus { color: Red; } --></mce:style><style type="text/css" mce_bogus="1"><!-- .focus { color: Red; } --></style> <mce:script type="text/javascript"><!-- function test_event(event) { var evt = event.srcElement || event.target; evt.className = "focus"; } // --></mce:script> </head> <body> <input type="text" id="text1" value="text1" onfocus = "test_event(event)"/> <input type="text" id="text2" value="text2" onfocus = "test_event(event)"/> <input type="text" id="text3" value="text3" onfocus = "test_event(event)"/> </body> </html>
3.event.x,event.y||event.pageX,event.pageY
IE下event对象有event.x,event.y属性，而Firefox下没有。Firefox下有event.pageX,event.PageY属性，而IE下没有。解决办法：
var mx = event.x?event.x:event.pageX;
4.attachEvent()||addEventListener()
IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。
attachEvent("eventType",fun)
eventType是指事件类型,fun是指调用事件的函数
addEventListener("eventType",fun,flag)
addEventListener方法的前两个参数和attachEvent方法一样，flag参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说，第三个参数应该为false（假）。
<!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>
<title>Demo</title>
<script type="text/javascript">
function test() {
var str = "为了兼容IE和Firefox，就要多写代码！";
alert(str);
}
function test_event() {
var obj = document.getElementById("btn");
if (document.all) {
obj.attachEvent("onclick", test);
}
//注意两个方法的第一个参数，一个是"onclick",一个是"click"
else {
obj.addEventListener("click", test, false);
}
}
window.onload = test_event;
</script>
</head>
<body>
<input type="button" value="测试按钮" id="btn" />
</body>
</html>
<!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> <title>Demo</title> <mce:script type="text/javascript"><!-- function test() { var str = "为了兼容IE和Firefox，就要多写代码！"; alert(str); } function test_event() { var obj = document.getElementById("btn"); if (document.all) { obj.attachEvent("onclick", test); } //注意两个方法的第一个参数，一个是"onclick",一个是"click" else { obj.addEventListener("click", test, false); } } window.onload = test_event; // --></mce:script> </head> <body> <input type="button" value="测试按钮" id="btn" /> </body> </html>
我所知道的常用的event属性或方法就是上面那4条。上面的东西虽然不复杂，但是我会经常遗忘，jQuery则帮我们很好的解决了这些问题，我们通过jQuery无需再去判断浏览器是否支持某某属性，某某方法。
首先看看jQuery对象有哪些属性和方法
下面是jQuery事件对象可以在扩浏览器支持的属性:
属性名称 描述 举例
type 事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. $("a").click(function(event) { alert(event.type);});
target 获取事件触发者DOM对象 $("a[href=http://google.com]").click(function(event) { alert(event.target.href);});
data 事件调用时传入额外参数. $("a").each(function(i) { $(this).bind(‘click‘, {index:i}, function(e){ alert(‘my index is ‘ + e.data.index); });});
relatedTarget 对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 $("a").mouseout(function(event) { alert(event.relatedTarget);});
currentTarget 冒泡前的当前触发事件的DOM对象, 等同于this. $("p").click(function(event) { alert( event.currentTarget.nodeName );});
结果:P
pageX/Y 鼠标事件中, 事件相对于页面原点的水平/垂直坐标. $("a").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY );});
result 上一个事件处理函数返回的值 $("p").click(function(event) { return "hey"});$("p").click(function(event) { alert( event.result );});
结果:"hey"
timeStamp 事件发生时的时间戳. var last;$("p").click(function(event) { if( last ) alert( "time since last event " + event.timeStamp - last ); last = event.timeStamp;});
名称 说明 举例
preventDefault() 取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换. $("a").click(function(event){ event.preventDefault(); // do something});
isDefaultPrevented() 是否调用过
preventDefault()
方法 $("a").click(function(event){ alert( event.isDefaultPrevented() ); event.preventDefault(); alert( event.isDefaultPrevented() );});
stopPropagation() 取消事件冒泡 $("p").click(function(event){ event.stopPropagation(); // do something});
isPropagationStopped() 是否调用过
stopPropagation()
方法 $("p").click(function(event){ alert( event.isPropagationStopped() ); event.stopPropagation(); alert( event.isPropagationStopped() );});
stopImmediatePropagation() 取消执行其他的事件处理函数并取消事件冒泡.
如 果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数. $("p").click(function(event){ event.stopImmediatePropagation();});$("p").click(function(event){ // This function won‘t be executed});
isImmediatePropagationStopped() 是否调用过
stopImmediatePropagation()
方法 $("p").click(function(event){ alert( event.isImmediatePropagationStopped() ); event.stopImmediatePropagation(); alert( event.isImmediatePropagationStopped() );});
这些函数中 stopPropagation() 是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.
转自：http://hi.baidu.com/happygmq/blog/item/d83f725091b9cc2f42a75baa.html