主页 > 前端 > javascript >
来源：未知 时间：2016-01-19 11:11 作者：xxadmin 阅读:次
[导读] !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhtmlxmlns=http://www.w3.org/1999/xhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title无标题文档/title/headbodydivid=co...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="container">
<input type="button" id="btn" class="listener" value="button" />
</div>
<a href="###" id="btnadd" class="listener">添加一个按钮</a>
</body>
</html>
<script>
window.onload = function(){
/**
@para parentId 包裹容器的id
@para selector 容器内元素的选择器，支持id和className
@para fn 元素上要执行的函数
*/
function delegate(parent, eventType, selector, fn)
{
//参数处理
if(typeof parent === 'string')
{
var parent = document.getElementById(parent);
!parent && alert('parent not found');
}
if(typeof selector !== 'string')
{
alert('selector is not string');
}
if(typeof fn !== 'function')
{
alert('fn is not function');
}
function handle(e){
//获取event对象
//标准DOM方法事件处理函数第一个参数是event对象
//IE可以使用全局变量window.event
var evt = window.event ? window.event : e;
//获取触发事件的原始事件源
//标准DOM方法是用target获取当前事件源
//IE使用evt.srcElement获取事件源
var target = evt.target || evt.srcElement;
//获取当前正在处理的事件源
//标准DOM方法是用currentTarget获取当前事件源
//IE中的this指向当前处理的事件源
var currentTarget= e ? e.currentTarget : this;
//在IE 9下 window.event 与 e 不同 evt没有currentTarget属性,e才有currentTarg
alert("src id==="+target.id+"\n\ncurent target id=="+currentTarget.id);
if(target.id === selector || target.className.indexOf(selector) != -1){
fn.call(target);
}
}
parent[eventType]=handle;
}
delegate('container', 'onclick', 'listener', function(){
alert(this);
});
//新增一个元素
document.getElementById("btnadd").onclick=function(){
var btn = document.createElement("input");
btn.setAttribute("value","点击我试试");
btn.setAttribute("type","button");
btn.setAttribute("id","newbutton");
btn.className = 'class="listener"';
//没有监听新按钮的onclick事件
document.getElementById("container").appendChild(btn);
}
}
</script>原理：都是利事件冒泡实现事件委派 live方法是固定把事件都绑定在了document上，而delegate 把事件绑定了提供的父元素上 delegate减少了冒泡次数，效率会更高些 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
