事件监听
通用添加事件监听的方式,也是最常用的:即在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 >