Javascript學習筆記8 事件

事件流：從頁面中接受事件的順序

事件冒泡（ie）：事件開始時由最具體的元素（文件中巢狀層次最深的那個節點）接受，然後逐級向上傳播到較不具體的文件節點（文件）

事件捕獲：恰恰與事件冒泡相反，不太具體的節點應該更早接受到事件，而最具體的節點應該最後接受到事件（較少人使用）。

dom2事件規定事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段

事件處理程式：響應某個事件的函式，以on開頭，例如onclick，事件處理程式中的**在執行過程中，有權訪問全域性作用域中的任何**。this物件指向事件的目標元素

type=

"button"
value="click me" onclick="alert(this.value)">

var btn = document.getelementbyid("mybtn");

btn.onclick =function
();btn.onclick = null; //刪除事件

接受3個引數：要處理的事件名、作為事件處理程式的函式、乙個布林值（true表示在事件捕獲階段呼叫事件處理程式，而false代表在事件冒泡階段呼叫事件處理程式）

btn.addeventlistener("click",function

(),false);

var btn = document.getelementbyid("mybtn");

btn.onclick =function
(event);

ui事件

焦點事件

滑鼠事件

座標位置

滑鼠的座標位置儲存在事件物件的屬性中

修改鍵

同樣儲存在事件物件的屬性中，當相應的鍵被按下時為true，否則為false

滑鼠按鈕

針對mousedown和mouseup事件，確定是滑鼠哪個鍵被按下和釋放，值儲存在event.button屬性中

滑鼠滾輪

只針對mousewheel事件，儲存在event.wheeldelta屬性中，向前滾動是正數，向後滾動時負數

鍵盤和文字事件

事件的發生順序：keydown▷keypress▷keyup

在發生keydown和keyup事件時，event.keycode屬性會包含乙個鍵碼，對應某個按鍵

在發生keypress事件時，event.charcode屬性會包含按下鍵的ascii值

在發生textinput事件時，event.data屬性會包含使用者輸入的字元值

變動事件

當dom中的某一部分發生變化時，觸發的事件

html5事件

div.addeventlistener("contextmenu",function

(event),false);

利用事件冒泡，只需指定乙個事件處理程式，就可以管理某一型別的所有事件。節約了記憶體

var

list = document.getelementbyid("mylist"); //獲取列表
list.addeventlistener("click",function
(event)
},false);

當移除dom某元素時，不要忘記將其繫結的事件處理程式移除

someelement.onclick =null;

建立event物件

var

event = document.createevent(事件型別)
//事件型別包括：uievents、mouseevents、mutationevents（變動事件）、htmlevents、keyevents等

每個不同型別的事件物件，都具有乙個初始化方法，指定觸發的事件具體型別，該如何觸發事件，是否冒泡等

//滑鼠事件物件的初始化

event.initmouseevent("click",true,true,document.defaultview,0,0,0,0,0,false,false,false,false,0,null);

var btn = document.getelementbyid("mybtn");

btn.dispatchevent(event); //觸發事件

Javascript 學習筆記

如果在生成的html裡面有事件需要傳遞帶特殊字元的引數，處理如下 singletext 輸入 1.singletext value.escapehtml 為 將html編碼 2.singletext value.escapehtml inspect 為 3.在 jsdebugtext innerht...

javascript學習筆記

視窗操作 1改變視窗的位置 window.location 2視窗的歷史操作 previous 3建立新的視窗 window.open url 視窗名稱 視窗特徵字元 細節 不能換行寫 視窗特徵 width,height,yes,no munubar,status,scrollbars,resiza...

javaScript學習筆記

2018 12 26 標題 var num1 10 var num2 0 var result num1 num2 console.log result infinity 表示超出了js的數值範圍 類似高數里的整數除以無窮小的數，得到無窮大的結果。var num1 a var num2 3 或其它n...