//这是ife2015的题目，点击列表，控制台弹信息；点击按钮后，列表内容改变，所以需要delegate事件委托，可是封装进$1方法后就提示错误？
//还有就是$对象是捕获id的，$1对象是添加事件处理程序的，题目要求整合到一起，可是想了好久不懂，才起了$和$1?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件代理</title>
</head>
<body>
<ul id="list">
<li id="item1">Simon</li>
<li id="item2">Kenner</li>
<li id="item3">Erik</li>
</ul>
<button id="btn">change</button>
<script type="text/javascript">
//处理函数
function clickListener(event) { //点击列表li项
console.log(event);
}
function renderList() { //点击改变li项内容
$("#list").innerHTML = '<li>new item</li>';
}
// 仅能根据id捕获dom的封装
function $(selector){
if (selector.substr(0,1) == "#") {
var getDom = document.getElementById(selector.substring(1));
return getDom;
} else{
console.log("This is not a id");
}
}
//事件封装
var $1 = { //如何把$和$1整合？？？？
on: function(element, event, listener){ //添加事件处理程序
element.addEventListener(event,listener);
},
un: function(element, event, listener){ //移除事件处理程序
element.removeEventListener(event,listener);
},
click: function(element, listener){ //添加click事件处理程序
element.addEventListener("click", listener);
},
enter: function(element, listener){ //添加enter事件处理程序
element.addEventListener("keyup", function(event){
var event = event ? event : window.event;
if (event.keyCode == 13) {
listener(); //先判断是否为enter再调用
};
})
}
delegate: function(element, tag, eventName, listener){
$1.on(element, eventName, function(){ //不直接将此function指定为listener，先检测tagName是否为li
event = event || window.event;
var target = event.target || event.srcElement;
if (target.tagName == tag.toUpperCase()) { // element.tagName得到元素标签名（大写）
listener(event);
}
});
}
}
$1.click($("#btn"), renderList); //点击切换li内容
$1.delegate($("#list"), "li", "click", clickListener);
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消