event對象在IE和firefox下表現是不同的。在IE下，event是window對象的一個屬性，是在全局作用域下的，而在firefox里，event對象是做為事件的參數存在的：

===========================

<input type="button" id="btn" value="click me" />

<script type="text/javascript">

document.getElementById("btn").onclick = function(){

???? alert(arguments.length);

};

</script>

===========================

這代代碼在IE下彈出0，而在firefox下彈出1。在firefox下這個參數就是event對象了。

如果在標簽內聯事件中觸發事件會如何呢？

===========================

<input type="button" id="btn" value="click me" onclick = "handler();" />

<script type="text/javascript">

function handler(){

???? alert(arguments.length);

};

</script>

===========================

在IE和firefox下，這段代碼彈出的都是0.也就是說，標簽內聯事件并沒有被替換成

===========================

btn.onclick = handler;

function handler(){

alert(arguments.length);

}

===========================

而是替換成了

===========================

btn.onclick = function(){

???? handler();

}

function handler(){

alert(arguments.length);

}

===========================

在標簽內聯事件中，我們使用arguments[0]可以在firefox下訪問到event對象。

===========================

<input type="button" id="btn" value="click me" onclick = "alert(arguments[0].type)" />

===========================

因為不使用標簽內聯事件的話，我們可以給處理函數傳參，從而指定arguments[0]的變量名，通常情況下，我們平時也的確是這么處理的：

===========================

<input type="button" id="btn" value="click me" />

<script type="text/javascript">

document.getElementById("btn").onclick = function(e){

???? e = window.event || e;???????????????????? //e兼容IE和firefox，指向event對象

};

</script>

===========================

在標簽內聯事件中我們沒辦法指定參數名，是不是就沒辦法直接寫個變量在IE和firefox下兼容地指event對象呢？不是的，可以用“event”這個變量名兼容地指向event對象，注意，只能是“event”，如果是“a”，“b”，“Event”之類的全都不行。可能是因為考慮到標簽內聯事件中無法指定參數變量名，所以故意留個了“event”這個關鍵字吧。

===========================

<input type="button" id="btn" value="click me" οnclick="alert(event.type);" />

===========================

這段代碼在IE和firefox下都可以正常地彈出“click”。

有趣的是，標簽內聯事件中我們甚至可以寫注釋，可以使用字符串：

===========================

//只彈出1

<input type="button" id="btn" value="click me" οnclick="alert(1);//alert(2);alert(3);" />

//彈出1和3

<input type="button" id="btn" value="click me" οnclick="alert(1);/*alert(2);*/alert(3);" />

//彈出“string”

<input type="button" id="btn" value="click me" οnclick="var a='abc';alert(typeof a);"/>

===========================

如果我們既用標簽內聯事件綁定了事件，又用DomNode.onxxxx綁定了事件，又會如何呢？

===========================

<input type="button" id="btn" value="click me" οnclick="alert(123);" />

<script type="text/javascript">

document.getElementById("btn").onclick = function(){

???? alert(456);

};

</script>

===========================

會如何呢？會彈出456，不彈出123。相當于

===========================

<input type="button" id="btn" value="click me" />

<script type="text/javascript">

document.getElementById("btn").onclick = function(){

???? alert(123);

};

document.getElementById("btn").onclick = function(){

???? alert(456);

};

</script>

===========================

后面的處理函數把前面的處理函數覆蓋掉了。如果我們給DomNode是通過attachEvent和addEventListener來綁定事件的呢？

===========================

<input type="button" id="btn" value="click me" οnclick="alert(123);" />

<script type="text/javascript">

function handler(){

alert(456);

}

if(document.all){

btn.attachEvent("onclick",handler);

} else {

btn.addEventListener("click",handler,false);

}

</script>

===========================

很順利地，先彈出了123，后又彈出了456。

轉載于:https://www.cnblogs.com/cly84920/archive/2009/11/22/4426919.html

總結

以上是生活随笔為你收集整理的标签内联事件和event对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。