1、兼容性
（1）語法（syntax）: addEventListener(type, handler, useCapture)
type:事件類型
handler:事件處理函數
useCapture:是否在捕獲階段觸發
兼容支持：ie9 以上主流瀏覽器。
(2) 語法（syntax）:attachEvent("on" + type, hander )
type:事件類型
handler:事件處理函數
兼容支持：ie6-10。
2、初級封裝
function ?registerEvent(ele,type,handler){
? ? ? ? if(ele.addEventListener){
? ? ? ? ? ? ? ele.addEventListener(type,handler,false);
? ? ? ? }else if(ele.attachEvent){
? ? ? ? ? ? ? ele.attachEvent("on"+type,handler);
? ? ? ? }else{
? ? ? ? ? ? ? ele["on"+type]=handler;
? ? ? ? }
}
缺點：同一個頁面里有多次注冊事件，而每次調用都要判斷一次瀏覽器的支持環境，浪費資源！
3、中級封裝
function ?createRegister(){
? ? ? if(window.addEventListener){
? ? ? ? ? ? ?return function(ele,type,handler){
? ? ? ? ? ? ? ? ? ? ?ele.addEventListener(type,handler,false);
? ? ? ? ? ? ?}
? ? ? ?}else if(window.attachEvent){
? ? ? ? ? ? ?return function(ele,type,handler){
? ? ? ? ? ? ? ? ? ? ele.attachEvent("on"+type,handler);
? ? ? ? ? ? ?}
? ? ? ? }else{
? ? ? ? ? ? ? ?return function(ele,type,handler){
? ? ? ? ? ? ? ? ? ? ? ?ele["on"+type]=handler;
? ? ? ? ? ? ? ?}
? ? ? ?}
}
優點：調用craeteRegister函數，并不是在注冊事件，而是獲取一個當前瀏覽器支持的注冊事件的方式? ??
?var? eventRegister? =? createRegister();
缺點：（1）.事件對象的獲取，要處理；
? ? ? ? ? ?（2）. this的指向問題，也要處理。
3、高級封裝
function? createRegister(){
? ? ? ? ?if(window.addEventListener){
? ? ? ? ? ? ? ? ?return function(ele,type,handler){
? ? ? ? ? ? ? ? ? ? ? ?ele.addEventListener(type,handler,false);
? ? ? ? ? ? ? ? ?}
? ? ? ? ?}else if(window.attachEvent){
? ? ? ? ? ? ? ? return function(ele,type,handler){
? ? ? ? ? ? ? ? ? ? ? ? ele.attachEvent("on"+type,function(){
//使用一個中間函數，這樣子就可以自己控制調用了，call方法將this指向我們需要的ele.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?handler.call(ele,window.event);
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }
? ? ? ? ?}else{
? ? ? ? ? ? ? ? ?return function(ele,type,handler){
? ? ? ? ? ? ? ? ? ? ? ?ele["on"+type]=handler;
? ? ? ? ? ? ? ? ?}
? ? ? ? ? }
}
優點：（1）、使用我們封裝好的eventRegister這個函數的時候，不再需要考慮瀏覽器的兼容性問題。
(2)、用一種統一的方式，就能夠獲取到事件對象，以及當前點擊的元素對象。
總結：第一次寫簡書，好不習慣啊，求教怎么在上面寫出開發者工具的代碼，寫的好了啊！奔潰！
謝謝，望大神指教！
