说明
本文用示例介绍javascript中的事件（event）的委托（代理）的用法。
事件委托简介
事件委托，也叫事件代理，是javascript中绑定事件的一种常用技巧。就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素，让外层元素担当事件监听的职务。
事件代理的原理是dom元素的事件冒泡。
事件委托的优点
1.节省内存，减少事件的绑定
原本需要绑定在所有子元素的事件，使用事件委托之后，只需要一个事件绑定即可。
2.可以动态绑定事件，新增的子对象事件可以被已绑定的事件处理
因为新增的子对象产生的事件，最终也会冒泡到父元素，从而能够处理
需求：一个列表，点击列表元素时弹出其内容。
只需在外层元素绑定事件即可。
<!doctype html><html lang="en"> <head> <meta chart="utf-8"> <title>this is title</title></head> <body> <ul id="id-ul"> <li>我是第1个li</li> <li>我是第2个li</li> <li&g沂山风景区t;我是第3个li</li></ul> <script> let ul = document.getelementbyid('id-ul'); ul.addeventlistener("click", function (ev) { alert(ev.target.innertext); })</script> </body></html>结果
每个子元素都绑定事件。
<!doctype html><html lang="en"> <head> <meta chart="utf-8"> <title>this is title</title></head> <body> <ul id="id-ul"> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li></ul> <script> let li = document.querylectorall('#id-ul li'); for (let lielement of li) { lielement.addeventlistener("click", function (ev) { alert(ev.target.innertext); }); }</script> </body></html>结果
需求：每点击“生成按钮”，就生成一个子的列表元素。然后，每点击一次列表元素，会弹出其内容。
<!doctype html><html lang="en"> <h例如的英文ead> <meta chart="utf-8"> <title>this is title</title></head> <body> <ul id="id-ul"> <li>1</li> <li>2</li></ul><button i鸡冠花的功效与作用d="b经典爱情文章tn">click</button><script> let num = 3; let eul = document.querylector("#id-ul"); let ebutton = document.querylector("#btn"); ebutton.addeventlistener("click", function () { let newli = document.createelement("li"); eul.appendchild(newli); newli.innertext = num++; }) eul.addeventlistener("click",function (event) { alert(event.target.in如何查询高考成绩nertext); })</script> </body></html>结果
可以看到，原有的元素和新建的元素的事件都会被处理。
<!doctype html><html lang="en"> <head> <meta chart="utf-8"> <title>this is title</title></head> <body> <ul id="id-ul"> <li>1</li> <li>2</li></ul><button id="btn">click</button><script> let num = 3; let eul = document.querylector("#id-ul"); let ebutton = document.querylector("#btn"); let eli = document.querylectorall("#id-ul li"); ebutton.addeventlistener("click", function () { let newli = document.createelement("li"); eul.appendchild(newli); newli.innertext = num++; }) for (let elielement of eli) { elielement.addeventlistener("click",function (event) { alert(event.target.innertext); }) } </script> </body></html>结果
可以看到：原有的元素的点击事件会被处理，但新加入的不会被处理。
到此这篇关于javascript事件的委托(代理)的用法示例详解的文章就介绍到这了,更多相关javascript事件委托内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
本文发布于:2023-04-04 11:33:43，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/37e2fa6be31869e55b59faffd19ae175.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：JavaScript事件的委托(代理)的用法示例详解.doc
本文 PDF 下载地址：JavaScript事件的委托(代理)的用法示例详解.pdf
| 留言与评论（共有 0 条评论） |
