تفويض الأحداث والفوائد في جافا سكريبت

1. ما هي لجنة الأحداث: من حيث العلمان ، الأحداث هي onclick ، ​​onMouseover ، onMouseout ، وما إلى ذلك ، وما إلى ذلك هي الأحداث. أما بالنسبة للتفويض ، يُطلب منهم القيام بذلك. تمت إضافة هذا الحدث في الأصل إلى عناصر معينة ، لكنك تضيفه إلى الآخرين للقيام بذلك لإكمال الحدث.

وهذا هو: استخدم مبدأ الفقاعات لإضافة أحداث إلى الوالد لتشغيل تأثير التنفيذ.

الفوائد: 1. تحسين الأداء.

يمكننا أن ننظر إلى مثال: يجب تشغيل كل LI لتغيير لون الخلفية.

 <ul id = "ul"> <li> aaaaaaaa </li> <li> bbbbbbbbbbbbb </li> <li> ccccccccccccccccccccccccccccccccccccccccccccc </li> </ul> window.onload = function () {var oul = document.getElementByid ("ul") ؛ var ali = i <ali.length ؛

وبهذه الطريقة ، يمكننا إضافة أحداث الماوس على لي.

ولكن إذا كان لدينا الكثير من الحلقات ، فسيؤثر ذلك على الأداء.

أدناه يمكننا استخدام تفويض الأحداث لتحقيق هذا التأثير. HTML لا يزال دون تغيير

 window.onload = function () {var oul = document.getElementById ("ul") ؛ var ali = oul.getElementsByTagName ("li") ؛/*يجب استخدام مصدر الحدث هنا: كائن الحدث ، مصدر الحدث. بغض النظر عن الحدث الذي يوجد فيه ، طالما أن العنصر الذي تديره هو مصدر الحدث. IE: window.event.srcelement Standard: 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") {target.style.background = "red" window.event ؛ var target = ev.target || ev.srclement ؛ // ALERT (target.innerhtml) ؛ if (target.nodename.toLowerCase () == "li") {target.style.background = "؛}}}

المنفعة 2 ، سيكون للعناصر المضافة حديثًا أحداثًا سابقة أيضًا.

نأخذ هذا المثال أيضًا ، لكننا نحتاج إلى إضافة LI بشكل ديناميكي. انقر فوق الزر لإضافة LI بشكل ديناميكي

يحب:

 <type type = "button" id = "btn"/> <ul id = "ul"> <li> aaaaaaa </li> <li> bbbbbbbb </li> <li> ccccccccc </li> </ul>

سنفعل هذا بدون لجنة الحدث:

 window.onload = function () {var oul = document.getElementById ("ul") ؛ var ali = oul.getElementsByTagName ("li") ؛ var obtn = document.getElementById ( = "Red" ؛} ali [i] .onmouseout = function () {this.style.background = "" ؛}} obtn.onclick = function () {inow ++ ؛ var oli = document.createlement ("li") ؛ oli.innerhtml = 1111 *inow ؛ oul.appendchild (oli) ؛

القيام بذلك يمكننا أن نرى أن النقر فوق الزر المضافة حديثًا على LI بدون حدث تحريك الماوس لتغيير لون الخلفية.

لأنه تم تنفيذ الحلقة عند النقر للإضافة.

ثم نفعل ذلك عن طريق تفويض الحدث. إنه فقط أن HTML لا يزال دون تغيير

 window.onload = function () {var oul = document.getElementById ("ul") ؛ var ali = oul.getElementsByTagName ("li") ؛ var obtn = document.getElementById ( window.event ؛ var target = ev.target || ev.srcelement ؛ // ALERT (target.innerhtml) ؛ if (target.nodename.toLowerCase () == "li") {target.style.background = "red" window.event ؛ var target = ev.target || ev.srcelement ؛ // ALERT (target.innerhtml) ؛ if (target.nodename.toLowerCase () == "li") {target.style.background = "" ؛}} obtn.onclick = 1111 *inow ؛ oul.appendchild (oli) ؛}}

نعم:

تمامًا كما هو الحال في منشورات Weibo الخاصة بنا ، لا تزال هناك أحداث ماوس سابقة في منشور Weibo الجديد.

ما سبق هو تكليف وفوائد الحدث في JavaScript الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!