1.イベント委員会とは:素人の用語では、イベントはオンクリック、オンマウスオーバー、オンマウスアウトなどです。委任に関しては、彼らはそれをするように求められます。このイベントはもともと特定の要素に追加されましたが、イベントを完了するためにそれを行うためにそれを他の要素に追加します。
つまり、バブルの原理を使用して、親にイベントを追加して実行効果をトリガーします。
利点:1。パフォーマンスを改善します。
例を見ることができます。各LIを背景色を変更するためにトリガーする必要があります。
<ul id = "ul"> <li> aaaaaaaaa i ++){ali [i] .onmouseover = function(){this.style.background = "red";} ali [i] .onmouseout = function(){this.style.background = "";}}}}}このようにして、Liにマウスイベントを追加できます。
しかし、ループ用の多くの場合、パフォーマンスに影響します。
以下では、イベント委任を使用してこの効果を達成できます。 HTMLは変更されていません
window.onload = function(){var oul = document.getElementById( "ul"); var ali = oul.getElementsBytagname( "li");/*イベントソースはここで使用する必要があります:イベントオブジェクト、イベントソース。あなたが操作する要素がイベントソースである限り、どちらのイベントがありますか。 IE:window.event.srcelement標準:event.targetnodename:要素のラベル名 */oul.onmouseover = function(ev){var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert(target.innerhtml); if(target.nodename.tolowercase()== "li"){ターゲット.style.background = "red";}} onmouseout = function(ev){var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert(target.innerhtml); if(target.nodename.tolowercase()== "li"){target.style.background = "";}}}}}利益2では、新しく追加された要素には以前のイベントもあります。
また、この例を取りますが、動的にLIを追加する必要があります。 [ボタン]をクリックしてLIを動的に追加します
のように:
<input type = "button" id = "btn"/> <ul id = "ul"> <li> aaaaaaa </li> <li> bbbbbbbbb </li> <li> cccccccccc </li> </ul>
イベント委員会なしでこれを行います。
window.onload = function(){var oul = document.getElementById( "ul"); var ali = oul.getelementsbytagname( "li"); var obtn = document.getelementbyid( "btn"); var inow = 4; "red";} ali [i] .onmouseout = function(){this.style.background = "";}} obtn.onclick = function(){inow ++; var oli = document.createelement( "li"); oli.innerhtml = 1111 *inow; oul.appendchild(oli);}}}これを行うと、背景色の色を変更するために、マウスモービングイベントなしでLIに新しく追加されたボタンをクリックすることがわかります。
[forループが[追加]にクリックすると実行されたためです。
次に、イベントを委任することでそれを行います。 HTMLが変更されていないということだけです
window.onload = function(){var oul = document.getElementbyId( "ul"); var ali = oul.getElementsbytagname( "li"); var obtn = document.getelementbyid( "btn"); var inow = 4; oul.onmouseover = function(ev){var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert(target.innerhtml); if(target.nodename.tolowercase()== "li"){ターゲット.style.background = "red";}} onmouseout = function(ev){var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert(target.innerhtml); if(target.nodename.tolowercase()== "li"){target.style.background = "" *inow; oul.appendchild(oli);}}わかりました:
Weiboの投稿と同じように、新しいWeibo投稿にはまだ以前のマウスイベントがあります。
上記は、編集者が紹介したJavaScriptのイベントの試運転と利点です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!