javascript事件

jhlovett

浏览: 618096 次
性别:
来自: 卡哇伊

最近访客更多访客>>

vcmasm

成长的菜鸟

zaweze

wwwxxxttt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

JavaScript IE 浏览器 Firefox HTML

<script type="text/javascript">
/*事件流分两种:1.冒泡型事件,2.捕获型事件,很可惜的是IE浏览器不支持捕获型事件(不做演示)*/
function add(sText){
	odiv=document.getElementById("display");
	odiv.innerHTML+=sText;
}
</script>
</head>
<!--当点击P标记或者点击div标记或者点击body标记时,display块将会显示传入的参数-->
<body onclick="add('body<br>')">
<div onclick="add('div<br>')">
<p onclick="add('p<br>')">Click Me</p>
</div>
<div id="display"></div>
</body>
</html>


<script type="text/javascript">
/*事件监听:监听函数*/
/*用这种方式可以获得比较好的兼容性,能够保证当点击P标记时,IE和FireFox同时响应用户的点击事件*/
/*该方式只能给P标记添加单一的事件,并且不能将事件删除*/
window.onload=function(){
	 var op=document.getElementById("myP");//找到对象
	 op.onclick=function(){//设置事件监听函数
	 	alert("你被点击了!");
	 }
}

</script>
</head>
<!--当点击P标记或者点击div标记或者点击body标记时,display块将会显示传入的参数-->
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>


<script type="text/javascript">
/*事件监听:监听函数*/
/*对于IE和标准的DOM,javascript分别提供了不同的方法对事件进行监听*/
/*在IE浏览器中对事件监听的方法*/
/*这种方式在FireFox中没有任何的响应*/
/*IE是一种比较独特的浏览器,它区别于其他标准DOM的浏览器*/
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>


<script type="text/javascript">
/*事件监听:监听函数*/
/*标准DOM的浏览器,如FireFox的事件监听*/
/*只在标准DOM浏览器中有效如:FireFox*/
function fnClick1(){
	alert("你点击了fnClick1");
	oP.removeEventListener("click",fnClick1,false);//删除监听函数2
}

function fnClick2(){
	alert("你点击了fnClick2");
	oP.removeEventListener("click",fnClick2,false)
}

var oP;
window.onload=function(){
	oP=document.getElementById("myP");
	//注意：这里用的是click而不是onclick.
	//最后一个参数为false的意思是代表使用的是冒泡型事件而不是捕获型事件.
	oP.addEventListener("click",fnClick1,false);//添加监听函数.
	oP.addEventListener("click",fnClick2,false);
}

/*可以直接看出不管是IE的attachEvent还是标准DOM的addEventListener,可以为同一个标记的事件添加多个监听函数.
这是通用方法中所不能做到的.*/

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

/*从刚才所举的三个例子中,对于事件监听不同浏览器的兼容性非常的差,如果需要对次操作需要做对浏览器的兼容性判断*/


<script type="text/javascript">
/*事件对象*/
/*除了监听以外,浏览器还提供了事件对象,让我们很细节的操纵对象的各种属性,以及实用方法*/
/*同样令人头疼的是IE浏览器和标准的DOM浏览器之间的兼容性也非常的差:
1.IE浏览器中事件对象是window对象的一个属性event如:
oP.onclick=function(){
	var oEvet=window.event;	
}
2.标准DOM中规定event对象必须作为唯一的参数传给事件处理函数如:
oP.onclick=function(oEvent){
	//.....	
}
因此为了兼容两种浏览器,通常采用下面的方法:
oP.onclick=function(oEvent){
	//这里判断一下浏览器,如果window.event是存在的那么就将window.event赋给oEvent,
	//否则使用标准DOM使用唯一的参数传给事件处理函数
	if(window.event){
	oEvent=window.event;
	}
}
*/

/*事件类型:对于各种事件有非常多的类型,下面通过实力来说明问题*/
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 img=document.getElementsByTagName("img")[0];
	img.onclick=handle;
	img.onmouseover=handle;
}
</script>
</head>
<body>
<img id="img1"  src="file:///D|/我的文档/My Pictures/1_yylklshmyt20090217.jpg"/>
<div id="display"></div>
</div>
</body>
</html>

分享到：

CustomValidator控件验证dropdownList和Co ... | DOM的一些小示例

2009-07-27 23:07
浏览 957
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript事件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript事件

评论

发表评论

相关推荐

简单选项卡制作方式

字体放大效果，字体[大][中][小]

JS中保留两位小数

JS中String,Date,Math常用函数

eval，confirm,alert,prompt函数

从零开始学习jQuery(剧场版) 你必须知道的javascript

深入浅出JSON

数据类型和Json格式

防止网页被嵌入框架的代码

学习javascrip闭包 (closure)

花点时间搞清top、postop、scrolltop、scrollHeight、offsetHeight

document.write()和document.writeln()的区别

几个常用的小函数(检查是否为数字,否为电话号码,num是否是负数,检查是否为日期...)

为什么二月的天数比其他月少？

iframe自适应高度

document.body和document.documentElement的区别

从父页面读取和操作iframe中内容方法

JsTAB选项卡示例集合(二)

Js Tab选项卡示例集合

Js事件列表

最近访客更多访客>>