原生JavaScript事件详解！！！

     JQuery这种Write Less Do More的框架，用多了难免会对原生js眼高手低。

     小菜其实不想写这篇博客，貌似很初级的样子，但是看到网络上连原生js事件绑定和解除都说不明白，还是决定科普一下了。

     首先声明，小菜懂的也不是很多，只是把我的思路和大家分享一下。

 

DOM0事件模型

     事件模型在不断发展，早期的事件模型称为DOM0级别。

     DOM0事件模型，所有的浏览器都支持。

     直接在dom对象上注册事件名称，就是DOM0写法，比如：

1 document.getElementById("test").onclick = function(e){};

     意思就是注册一个onclick事件。当然，它和这种写法是一个意思：

1 document.getElementById("test")["onmousemove"] = function(e){};

     这没什么，只不过是两种访问js对象属性的方法，[]的形式主要是为了解决属性名不是合法的标识符，比如：object.123肯定报错，但是object["123"]就避免了这个问题，与此同时，[]的写法，也把js写活了，用字符串表示属性名称，可以在运行时动态绑定事件。

     言归正传，事件被触发时，会默认传入一个参数e，表示事件对象，通过e，我们可以获取很多有用的信息，比如点击的坐标、具体触发该事件的dom元素等等。

     基于DOM0的事件，对于同一个dom节点而言，只能注册一个，后边注册的同种事件会覆盖之前注册的。例如：

 

1 var btn = document.getElementById("test");
2 
3 btn.onmousemove = function(e){
4   alert("ok");
5 };
6 
7 btn["onmousemove"] = function(e){
8   alert("ok1");
9 };

 

     结果会输出ok1。

     接下来再说说this。事件触发时，this就是指该事件在哪个dom对象上触发。例如：

 

1 var btn = document.getElementById("test");
2 
3 btn.onmousemove = function(e){
4   alert(this.id);
5 };

 

     结果输出test。因为事件就是在id为test的dom节点上注册的，事件触发时，this当然代表这个dom节点，可以理解为事件是被这个dom节点调用的。

     所以，想解除事件就相当简单了，只需要再注册一次事件，把值设成null，例如：