javascript事件依頼の使い方と利点を簡単に分析する.
2070 ワード
本論文では、Javascriptイベントの依頼の使い方と利点を簡単に紹介します.
イベント依頼:泡の原理を利用して、イベントを親レベルに加えて、実行効果を触発します.利点:性能を向上させ、新たに追加された要素は前のイベントがあります.イベント対象:イベントソースは、どのイベントにおいても、あなたが操作している要素がイベントソースです.
イベントソースの取得:IE:window.event.srcellment
標準下:event.target ターゲt.nodeNameはどのラベルかを判断します.
コードの応用は以下の通りです.
イベント依頼:泡の原理を利用して、イベントを親レベルに加えて、実行効果を触発します.利点:性能を向上させ、新たに追加された要素は前のイベントがあります.イベント対象:イベントソースは、どのイベントにおいても、あなたが操作している要素がイベントソースです.
イベントソースの取得:IE:window.event.srcellment
標準下:event.target ターゲt.nodeNameはどのラベルかを判断します.
コードの応用は以下の通りです.
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
var iNow=5;
// ！
oUl.onmouseover=function(ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='red';
}
}
oUl.onmouseout=function(ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='';
}
}
oBtn.onclick=function()
{
iNow++;
var oLi=document.createElement('li');
oLi.innerHTML=111*iNow;
oUl.appendChild(oLi);
}
}
</script>
<input type="button" value=" " id="btn1"/>
</code></pre><ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>3333333</li>
<li>44444444</li>
<li>66666666</li>
</ul>
</div>
<p> ， 。</p>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>