`

javascript事件

JavaScriptIE浏览器FirefoxHTML 
阅读更多 
<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>

 

分享到：
| DOM的一些小示例
评论
发表评论

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

相关推荐

    第三章 JavaScript事件

    了解 JavaScript 事件是非常重要的，掌握事件流、事件冒泡、事件捕获和 DOM 事件流，以及事件处理程序的知识点，可以帮助我们更好地理解和使用 JavaScript 事件，提高 WEB 程序员的开发效率和质量。

    JavaScript事件机制详细研究

    JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件，例如点击、鼠标悬停、键盘输入等，JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...

    使用webview加载本地html页面,并处理html页面中的javascript事件

    接下来，为了使WebView能够执行JavaScript代码并处理JavaScript事件，我们需要启用JavaScript支持。我们可以调用`WebSettings`类的`setJavaScriptEnabled()`方法： ```java WebSettings settings = webView....

    JavaScript 事件处理 事件绑定 示例代码

    事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...

    JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码

    JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例...

    javascript事件详解

    JavaScript事件详解 JavaScript是一种基于浏览器的脚本语言，它的事件机制是实现动态交互的重要部分。在JavaScript中，事件是用户或浏览器对网页进行操作时触发的特定动作，比如点击按钮、鼠标移动等。本文将详细...

Magicbox
Global site tag (gtag.js) - Google Analytics