javascript事件

最新推荐文章于 2023-10-15 22:56:02 发布

jhlovett

最新推荐文章于 2023-10-15 22:56:02 发布

阅读量85

点赞数

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

Javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

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


<script type="text/javascript">
/*事件监听:监听函数*/
/*用这种方式可以获得比较好的兼容性,能够保证当点击P标记时,IE和FireFox同时响应用户的点击事件*/
/*该方式只能给P标记添加单一的事件,并且不能将事件删除*/
window.οnlοad=function(){
	 var op=document.getElementById("myP");//找到对象
	 op.οnclick=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.οnlοad=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.οnlοad=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.οnclick=function(){
	var oEvet=window.event;	
}
2.标准DOM中规定event对象必须作为唯一的参数传给事件处理函数如:
oP.οnclick=function(oEvent){
	//.....	
}
因此为了兼容两种浏览器,通常采用下面的方法:
oP.οnclick=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.οnlοad=function(){
	var img=document.getElementsByTagName("img")[0];
	img.οnclick=handle;
	img.οnmοuseοver=handle;
}
</script>
</head>
<body>
<img id="img1"  src="file:///D|/我的文档/My Pictures/1_yylklshmyt20090217.jpg"/>
<div id="display"></div>
</div>
</body>
</html>

jhlovett

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript事件

&lt;script type="text/javascript"&gt;/*事件流分两种:1.冒泡型事件,2.捕获型事件,很可惜的是IE浏览器不支持捕获型事件(不做演示)*/function add(sText){ odiv=document.getElementById("display"); odiv.innerHTML+=sText;}&lt;/script&gt;...
复制链接

扫一扫

专栏目录