`

javascript事件

javascript 
阅读更多 
<!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 add(sText){
	var oDiv = document.getElementById("display");
	oDiv.innerHTML += sText;	//输出点击顺序
}
</script>
</head>

<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>




<!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">
window.onload = function(){
	var oP = document.getElementById("myP");	//找到对象
	oP.onclick = function(){					//设置事件监听函数
		alert('我被点击了');
	}
}
</script>
</head>

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



<!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>



<!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 fnClick1(){
	alert("我被fnClick1点击了");
}
function fnClick2(){
	alert("我被fnClick2点击了");
	//oP.detachEvent("onclick",fnClick1);		//删除监听函数1
}
var oP;
window.onload = function(){
	oP = document.getElementById("myP");	//找到对象
	oP.attachEvent("onclick",fnClick1);		//添加监听函数1
	oP.attachEvent("onclick",fnClick2);		//添加监听函数2
}
</script>
</head>

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



<!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>



<!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>



<!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){
	if(window.event) oEvent = window.event;		//处理兼容性，获得事件对象
	var oTarget;
	if(oEvent.srcElement)				//处理兼容性，获取事件目标
		oTarget = oEvent.srcElement;
	else
		oTarget = oEvent.target;
	alert(oTarget.tagName);				//弹出目标的标记名称		
}
window.onload = function(){
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onclick = handle;
}
</script>
</head>

<body>
	<img src="02.jpg" border="0">
</body>
</html>



<!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){
	if(window.event) oEvent = window.event;		//处理兼容性，获得事件对象
	var oDiv = document.getElementById("display");
	oDiv.innerHTML += oEvent.type + "<br>";		//输出事件名称
}
window.onload = function(){
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onmousedown = handle;	//将鼠标事件除了mousemove外都监听
	oImg.onmouseup = handle;
	oImg.onmouseover = handle;
	oImg.onmouseout = handle;
	oImg.onclick = handle;
	oImg.ondblclick = handle;
}
</script>
</head>

<body>
	<img src="03.jpg" border="0" style="float:left; padding:0px 8px 0px 0px;">
    <div id="display"></div>
</body>
</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>button属性</title>
<script language="javascript">
function TestClick(oEvent){
	var oDiv = document.getElementById("display");
	if(window.event)
		oEvent = window.event;
	oDiv.innerHTML += oEvent.button;	//输出button的值
}
document.onmousedown = TestClick;
window.onload = TestClick;	//测试未按下任何键
</script>
</head>

<body>
<div id="display"></div>
</body>
</html>




<!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){
	if(window.event) oEvent = window.event;		//处理兼容性，获得事件对象
	var oDiv = document.getElementById("display");
	oDiv.innerHTML += oEvent.type + "&nbsp;&nbsp;";		//输出事件名称
}
window.onload = function(){
	var oTextArea = document.getElementsByTagName("textarea")[0];
	oTextArea.onkeydown = handle;	//监听所有键盘事件
	oTextArea.onkeyup = handle;
	oTextArea.onkeypress = handle;
}
</script>
</head>

<body>
	<textarea rows="4" cols="50"></textarea>
    <div id="display"></div>
</body>
</html>



<!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){
	if(window.event){
		oEvent = window.event;		//处理兼容性，获得事件对象
		//设置IE的charCode值
		oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
	}
	var oDiv = document.getElementById("display");
	//输出测试
	oDiv.innerHTML += oEvent.type + ": charCode:" + oEvent.charCode + " keyCode:" + oEvent.keyCode + "<br>";
}
window.onload = function(){
	var oTextArea = document.getElementsByTagName("textarea")[0];
	oTextArea.onkeypress = handle;
	oTextArea.onkeydown = handle;
}
</script>
</head>

<body>
	<textarea rows="4" cols="50"></textarea>
    <div id="display"></div>
</body>
</html>



<!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 block(oEvent){
	if(window.event)
		oEvent = window.event;
	if(oEvent.button == 2)
		alert("鼠标右键不可用");
}
document.onmousedown = block;
</script>
</head>

<body>
	<p>屏蔽鼠标右键</p>
</body>
</html>



<!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 block(oEvent){
	if(window.event){
		oEvent = window.event;
		oEvent.returnValue = false;	//取消默认事件
	}else
		oEvent.preventDefault();	//取消默认事件
}
document.oncontextmenu = block;
</script>
</head>

<body>
	<p>屏蔽鼠标右键</p>
</body>
</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>伸缩的菜单</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation > ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation > ul > li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation > ul > li > a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation > ul > li > a:hover{		/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}

/* 子菜单的CSS样式 */
#navigation ul li ul{
	list-style-type:none;
	margin:0px;
	padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
	border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
	display:block;
	padding:3px 3px 3px 0.5em;
	text-decoration:none;
	border-left:28px solid #a71f1f;
	border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
	background-color:#e85070;
	color:#FFFFFF;
}
#navigation ul li ul li a:hover{
	background-color:#c2425d;
	color:#ffff00;
}
#navigation ul li ul.myHide{	/* 隐藏子菜单 */
	display:none;
}
#navigation ul li ul.myShow{	/* 显示子菜单 */
	display:block;
}
-->
</style>
<script language="javascript">
function change(){
	//通过父元素li，找到兄弟元素ul
	var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
	//CSS交替更换来实现显、隐
	if(oSecondDiv.className == "myHide")
		oSecondDiv.className = "myShow";
	else
		oSecondDiv.className = "myHide";
}
window.onload = function(){
	var oUl = document.getElementById("listUL");
	var aLi = oUl.childNodes;	//子元素
	var oA;
	for(var i=0;i<aLi.length;i++){
		//如果子元素为li，且这个li有子菜单ul
		if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
			oA = aLi[i].firstChild;	//找到超链接
			oA.onclick = change;	//动态添加点击函数
		}
	}
}
</script>
</head>
<body>
<div id="navigation">
	<ul id="listUL">
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a>
        	<ul class="myHide">
            	<li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
		<li><a href="#">Sports</a>
        	<ul class="myHide">
            	<li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>        
        </li>
		<li><a href="#">Weather</a>
        	<ul class="myHide">
            	<li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>
分享到：
| javascript基础
评论
发表评论

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

相关推荐

    JavaScript事件机制详细研究

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

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

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

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

    JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码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程序设计——事件处理实验报告.docx

    实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...

    javascript事件查询综合

    JavaScript事件查询是Web开发中的重要概念，它涉及到用户与网页交互时的各种响应处理。这篇文档“javascript事件查询综合”很可能是对JavaScript事件处理机制的详细阐述。在Web开发中，JavaScript事件模型允许开发者...

    JavaScript 事件的一些重要说明

    JavaScript事件是JavaScript编程中至关重要的一个概念，它用于响应用户或浏览器的行为，如点击、滚动、键盘输入等。本文将详细解析JavaScript事件的几个关键点：异步回调、事件对象、`this`关键字以及事件冒泡的管理...

    Javascript事件的定义.doc

    JavaScript事件是网页交互的核心，它定义了当特定动作发生时，浏览器如何响应。这些动作可以是用户的操作，如点击、滚动、键盘输入，或者是页面加载、数据改变等。JavaScript事件的处理方式有多种，包括事件处理属性...

    javascript事件大集合

    JavaScript事件是Web开发中不可或缺的一部分，它允许我们与用户进行交互，响应用户的操作，并以此来更新页面内容。本文将深入探讨JavaScript事件的各个方面，帮助开发者更好地理解和应用这些关键概念。 一、事件...

    关于编写性能高效的javascript事件的技术

    在前端开发中，编写高性能的JavaScript事件处理代码至关重要。高效的事件处理不仅能够提升用户体验，还能减少不必要的计算和DOM操作，从而加快页面的响应速度。随着Web应用的日益复杂，对JavaScript事件系统的优化...

    WEB页编程技巧──JavaScript事件的应用.pdf

    "WEB页编程技巧──JavaScript事件的应用.pdf" 本文档主要介绍了JavaScript事件在WEB页编程中的应用，包括JavaScript事件的概念、分类、事件处理器的使用、事件驱动编程等方面的知识点。 一、JavaScript事件概述 ...

    JAVASCRIPT事件与动态页面编程.pdf

    JAVASCRIPT事件与动态页面编程 本文概述了JAVASCRIPT事件、事件监视器和事件处理器，并通过一个示例程序详细介绍了如何使用JAVASCRIPT事件处理器进行动态页面编程。 JAVASCRIPT事件是指人机交互的结果，如鼠标移动...

    JavaScript事件学习小结（一）事件流

    标题中的"JavaScript事件学习小结（一）事件流"指的是JavaScript中的事件处理机制，特别是事件流的概念。事件流描述了在DOM（文档对象模型）中事件如何从根节点传播到具体的元素节点。在JavaScript中，事件是用户与...

    扣代码工具 javascript事件 捕获者2.0.zip

    "扣代码工具 JavaScript事件 捕获者2.0.zip"这个压缩包文件显然聚焦于JavaScript事件处理，特别是事件捕获的概念。事件是用户与网页交互时产生的行为，如点击按钮、滚动页面等，而事件处理则允许开发者对这些行为...

    javascript 事件

    JavaScript事件是Web开发中不可或缺的一部分，它允许用户与网页进行交互并响应用户的操作。这篇博客主要探讨了JavaScript事件的基本概念、事件模型以及如何处理事件。 首先，我们需要理解什么是JavaScript事件。...

    AJAX中不触发javascript事件

    标题中的“AJAX中不触发javascript事件”指的是在使用AJAX技术进行页面更新时，可能出现JavaScript事件不按预期触发的情况。这通常是由于AJAX请求更新页面部分时，不会触发表单提交、点击或其他依赖于页面刷新的...

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