这篇文章主要为大家详细介绍了 javascript 事件委托的用法及其好处,感兴趣的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
事件委托: 利用冒泡的原理,把事件加到父级上,触发执行效果,
好处:提高性能,新添加的元素还会有之前的事件。
event 对象:事件源,不管在哪个事件中,只要你操作的那个元素就是事件源
获取事件源:
IE:window.event.srcElement
代码应用如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <style>
- </style>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- <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>
- </head>
- <body>
- <input type="button" value="添加" id='btn1'>
- <ul id='ul1'>
- <li>
- 11111
- </li>
- <li>
- 22222
- </li>
- <li>
- 3333333
- </li>
- <li>
- 44444444
- </li>
- <li>
- 66666666
- </li>
- </ul>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0226/266429.html