在js中有一個專門的事件對象,來對事件進行操作:
event:當事件發生時,與事件有關的信息存儲在一個臨時的地方-event對象里面.供我們隨時調用
event對象的方法:
clientX:鼠標距離頁面可視區域左邊的距離,相應的Y為上邊的距離

事件流里的事件冒泡現象:
首先,試想冒泡是什么意思,在沸水里冒泡泡,物質從一個介質中提煉出來進入另一個介質,這就是冒泡現象
那么事件冒泡就是當一個元素接受到事件時,會把它接收的所有信息傳給父級,一直到頂層window,這種現象為事件冒泡機制.

認識一下事件:事件的存在并不受事件函數的影響,比如無論div元素是否綁定了onclick事件,當你點擊div時,點擊這個事件已經存在了
,只是如果未綁定事件函數的話,什么也不會發生而已.

冒泡會解決很大一部分重復操作,但是有時候需要某個元素脫離事件流,不參與冒泡所以在要阻止的事件函數中添加event.cancelBubble=true;語句,cancelBubble意為取消冒泡.例:

oBtn.onclick=function(){
  var ev=ev||event; 這是為兼容性考慮
  ev.cancelBubble=true;  阻止oBtn點擊事件的冒泡現象;
}

接下來學習另外一種綁定事件函數的方法:

首先我們掌握的綁定事件函數的方法為:
obj.onclick=function(){};
但當我們需要綁定多個函數為點擊事件時就會出現問題

obj.onclick=function fn1(){};
obj.onclick=function fn2(){};

這樣寫,fn2會覆蓋fn1,二者不能共存,所以出現第二種方法可以使多個函數共存,但是第二種綁定存在兼容性問題:

ie:obj.attachEvent("on"+事件名稱,事件函數)

1.沒有捕獲
2.事件名稱必須加"on"
3.事件函數的執行順序:ie 678為倒序執行,即先執行寫在下面的函數,ie9以后為正序.
4.this指向Window(即在使用this時,事件函數相當于綁定到了Window)

w3c:obj.addEventListenner(事件名稱,事件函數,是否捕獲);
1.有捕獲 默認false為冒泡 true為捕獲
2.事件名稱沒有"on"
3事件順序只有正序
4.this指向當前對象(正常)

例子:

function ok(obj,evname,fn){                           定義三個參數,接下來的函數中要用

  綁定事件函數存在兼容性問題,所以用if:

  if(obj.addEventListenner){ 
    obj.addEventListenner(evname,fn1,false);         w3c瀏覽器
    obj.addEventListenner(evname,fn2,false);
  }else{
    obj.attachEvent(     "on"+evname , function(){fn1.call(obj);  在該事件函數中添加這句解決this問題}   ); 在ie,由于this指向有問題,所以用call修正為obj
    obj.attachEvent(     "on"+evname , function(){fn2.call(obj);}                                       );
    };

}

如上,第二種綁定事件函數的方法可以使fn1和fn2共存,但執行順序ie和w3c有所不同.

call方法為function函數的一種原生方法,就像數組里的push一樣.
call意為調用函數:fn()==fn.call() 這兩個是完全一樣的,但call更為強大,使用call調用函數時可直接傳參,其中第一個參數可以改變函數內部this的指向,從第二個參數開始就是原來的函數參數列表.如果第一個參數為null即空,則不改變this指向.