原生JS事件绑定练习题

1、

<ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>

使用原生JS ，addEventListener，给每个li绑定一个click事件，输出他们的顺序

<ul>
	<li>a</li>
	<li>a</li>
	<li>a</li>
	<li>a</li>
</ul>
<script type="text/javascript">
	var liCol = document.getElementsByTagName('li'),
		len = liCol.length;
	for(var i = 0; i < len; i++){
		//错误写法，形成了闭包
		// liCol[i].addEventListener('click',function(){
		// 	console.log(i);
		// },false);
		// 使用立即执行函数
		(function(i){
			liCol[i].addEventListener('click',function(){
			console.log(i);
		},false);
		}(i))
	}
<script>

2、封装兼容性的addEvent(elem,type,handle);方法

<script type="text/javascript">
function addEvent(elem,type,handle){
		if(elem.addEventListener){
			elem.addEventListener(type,handle,false);
		}else if(elem.attachEvent){
			elem.attachEvent('on' + type,function(){
				handle.call(elem);
			})
		}else{
			elem['on' + type] = handle;
		}
	}
</script>