javascript为什么把事件代理方法封装到$1对象后，提示Unexpected identifier？

//这是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>
newsudhc3634140
浏览 1598回答 2
2回答

随时随地看视频慕课网APP