Web前端學習JS篇之「DOM事件」

事件就是指為dom指定的動作，包括三個部分。

事件型別：比如onclick，為了註冊事件（繫結事件）。

事件處理程式：為了新增事件執行的核心程式。

1. 傳統方式：onclick（）這種方式無法繫結多個，後邊註冊的會覆蓋前邊註冊的。

2. 監聽方式：addeventlistener()，可以按順序執行

addeventlistener(type,listener[ ,usecapture])

type:事件型別字串，比如click,mouseover等，不帶on

listener:事件處理函式，事件發生時呼叫

usecapture：預設是false

btn.addeventlistener('click',function())

3. ie9之前的監聽：attachevent()

attachevent(eventnamewithon,callback)

此時需要使用onclick,但也是字串

btn.attachevent('onclick',function())

1. 傳統方式：btn.onclick = null

2. 監聽方式：

btn.addeventlistener('click',fn)

function fn(){

alert();

btn.removeeventlistener('click',fn);

3. ie9之前的監聽：

attach方法類似，換成detachevent即可

捕獲階段（從上往下傳），目標階段，冒泡階段（從下往上傳）

function(event)這個event就是事件物件，當作形參

事件物件是系統建立的，不需要人為傳遞引數

事件物件是事件相關資料的集合，比如滑鼠事件mouseevent中的滑鼠座標啊，鍵盤事件中的鍵盤按下啊

一般可以簡寫成function(e)

ie678使用window.event來獲取

e.target 返回事件觸發的物件（ie678使用的是e.srcelement），this返回的是事件繫結的物件，兩者不一樣

e.type 返回事件的型別

e.preventdefault()阻止預設行為，如鏈結不跳轉或者提交按鈕不提交(ie678使用returnvalue，更簡單的方式是直接return false,僅限於.onclick傳統方式，而且return之後的**都不執行)

e.stoppropagation()阻止冒泡階段（ie678使用的是e.cancelbubble = true）

原理：在父節點新增事件***，然後利用冒泡影響子節點，可以提高效率

e.clientx,e.clienty,以可視區為基準，下拉無效

e.pagex,e.pagey,以整個頁面為基準，下拉有效

e.screenx,e.screeny,以實際螢幕為基準

mouseenter和mouseover的區別

mouseover經過子盒子也會觸發，也就是會冒泡

mouseenter不會冒泡

keyup抬起觸發,keydown按下觸發（優先順序比keypress高）,keypress按下觸發但不能識別功能鍵

e.keycode：按下鍵的ascii碼值，keypress可以區分字母的大小寫

Web前端之DOM介紹

什麼是dom dom，document object model文件物件模型。html dom 定義了訪問和操作 html 文件的標準方法。dom 將 html 文件表達為樹結構，html檔案中每個標籤都是乙個節點node 物件是一種獨立的資料集合，有對應的屬性和方法。而js中物件分類三種 使用者定...

前端學習筆記js篇（2）

1.和 js中 運算會先將兩邊的資料型別進行轉換，如 1 1 會先把 1 轉換成1,再進行比較，結果自然是true 而 運算是將兩邊的資料進行完全比較，資料型別和數值必須完全相同。因此1 1 結果自然是false 被比較值 b undefined null number string boolean...

web前端學習之CSS

書寫樣式和引入方法 css cascading style sheets 全程為層疊樣式表，它主要用於定義html內容在瀏覽器內的顯示樣式，如文字大小 顏色 加粗等等。使用css樣式的好處是通過定義某個樣式，可以讓不同的網頁位置有著統一的字型 字型大小或者顏色等等。換言之，使用css可以有效的減少我...