1.学习注册事件和删除事件的兼容性处理方法
兼容性处理原则：首先照顾大多数浏览器，再处理特殊浏览器
封装兼容性函数
?
注册事件：
传统注册方式：
-利用on开头的事件onclick
-<button οnclick= "alert(hi~)"> < /button>>
-btn.οnclick=function(){}
特点：注册事件的唯一性（同一个元素用一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数）
方法监听注册方式：
W3C标准 ?推荐方式 ?addEventListener()
IE9之前的IE不支持此方法，可使用attachEvent（）代替
特点：同一个元素同一个事件可以注册多个监听器（function）
1）addEventListener(type, listener, useCapture)
eventTarget.addEventListener（）方法将指定的监听器注册到eventTarge（t目标对象）上，
当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
-type：事件类型字符串，比如click, mouseover,注意不带on
-listener:事件处理函数，事件发生时，会调用监听函数
-useCapture：可选参数
btn.addEventListener('click',function(){
alert(22);
})
btn.addEventListener('click',function(){
alert(33);
})//可以弹两遍，同一元素 同一事件可以添加多个侦听器（事件处理程序）
2）eventTarget.attachEvent(eventNameWithOn,callback)
eventTarget.attachEvent()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行
接收两个参数：
eventNameWithOn:事件类型字符串，比如onclock,onmouseover
callback:事件处理函数，当目标触发事件时回调函数被调用
attachEvent ie9以前的版本支持(了解，该特性非标准)
btn[2].attachEvent('onclick',function(){
alert(11);
});
删除事件的方式：
兼容性
1）传统注册方式
eventTarget.onclick = null;
2)方法监听注册方式
1.
eventTarget.removeEvementListener(type, listener, useCapture)
div.addEventListener('click ',fn)//里面的fn不需要调用加小括号
function fn(){
alert(22);
div.removeEvementListener('click',fn);
}
2.
eventTarget.detachEvent(eventNameWithOn , callback)
div.attachEvent('onclick',fn1);
function fn1(){
alert(33);
div.detachEvent('onclick', fn1);
}
获取兄弟节点的兼容性处理
1.node.nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。包含所有节点
2.node.previousSibling返回当前元素的上一个兄弟节点，找不到则返回null。包含所
3.node.nextElementSibling返回当前元素下一个兄弟节点，找不到返回null
4.node.previousElementSibling返回当前元素上一个兄弟节点，找不到返回null
（3.4方法有兼容性问题，IE9以上才支持）
封装兼容性函数
function getNextElementSibling(element){
var el = element;
while (el = el.nextSibling){
if(el.nodeType == 1){
? ? ? ? ? ? ? return el;
? ? ? ? ? ? ?}
? ? ? ?}
return null;
}
学习this的用法，并区分this和e.target
解析器在调用函数每次都会向函数内部传递进一个隐含的参数，this，this指向的是一个对象，这个对象被称为函数执行的上下文对象，根据函数调用方式不同，this指向不同对象
1.，全局作用域或者普通函数中this指向全局window
2.方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例
function Fun（）{
console.log(this);//this指向的是fun实例对象
}
var fun = new Fun();
e.target返回的是触发事件的对象（元素）this返回的是绑定事件的对象（元素 ）
区别：e.target点击了那个元素，就返回那个元素this那个元素绑定了这个点击事件，那么就返回谁
var ul = document.querySelector('ul');
ul.addEventListener('click',function(){
//我们给ul绑定了事件，this就指向ul，点击li不做反应
console.log(this);
//e.target 指向我们点击的那个对象 谁触发了这个事件 点击li，e.target指向的就是谁
console.log(e.target);
});