为元素注册事件的方式:3个
1.
对象.on+"事件类型名字"=事件处理函数(命名函数或者匿名函数)
例子:
document.getElementById("btn").onclick=function(){};
document.getElementById("btn")["on"+"click"]=function(){};
2.
对象.addEventListener("事件类型名字",事件处理函数,false);
第一个参数:没有on
第三个参数:false表示的是事件冒泡,如果是true则是事件捕获
例子:
document.getElementById("btn").addEventListener("click",function(){},false);
3.
对象.attachEvent("on"+事件类型名字,事件处理函数);
第一个参数:有on
例子:
document.getElementById("btn").attachEvent("onclick",function(){});
注册事件的兼容代码
* function addEventListener(element,type,fn){
* if(element.addEventListener){
* element.addEventListener(type,fn,false);
* }else if(element.attachEvent){
* element.attachEvent("on"+type,fn);
* }else{
* element["on"+type]=fn;
* }
* }
移除事件三种方式:
* 1.
* 对象.on+事件类型名=null;
* 例子:
* document.getElementById("btn").onclick=null;
* 2.
* 对象.removeEventListener("事件类型名字",fn,false);
* 例子:
* document.getElementById("btn").removeEventListener("click",fn,false);
* 3.
* 对象.detachEvent("on"+事件类型名字,fn);
* 例子:
* document.getElementById("btn").detachEvent("onclick",fn);
*
* 移除事件的兼容代码---一定要自己写
*
注册事件和移除事件的方式的区别
* 1.方法名不同
* 2.参数不同
* addEventListener:
* 第一个参数是事件类型(事件名字),没有on
* 第二个参数是事件处理函数
* 第三个参数是false
* attachEvent:
* 第一个参数是事件类型(事件名字),有on
* 第二个参数是事件处理函数
* 没有第三个参数
* 3.事件执行的时候内部的this指向不同:addEventListener中this是事件源(谁的事件触发了)，attachEvent中的this是window
* 4.一个有on，一个没有on
* 5.兼容问题:addEventListener在谷歌和火狐中都支持,IE11也支持,IE8不支持
* attachEvent: IE8支持,谷歌和火狐不支持,IE11也不支持
* 注册事件的时候可以用命名函数,也可以用匿名函数,如果是移除事件,必须用命名函数
innerHTML=""不会把元素的事件移除.===需要注意