DOM 이벤트 비밀 탐지 (2) 이벤트 유형
마우스 이벤트
판 넬 드래그 상태 전환 기능.프레젠테이션 주소: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">
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.