자바스크립트 이벤트 예시에 대한 자세한 설명_기본지식

문서는 html 태그 위에 위치하며 가장 위력이 크다고 할 수 있습니다. 아래 예는 문서의 특성을 활용하여 페이지의 아무 곳이나 클릭하면 "a"가 팝업되는 것입니다.

코드 복사 코드는 다음과 같습니다.

<script> onclick=function (){<br> Alert('a');<br> };<br> </script>

마우스 위치 가져오기 clientX, clientY---참고 이것만 보입니다 해당 영역의 마우스 위치

코드를 복사하세요 코드는 다음과 같습니다

<script><br> 문서 .onclick=function(ev){<br>                                                                        >                         <br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><br><br> <script><br> document.onclick=function(ev){<br> /* if(ev )<br> {</div> Alert (ev.clientX ',' ev.clientY);<br> }<br> else{<div class="codetitle"> Alert(event.clientX ',' event.clentY);<span> } ;<a style="CURSOR: pointer" data="70903" class="copybut" id="copybut70903" onclick="doCopy('code70903')"> };*/<u> var oEvent=ev||event;</u> Alert(oEvent.clientX ',' oEvent.clientY);</a> };</span></script>

이벤트 버블링 ---다음 예와 같이 레이어별로 쌓인 요소는 이벤트 버블링을 형성합니다. 문서의 최대 범위는 div의 응답에 영향을 미칩니다.




코드 복사


코드는 다음과 같습니다.


<script><br>창. onload=function () () {<ar> var obtn = document.GetelementByid ('btn1'); <br> var oDiv = document.GetelementByid ('div1') En> var oEvent =ev||event;<br> odiv.style.display='block';</ar> </div> oEvent.cancelBubble=true;//거품 지우기<br> };<br> document.onclick=function(){<div class="codetitle">             odiv.style.display=' 없음';<span>                                       input type="button" value="display" id="btn1"/><a style="CURSOR: pointer" data="10424" class="copybut" id="copybut10424" onclick="doCopy('code10424')"><div id="div1" style="width:100px;height:150px; background:# ccc;">&lt ;/div><u></body></u> </a></span>마우스 움직임---가시 영역에서만 유효</div> <div class="codebody" id="code10424"> <br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><div class="codebody" id="code91861"> <br> <title>마우스 이동</title><br><script><br> window.onmousemove=function(ev){<br> var oEvent=ev||event;<br> var odiv=document.getElementById('div1');<br> odiv.style.left=oEvent.clientX 'px';<br> odiv.style.top=oEvent.clientY 'px';<br> };<br></script>

키보드의 위치와 방향을 변경합니다---키코드를 통해 키보드의 키 값을 얻어 해당 작업을 수행합니다. 작업.

코드 복사 코드는 다음과 같습니다.

<script><br>window.onload=function ()<br>{<br>    var aDiv=document.getElementsByTagName('div');<br>    var i =0;<br><br>    document.onmousemove=function (ev)<br>    {<br>        var oEvent=ev||event;<br><br>        for(i=aDiv.length-1;i> 0;i--)<br>        {<br>            aDiv[i].style.left=aDiv[i-1].style.left;<br>            aDiv[i].style.top=aDiv[i-1 ].style.top;<br>        }<br><br>        aDiv[0].style.left=oEvent.clientX 'px';<br>        aDiv[0].style.top=oEvent.clientY 'px' ;<br>    };<br>};<br></script>

< ;div>

< ;/div>

< ;div>

< ;/div>

키코드

复主代码 代码如下:

 <script><br>document.onkeydown=function(ev)<br>{<br> var oEvent=ev||event;<br><br>    Alert(oEvent.keyCode);<br>};<br></script>
 

 ctrlKey---可以通过ctrl Enter组合键来提交内容

复代码 代码如下:

<script><br>window.onload=function ()<br> {<br>    var oBtn=document.getElementById('btn1');<br>    var oTxt1=document.getElementById('txt1');<br>    var oTxt2=document.getElementById('txt2');<br><br>    oBtn.onclick=function ()<br>    {<br>        oTxt1.value =oTxt2.value 'n';<br>        oTxt2.value='';<br>    };<br><br>    oTxt2. onkeydown=function(ev)<br>    {<br>        var oEvent=ev||event;<br><br>        if(oEvent.ctrlKey && oEvent.keyCode==13)<br>        {<br>            oTxt1.value =oTxt2.value 'n';<br>            oTxt2.value='';<br>        }<br>    };<br>};<br></script>