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>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

javascript 이벤트

좋은 웹페이지 즐겨찾기