1、事件流：事件冒泡、事件捕获

2、使用事件处理程序的方法：

• HTML事件处理程序:

  直接添加在html文件中;

  如：< input onclick="clickName()">

  缺点：html和js代码紧密的耦合在一起;

• DOM0级事件处理程序:

  把一个函数赋值给一个事件的处理程序属性

            < input type="button" value="点击我" id="inputBtn">
  
            var inputBtn = document.getElementById('inputBtn');
            inputBtn.onclick = function(){
              alert('hello world!');
            };
            inputBtn.onclick = null;//删除事件
          

  优势：用的比较多，简单，跨浏览器；可以给一个元素添加多个事件处理程序；

• DOM2级事件处理程序:

  DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作

  addEventListener()和 removeEventListener();

  接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值;//true:表示在捕获阶段调用事件处理程序，false:表示在冒泡阶段调用事件处理程序

  input.addEventListener(‘click’, function(){alert('hello')}, false);

• ie事件处理程序:

  attachEvent()添加事件、detachEvent()删除事件

  接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

  input.attachEvent(‘onclick’, function(){alert('hello')});

• 跨浏览器事件处理程序:

          var eventUtil = {
            //添加句柄
            addHandler: function(element, type, handler){
              if(element.addEventListener){
                element.addEventListener(type, handler, false);
              }else if(element.attachEvent){
                element.attachEvent('on' + type, handler);
              }else{
                element['on' + type] = handler;
              }
            },
            //删除句柄
            removeHandler: function(element, type, handler){
              if(element.removeEventListener){
                element.removeEventListener(type, handler, false);
              }else if(element.detachEvent){
                element.detachEvent('on' + type, handler);
              }else{
                element['on' + type] = null;
              }
            },
            getEvent: function(event){
              return event ? event : window.event;
            },
            getType: functon(event){
              return event.type;
            },
            getElement: function(event){
              return event.target || event.srcElement;
            },
            preventDefault: function(event){
              if(event.preventDefault){
                event.preventDefault();
              }else{
                event.returnValue = false;
              }
            },
            stopPropagation: function(event){
              if(event.stopPropagation){
                event.stopPropagation();
              }else{
                event.cancelBubble = true;
              }
            }
          };
  
          eventUtil.addHandler(btn1, 'click', function(e){
            //doing something
            e=eventUtil.getEvent(e);
            eventUtil.preventDefault(e);
            eventUtil.stopPropagation(e);
          });
  
          
          
          go
          

3、事件对象:

• 在触发DOM上的事件时都会产生一个对象

  事件对象event

  DOM中的事件对象：

  type属性-用于获取事件类型；

  target属性-用户获取事件目标；

  stopPropagation()方法-用于阻止事件冒泡；

  preventDefault()方法-用于阻止事件的默认行为；

  IE中的事件对象：

  type属性-用于获取事件类型；

  srcElement属性-用于获取事件目标；(var ele = event.target || event.srcElement;)(event = event || window.event;//ie8之前引用的是window.event)

  cancelBubble属性-用于阻止事件冒泡；(设为true表示阻止冒泡，设为false表示不阻止事件冒泡；)

  returnValue属性-用于阻止事件的默认行为（设置为false为阻止）；

4、不同的事件类型:

• 鼠标事件：

  click、mouseover、mouse out…

  键盘事件