事件代理俗言是利用别人来代替你处理一件事这里的别人必须是要原先存在的
比如: 你点了外卖, 那么外卖小哥就帮你的外卖送到你手上, 不用你自己去拿外卖 (事件代理的好处是不用钱, 而外卖是要钱的)
下面就是例子:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- ul{ list-style-type: none; } li{ width: 200px; height: 30px; background:red;
- margin-bottom: 10px; text-align: center; line-height: 30px; color: #fff;
- }
- </style>
- </head>
- <body>
- <ul>
- <li>
- 123
- </li>
- <li>
- 456
- </li>
- <li>
- 789
- </li>
- </ul>
- <script>
- /*// 常用方法
- var
- ul = document.getElementsByTagName('ul')[0];
- li = ul.getElementsByTagName('li');
- for(var i = 0; i <li.length; i++){
- li[i].onclick = function(){
- alert(this.innerHTML);
- }*/
}*$/ 事件是点击 li 则弹出 li 里面的内容
- var
- ul = document.getElementsByTagName('ul')[0]; // 代理元素 < 原先存在的 >
- ul.onclick = function(ev){ // 事件绑定在代理元素上
- var ev = ev || window.event; //event 兼容
- var target = ev.target || ev.srcElement; //target 兼容
- if(target.nodeName.toLowerCase() === "li"){ // 点击目标的节点名改为小写 < 默认为大写 >
- alert(target.innerHTML)
- }
- }
- </script>
- </body>
- </html>
使用事件代理要注意:
1 代理元素必须是原先存在的, 即并非是从后期添加的元素;
2 兼容性的问题;
3 将大写转换为小写;
4 事件是绑定在代理元素上
来源: http://www.qdfuns.com/note/48832/4547efe7e07917599f7154bee5a99d16.html