Dom的“事件类型”和“事件监听”

duyunfengsolo

浏览: 1053605 次
性别:
来自: 广州

最近访客更多访客>>

Carsymor

muyuan

qq705570553

邱理军

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript IE 浏览器 JSP HTML

代码一：普通的写法(简单写法)

<html>
<title></title>
<head>
<script type="text/javascript">
	function clickme(){
		alert(88);
	}
</script>
</head>
<body>
	<div id="click" onclick="javascript:clickme();">click me</div>
</body>
</html>

代码二：有时候可以解决跨浏览器的写法(要掌握这种写法的思想)。这种写法叫“事件的监听”。

<html>
<title></title>
<head>
<script type="text/javascript">
	window.onload = function(){
		var obj = document.getElementById("click");
		obj.onclick = function(){
			alert(55);
		}
	}
</script>
</head>
<body>
	<div id="click">click me</div>
</body>
</html>

这里的window.onload表示页面加载的时候来调用，这种写法相当于在body里面加入<body onload="javascript:clickme();" ></body>，但是上面的window.onload适合于没有<body>标签的情况。比如JSP页面中的top.jsp或者bottom.jsp等等。

Dom的“事件监听”：

上面的那个“事件监听”的写法非常单一，它只能给<div>标签添加一个“事件监听”，而不能添加多个“事件监听”。下面介绍的两种方法都可以添加多个“事件监听”。

1. 只适合于IE浏览器的“事件监听”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE的监听函数</title>
<script language="javascript">
function fnClick(){
	alert("我被点击了");
	oP.detachEvent("onclick",fnClick);		//点击了一次后删除监听函数
}
var oP;
window.onload = function(){
	oP = document.getElementById("myP");	//找到对象
	oP.attachEvent("onclick",fnClick);		//添加监听函数
}
</script>
</head>

<body>
	<div>
		<p id="myP">Click Me</p>
	</div>
</body>
</html>

2.适合于所有的浏览器的"事件监听"。
下面函数中的"false"表示：“冒泡型事件”而不是“捕获型事件”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>标准DOM的事件监听</title>
<script language="javascript">
function fnClick1(){
	alert("我被fnClick1点击了");
	//oP.removeEventListener("click",fnClick2,false);		//删除监听函数2
}
function fnClick2(){
	alert("我被fnClick2点击了");
}
var oP;
window.onload = function(){
	oP = document.getElementById("myP");	//找到对象
	oP.addEventListener("click",fnClick1,false);		//添加监听函数1
	oP.addEventListener("click",fnClick2,false);		//添加监听函数2
}
</script>
</head>

<body>
	<div>
		<p id="myP">Click Me</p>
	</div>
</body>
</html>

Dom的“事件类型”：

IE浏览器的事件对象是window对象的一个属性event。

op.onclick = function(){

var oEvent = window.event;

}

而Dom中规定event对象必须作为唯一的参数传递给事件处理函数。

op.onclick = function(oEvent){

//....

}

所以为了解决浏览器的兼容问题：采用如下方法：

op.onclick = function(oEvent){

if(window.event) oEvent = window.event;

}

例子如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>事件的类型</title>
<script language="javascript">
function handle(oEvent){
	var oDiv = document.getElementById("display");
	if(window.event) oEvent = window.event;		//处理兼容性，获得事件对象
	if(oEvent.type == "click")					//检测事件名称
		oDiv.innerHTML += "你点击了我&nbsp&nbsp;";
	else if( oEvent.type == "mouseover")
		oDiv.innerHTML += "你移动到我上方了&nbsp&nbsp;";
		
}
window.onload = function(){
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onclick = handle;
	oImg.onmouseover = handle;
}
</script>
</head>

<body>
	<img src="01.jpg" border="0">
    <div id="display"></div>
</body>
</html>

分享到：

oracle.toplink.essentials.exceptions.Des ... | JS如何关闭flash代码

2010-01-22 15:21
浏览 4443
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论