DOM 이벤트 비밀 탐지 (2) 이벤트 유형

DOM 은 마우스 이벤트, 키보드 이벤트 등 다양한 이벤트 유형 이 있 습 니 다.《 DOM 사건 탐 비 》 문장 에 근거 하여 우 리 는 몇 가지 종합 실례 를 만 들 었 다.
마우스 이벤트
판 넬 드래그 상태 전환 기능.프레젠테이션 주소:http://www.huanghanlian.com/DOM_Event_demo/Drag/
지식 점
때때로 우 리 는 class 을 통 해 원 소 를 찾 으 려 고 하 는데, 이때 우 리 는 간단 한 포장 을 쓸 수 있다.
function getByClass(clsName, parent) { var oParent = parent ? document.getElementById(parent) : document, eles = [], elements = oParent.getElementsByTagName('*'); for (var i = 0, l = elements.length; i < l; i++) { if (elements[i].className == clsName) { eles.push(elements[i]); } } return eles; } var p=getByClass("bon_com")[0]; p.innerHTML="d"; </code></pre> <p> ,<code>getByClass</code> , <code>class</code> , <code>id</code> id , <code>document</code> id <code>document</code>, <code>elements</code> id , <code>class</code> , <code>push</code> <code>eles</code> , <code>return eles;</code> <code>class</code> 。</p> <h4>1. </h4> <blockquote> <p> </p> </blockquote> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 644px;"> <div class="image-view"> <a href="https://img. .com/image/info10/0abc823325e84fb4a801364304536922.gif" target="_blank"><img src="https://img. .com/image/info10/0abc823325e84fb4a801364304536922.gif" width="1021" height="644" alt="DOM (2) _ 1 " style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> tuozuai.gif </div> </div> <blockquote> <p> </p> </blockquote> <ol> <li> 。</li> <li> </li> <li> </li> </ol> <p><strong> </strong></p> <p> , <br> <code>onmousedown</code> , <code>fnDown</code> 。</p> <p><strong> </strong></p> <p> , <code>onmousemove</code> <code>onmousemove</code> , <code>box</code> <code>clientX</code> <code>clientY</code> 。</p> <p><strong> </strong></p> <p> <code>onmouseup</code> <code>onmousemove</code> 。</p> <pre><code>document.onmousemove=null; </code></pre> <h4>1. </h4> <div class="image-package"> <div class="image-container" style="max-width: 665px; max-height: 529px;"> <div class="image-view"> <a href="https://img. .com/image/info10/550bb97b90884ec68994c9647a7c5db7.gif" target="_blank"><img src="https://img. .com/image/info10/550bb97b90884ec68994c9647a7c5db7.gif" width="665" height="529" alt="DOM (2) _ 2 " style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> tuozuai1.gif </div> </div> <p> , , <code>li</code> , , 。 。</p> <blockquote> <p> ( )</p> </blockquote> <p> :http://www.huanghanlian.com/DOM_Event_demo/keyEvent/</p> <ol> <li> <code>keyDown</code> , 。</li> <li> <code>keyPress</code> , 。</li> <li> <code>keyUp</code> 。</li> </ol> <p> , , , , <code>setInterval()</code> , 20 , 50 <code>Math.random()</code> ,<code>Math.random()</code> 0, 1 , , 8 , 0-7 , <code>8*0 0</code> ,<code>8*0.99 8</code> <code>length</code> <code>Math.floor()</code> 0-7 , 。</p> <p> ,</p> <pre><code>var flag = 0; // document.onkeyup = function(event) { event = event || window.event; if (event.keyCode == 13) { if (flag == 0) { playFun(); flag = 1; } else { stopFun(); flag = 0; } } } </code></pre> <p> <code>flag</code> 0 false</p> <p> <code>onkeyup</code> , , <code>flag</code> 0 false, , <code>flag</code> 1 true, <code>onkeyup</code> , <code>flag</code> 1 。 , ......</p> </article> </div> </div> </div> <!--PC WAP --> <div id="SOHUCS" sid="1245797329282387968"></div> <script type="text/javascript" src="/views/front/js/chanyan.js">

좋은 웹페이지 즐겨찾기