十二、JavaScript事件

一、事件的傳播和阻止

事件的傳播：點選後代标簽時，會觸發所有父級标簽相同類型的事件

執行順序：從目前标簽向父級元素執行，也就是執行目前标簽的事件，再逐一執行父級标簽的事件

捕獲順序：目前标簽觸發事件，會尋找父級标簽上相同的事件類型一起執行

冒泡機制：ie浏覽器，從子級開始，向父級擷取具有相同的事件類型

捕獲機制：非ie浏覽器，從父級開始，向子級擷取具有相同的事件類型，執行時，順序都是 從 目前标簽 至 父級标簽

阻止事件的傳播

普通浏覽器：

低版本ie浏覽器：

誰寫誰阻止，誰不觸發父級，誰不寫誰觸發父級

二、事件委托

事件不是寫給目前标簽的，而是綁定給父級标簽

通過父級标簽觸發事件，然後通過判斷觸發事件的對象，來判斷需要執行的不同代碼

綁定給父級标簽對象的事件，觸發時有可能是不同的标簽對象，觸發的事件

子級标簽沒有綁定事件，因為是父級标簽的一部分，點選子級也算是點選父級，因為也會觸發父級的事件

三、tab切換

原理：通過父級标簽添加點選事件，以事件委托的方式給ul>li添加執行程式

缺點：

沒有通過循環周遊，給所有ul>li添加事件，沒有擷取到索引下标

就必須要在 ul>li 标簽中自定義屬性和屬性值，屬性值就是标簽對應的索引下标

四、事件對象的屬性

e.target：觸發事件的标簽對象

e.target.parentelement：直接父級标簽對象

e.target.parentnode：直接父級标簽對象

e.target.tagname：觸發事件的标簽對象名稱，全大寫英文字母

點選事件中，e事件對象中存儲坐标資訊，隻能擷取滑鼠點選的位置坐标，不能設定

鍵盤事件中，e事件對象中存儲的按鍵資訊

offsetx，offsety

觸發事件的标簽對象，左上角為坐标原點

在滑鼠拖拽時，滑鼠坐标原點會改變

在整個頁面中拖拽div

起始時坐标原點是 document 文檔的左上角

當滑鼠經過div時，坐标原點是 div 的左上角

擷取的坐标數值不同，會造成 div 閃來閃去

clientx，clienty

視窗視窗，左上角為坐标原點

pagex，pagey

html文檔，左上角為坐标原點