原生js底层基础（十九）事件

javaScript里面的事件触发写法很多，但是考虑到每个人使用的环境的异同，我们需要了解每个写法的兼容等。

1.elem.on事件类型 = 功能函数

事件名可以是click，blur，change，input，keydown，mouseenter，mouseleave等，以下不再赘述。

• 兼容性很好，但是一个元素的同一个事件只能绑定一次
• 基本等于写在HTML行间上,例如以下两片代码相同

<script>
	var div = document.getElementsByTagName('div')[0];
	div.onclick = function(){
		console.log('aaaa')
	}
</script>

<div onclick = "console.log('a')">

• 解除：elem.onXXX = null;

2.elem.addEventListener(事件类型,函数/函数名,false)

第三个参数是个布尔值。当事件触发时，有嵌套的两个以上的元素都同时触发时，这个布尔值默认是false（子元素的事件会先被触发，然后再触发父元素。）true(父元素的事件会先被触发，然后再触发子元素。)

• IE9以下不兼容，可以为一个事件绑定多个处理程序
  例如：

function test(){
console.log('bbbbbbb');
}
function test2(){
	console.log("cccccc");
}
div.addEventListener('mouseenter',test,false)
div.addEventListener('mouseenter',test2,false)

当鼠标移入触发事件的时候，则同时输出’bbbbbbb’,‘cccccc’

• 解除：elem.removeEventListener(“click”,函数名,false);//参数二不能写匿名函数

3.obj.attachEvent(‘on’+ type,fn);

• IE独有，一个事件同样可以绑定多个处理程序
• this指向window
• 解除：elem.detachEvent(“on”+type,函数名)//参数二不能写匿名函数

4.附加面试题

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

使用原生 js，addEventListener，给每个 li 元素绑定一个click事件，输出他们的顺序。
错误答案：

var liList = document.getElementsByTagName("li");
for(var i = 0; i<liList.length; i ++){
		liList[i].addEventListener("click",function(){
			console.log(i);
		},false)
	}

//这样会出现一个问题，预编译的时候系统不去管console.log(i)里面的值，所以等for循环结束，里面的点击事件被触发的时候。那个i不能保证是什么了。要用立即执行函数

正确答案：

	for(var i = 0; i<liList.length; i ++){
		(function(n){
			liList[n].addEventListener("click",function(){
			console.log(n);
			},false)
		}(i))
	}

封装兼容方法

function addEvent(elem,type,handle){
		if(elem.addEventListener){
			return elem.addEventListener(type,handle,false);
		}else if(elem.attachEvent){
			return elem.attachEvent(on+type,function(){
				handle.call(elem);//此方法和普通的方法一样，this是指向window 所以自己手动用call改指向
			})
		}else{
			return elem['on'+type] = handle;
		}
	}
	```