js 事件复习

js事件

DOM文档对象模型
事件用户或浏览器执行的动作
事件处理程序（事件监听器）响应某个事件的函数

DOM

事件

• 事件流

• 事件类型

• 事件对象
  DOM中的事件对象（event）

事件处理程序

• html事件处理程序
  <div onclick="alert(event.type)"></div>

<div onclick="test()"></div>
onclick 里面js的作用域是全局的，存在维护性问题（不知道变量函数是哪里的）

• DOM0级事件处理程序
  在冒泡阶段调用事件处理程序

  var btn = document,getElementById("btn");
   btn.onclick = function(event){
    alert(event.type);
   }

• DOM2级事件处理程序
  false（true）：在冒泡阶段调用事件处理程序
  true：在捕获阶段调用事件处理程序

  var btn = document,getElementById("btn");
  function handler = function(event){
  	console.log(event.type)
  }
  btn.addEventListener('click',handler, false);
  btn.removeEventListener('click',handler, false);

  按顺序执行、可添加多个事件、匿名函数不能被移除
  (ie attachEvent和detachEvent相反顺序执行、匿名函数不能被移除)
• 根据DOM0 DOM2写出跨浏览器事件处理程序

  var EventUtil = {
  		addHandler: function(ele, type, handler){
  			if(ele.addEventListener){
  				ele.addEventListener(type, handler, false);
  			}else if(ele.attachEvent){
  				ele.attachEvent('on'+type, handler);
  			}else{
  				ele['on' + type] = handler
  			}	
  		},
  		removeHandler: function(){
  			if(ele.removeEventListener){
  				ele.removeEventListener(type, handler, false);
  			}else if(ele.detachEvent){
  				ele.detachEvent('on'+type, handler);
  			}else{
  				ele['on' + type] = null;
  			}	
  		}
  	}
  	var btn = document,getElementById("btn");
  	function handler(event){console.log(event.type)};
  	EventUtil.addHandler(btn, 'click', handler);
  	EventUtil.removeHandler(btn, 'click', handler);