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

最新推荐文章于 2022-05-25 14:30:53 发布

iteye_137

最新推荐文章于 2022-05-25 14:30:53 发布

阅读量189

点赞数

分类专栏： JavaScript 文章标签： JavaScript IE 浏览器 JSP HTML ViewUI

本文链接：https://blog.csdn.net/iteye_137/article/details/81819874

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

<html>
<title></title>
<head>
<script type="text/javascript">
	function clickme(){
		alert(88);
	}
</script>
</head>
<body>
	<div id="click" οnclick="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 οnlοad="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>

iteye_137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom的“事件类型”和“事件监听”

代码一：普通的写法(简单写法)&lt;html&gt;&lt;title&gt;&lt;/title&gt;&lt;head&gt;&lt;script type="text/javascript"&gt; function clickme(){ alert(88); }&lt;/script&gt;&lt;/head&gt;&
复制链接

扫一扫