事件流、事件對象

1、事件流

多個彼此嵌套元素，他們擁有相同的事件，最內部元素事件被觸發後，外邊多個元素的同類型事件也會被觸發，多個元素他們同類型事件同時執行的效果稱爲「事件流」。

事件流分類：true 捕捉型、false 冒泡型

2、事件對象

事件對象，每一個事件(包括鼠標、鍵盤事件)觸發執行的過程當中，都有對應的事件對象，經過事件對象能夠得到鼠標相對頁面的座標信息、經過事件對象也能夠感知什麼鍵子被 觸發執行、經過事件對象還能夠阻止事件流產生、阻止瀏覽器默認動做。

一、得到事件對象

 

①主流瀏覽器(IE9以上版本瀏覽器)：

    node.onclick = function(evt){evt就是事件對象}

    addEventListener(類型,function(evt){}/函數名字);

        function 函數名稱(evt){}

    事件處理函數的第一個形參就是事件對象

② IE(6/7/8)瀏覽器

    node.onclick = function(){window.event事件對象}

    全局變量event就是事件對象

兼容：var evnt = evt ? evt : window.event；

 

二、得到鼠標的座標信息

 

　　event.clientX/clientY;    //相對dom區域座標

　　event.pageX/pageY;        //相對dom區域座標，給考慮滾動條位置

 

　　event.screenX/screenY;    //相對屏幕座標

 

三、阻止事件流

　　event.stopPropagation();  //主流瀏覽器

　　event.cancelBubble = true; // IE瀏覽器

　　冒泡型、捕捉型均可以進行阻止,爲了瀏覽器兼容處理，只考慮冒泡型。

 

四、阻止瀏覽器默認動做

    瀏覽器默認動做，註冊form表單頁面，提交表單的時候，瀏覽器的頁面會根據action屬性值進行跳轉，這個動做稱爲「瀏覽器默認動做」。

    event.preventDefault();    //主流瀏覽器   

    event.returnValue = false;     //IE瀏覽器

    return  false;              //dom1級事件設置起做用

 

五、感知被觸發鍵盤鍵子信息

　　event.keyCode  得到鍵盤對應的鍵值碼信息

　　經過事件觸發時候得到的keyCode數值碼信息能夠對應鍵盤的鍵子信息。