JavaScript事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_2903/article/details/82518947


<!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 ";
	else if( oEvent.type == "mouseover")
		oDiv.innerHTML += "你移动到我上方了&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 + "  ";		//输出事件名称
}
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事件