事件监听

1.事件监听

可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件

obj.addEventListener(‘click’，function(){}，false)

参数1：事件名
参数2：事件的执行函数
参数3：boolean值，默认是false，明确了该事件是在捕获阶段执行还是在冒泡阶段执行，false 代表在冒泡阶段执行，true代表在捕获阶段执行(可不写)

特性：
1.可以对该元素的此事件绑定多个事件执行函数
2.只支持IE8以上和标准浏览器

 var wp = document.querySelector('.wp');
   wp.addEventListener('click',show);
   wp.addEventListener('click',see，false);

取消事件监听

obj.removeEventListener(‘click’，参数2，参数3);
参数跟addEventListener必须保持一致，否则无法取消事件监听
注: 第二个参数的函数如果是匿名函数，是无法取消事件监听的

  var btn1 = document.getElementById("btn1");
   btn1.onclick = function(){
	   wp.removeEventListener('click',show);
	   wp.removeEventListener('click',see);
   };

2. 低版本ie的事件监听

IE 6 7 8

obj.attachEvent(‘onclick’，function(){})

参数1：on+事件名
参数2：事件的执行函数

  var wq = document.querySelector('.wq');
  wq.attachEvent('onclick',function(){
	  console.log('橘子洲头');
  });

obj.detachEvent(参数1，参数2) 用来取消低版本ie的事件监听

 var btn3 = document.getElementById("btn3");
  btn3.onclick = function(){
	  wq.detachEvent('onclick',juzi);
  };

	// 使用构造函数的方式做兼容
	function Tool(obj) {
		this.obj = obj;
		this.addEvent = function (evName, fn) {
			// 判断浏览器是否支持addEventListener
			if (this.obj.addEventListener) {
				//IE高版本和标准浏览器
				this.obj.addEventListener(evName, fn);
			} else {
				this.obj.attachEvent('on' + evName, fn);
			}
		};
	}

ex.
	var wp = document.querySelector('.wp');
	var t = new Tool(wp);
	t.addEvent('click',function(){
		alert('尉迟恭');
	});