IE与标准DOM的兼容之javascript事件监听

事件监听



通用添加事件监听的方式，也是最常用的：即在HTML
的标签中直接就分配事件处理函数。如

<
p
onclick
="pClick1">
Click
Me</
p
>

<
p
onclick
="alert('

您点击了我');">

Click Me</
p
>

IE
中：添加和删除监听函数，即attachEvent()
和detachEvent(),
接受两个参数，即事件名称，要分配的函数名。事件处理顺序是pClick2
，然后再pClick1;

<
script
type
="text/javascript"
language
="javascript">

function
pClick1() {

alert("

我被1
点击了！"

);

}

function
pClick2() {

alert("

我被2
点击了！"

);

}

var
myP;

window.onload = function
() {

myP =
document.getElementById("para"
);

myP.addEventListener("onclick"
, pClick1, false
);

myP.addEventListener("onclick"
,pClick2,false
);

}

</
script
>

标准Dom:
添加和删除监听函数，即addEventListener
（）和removeEventListener()
。与IE
不同的是它接受三个参数，即事件名称，要分配的函数名和是用于冒泡阶段还是捕获阶段。第三个参数如果是捕获阶段则为true,
否则为false
。事件处理顺序是，先pClick1,
然后pClick2
，这点与IE
是不同的。

<
script
type
="text/javascript"
language
="javascript">

function
pClick1() {

alert("

我被1
点击了！"

);

}

function
pClick2() {

alert("

我被2
点击了！"

);

}

var
myP;

window.onload = function
() {

myP = document.getElementById("para"
);

myP.addEventListener("click"
, pClick1, false
);

myP.addEventListener("click"
,pClick2,false
);

}

</
script
>

IE
浏览器与标准
Dom
浏览器在获取事件对象上也存在差别

在
IE
浏览器中事件对象是
Window
对象的一个属性
event,
访问时通常采用如下方法

oImg.onclick = function
(){

var oEvent=window.event;

}

而标准的
Dom
中规定
event
对象必须作为唯一的参数传给事件处理对象，因此在类似
Firefox
浏览器中访问事件对象通常将其作为参数，代码如下：

oImg.onclick = function
(oEvent){}

所以为了兼容两者，通常采用下面的方式：

oImg.onclick = function
(oEvent){

if
(window.event)

oEvent =
window.event;

}

如下列中，使用的是兼容的方式。

<
html
xmlns
="http://www.w3.org/1999/xhtml">

<
head
runat
="server">

<
title
></
title
>

<
script
type
="text/javascript"
language
="javascript">

function
handle(oEvent) {

var
oDiv = document.getElementById("display"
);

if
(window.event)

oEvent =
window.event;

if
(oEvent.type == "click"
)

oDiv.innerHTML += "

你点击了图片  "

;

else
if
(oEvent.type == "mouseover"
)
{

oDiv.innerHTML += "

你移动到了图片上  "

;

}

}

window.onload = function
() {

var
oImg = document.getElementsByTagName("img"
)[0];

oImg.onclick = handle;

oImg.onmouseover =
handle;

}

</
script
>

</
head
>

<
body
>

<
div
>

<
img
src
="images/2.jpg"
border
="0"
/>

<
div
id
="display"></
div
>

</
div
>

</
body
>

</
html
>