js事件

事件

一. 鼠标事件对象

向上标准浏览器中的，可以在js事件绑定的函数中找到事件对象，其中非常系统的罗列了你可以使用的事件。事件对象在绑定事件对应的函数中，并且可以作为参数传递，其实原理还是作用域。低版本ie浏览器中（8-），事件对象则在window.event上

var div1 = document.getElementById('div1');
div1.onclick = function (e) { 
    e = e||window.event;//window.event是为了兼容ie8-,其没有事件对象，但油event属性代替
    console.log(e[0]);//将打印出事件对象
    foo(e[0]);//还是打印出事件对象
 }
 function foo(w) {
   console.log(w);
 }

1. 事件对象解析
   事件对象中大量的属性包括：

• clientX/clientY
  即鼠标相对于(可视窗口)的坐标（clientX,clientY）

• pageX/pageY
  即鼠标相对于(页面)的坐标（clientX,clientY），！！ie8-不兼容

  //兼容处理
  e.pageX = e.pageX || e.clientX+(document.documentElement.scrollTop||document.body.scrollTop); 
  e.pageY = e.pageY || e.clientY+(document.documentElement.scrollLeft||document.body.scrollLeft);

• 阻止默认行为
  e.preventDefault(),阻止一些标签元素的默认行为,！！！ie8-不兼容，ie里他就变成了e.returnValue = false;

  //兼容处理
  e.preventDefault? e.preventDefault():e.returnValue  = false;
  //点击事件里可以直接return　false;取消事件的提交/跳转等

• type
  当前事件的类型，比如点击事件时e.type == ‘click’；

事件冒泡

点击当前元素会触发所有父+级元素的相同对应事件，直到document。

1. 事件源：e.target,表示冒泡事件中的事件处理。！！！！ie8-不兼容

   //兼容处理
   e.target = e.target || e.srcElement;

2. 阻止冒泡事件
   e.stopPropagation(),!!!!!不兼容

   //兼容处理
   e.stopPropagation? e.stopPropagation():e.cancelBubble = true;
   
   //利用冒泡事件进行事件委托，完成按需删除li
   var ul = document.getElementById('ul');
   ul.onclick = function (e) { 
       e = e || window.event;
       e.target = e.target || e.srcElement;
       if(e.target.nodeName == 'SPAN' && e.target.getAttribute('btn')=='del'){//符合删除属性的span按钮获取
           this.removeChild(e.target.parentNode);//this为ul
       }
    }

二、键盘事件

键盘事件包括了。onfocus onblur oninput onkeyup onkeydown等,同样的键盘的事件对象需要作兼容处理，然后可以分析其上所存的属性

input.onkeyup = function(e) {
  e = e|| window.event;
}

1. 键盘的事件对象为KeyboardEvent，其中的属性包括

• key:所有按键的键值，比如你按了‘1’,e.key == ‘1’;
• keyCode:键值对应的键码，特殊包括：Enter->13/Backspace->8/space->32/up,down,left,right->37,38,39,40/0-9->48-57

  三、DOM二级事件

  DOM0事件其实就是原来常见的绑定方式，js还有另外一种绑定事件的方式DOM2级，不过DOM1去哪儿了，我也不知道。DOM2级

  //DOM2的绑定方式如下
  div1.addEventListener('click',fn,false);
  div1.addEventListener('click',fn1,false);

第一个参数为事件类型，第二个为事件执行函数，第三个参数则为是否捕获（这也是DOM2的特点，不过基本不用，！！！低版本浏览器也不支持）。
同时，事件一般的执行顺序为先触发绑定在捕获阶段的函数，然后触发target，最后在触发绑定在冒泡阶段的函数。

• DOM2兼容
  标准浏览器中，：
  同上面代码，DOM2可以绑定多个方法，标准浏览器在执行时会按照绑定的顺序进行执行；
  其中的this为绑定事件时的源（同DOM0一样）；
  重复绑定的函数执行一次。

！！！！！IE8-中：
首先绑定DOM2级事件，处理的方法不一样，需要使用：div1.attachEvent()；

/**
* ele:绑定元素对象
* type：事件类型
* fn:回调函数
*/
function on(ele,type,fn) {
    if(ele.addEventListener){
        ele.addEventListener(type,fn);//绑定DOM2
        return;
    }else{
        if(!ele['AAA'+type]){//每个事件只能进行一次
            ele['AAA'+type] = [];
            ele.attachEvent('on'+type,function () {
                run.call(ele);
            });//绑定DOM2,只能绑定一个run,run将数组里的方法顺序执行，IE8-中，事件类型要全面，比如click事件要写为'onclick',同时调用匿名函数，将run中的this变为ele。
        }
        var a = ele['AAA'+type];
        for(var i = 0;i<a.length;i++){
            if(a[i]==fn){
                return;
            }
        }
        a.push(fn);//塞事件，以便于按照数组中的顺序执行
    }
}
function run(e) {
    e = window.event;
    e.target = e.srcElement;
    var a = this['AAA'+e.type];
    if(a && a.length){
        for(var i = 0;i<a.length;i++){
            if(typeof a[i] == "function"){
                a[i].call(this);
            }else{
                a.splice(i,1);
                i--;
            }
        }
    }
}
function off(ele,type,fn) {
  if(ele.removeEvent){
      ele.removeEvent(type,fn);//标准浏览器移除事件
  }else{
      var a = ele['AAA'+type];
      if(a){
          for(var i = 0;i<a.length;i++){
              if(a[i] == fn){
                  a.splice(i,1);
                  break;
              }
          }
      }
  }
}

赏

谢谢你请我吃糖果