Javascriptイベント例を詳しく解説_基礎知識

ドキュメントは html タグの上に位置し、最も強力な権限を持っていると言えます。以下の例では、ページ上の任意の場所をクリックすると、ドキュメントの特性を使用して「a」がポップアップ表示されます。

コードをコピーします コードは次のとおりです:

ドキュメント。 onclick=function (){
alert('a');
};

マウスの位置 clientX、clientY を取得します。これは表示されるのみです 領域のマウス位置

コードをコピーします コードは次のとおりです:

<script><br> document .onclick=function(ev){<br> <br> <br>コードをコピー<br><br><br> コードは次のとおりです:<br><br><br> <script><br> document.onclick=function(ev){</div> /* if(ev )<br> {<br> アラート(ev.clientX ',' ev.clientY);<div class="codetitle"> }<span> else{<a style="CURSOR: pointer" data="70903" class="copybut" id="copybut70903" onclick="doCopy('code70903')">alert(event.clientX ','event.clentY);<u> } ;</u> };*/</a> var oEvent=ev||event;</span>alert(oEvent.clientX ',' oEvent.clientY);</div> };<div class="codebody" id="code70903"></script>


イベントバブリング---次の例のように、レイヤーごとに積み重ねられた要素がイベント バブリングを形成します。ドキュメントの最大範囲は div の応答に影響します。




コードをコピー


コードは次のとおりです:


<script><br> ウィンドウ。 onload=function () () {<ar> var obtn = document.GetelementByid ('btn1'); </ar> </div> var oDiv = document.GetelementByid ('div1'); var oEvent =ev||event;<br> odiv.style.display='block';<br> oEvent.cancelBubble=true;//バブルをクリア<div class="codetitle"> };<span> document.onclick=function(){<a style="CURSOR: pointer" data="10424" class="copybut" id="copybut10424" onclick="doCopy('code10424')"> odiv.style.display='なし';<u> input type="button" value="display" id="btn1"/></u><div id="div1" style="width:100px;height:150px;background:# ccc;"></a></span></div><div class="codebody" id="code10424"><BR><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>

gt;

gt;

gt;

;

< ;/div>

gt;

gt;

gt;

div>

gt;

gt;

gt;

gt;

gt;

gt;

gt;

gt;

gt;

gt;

gt;

gt;

gt;

;

< ;/div>

gt;

gt;

gt;

キーコード

复制代码代码如下:

<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>