1. 程式人生 > >JavaScript中的事件

JavaScript中的事件

post 阻止 over parseint 大小寫 null t對象 影響 roo

#總結 上星期五主要內容講的是事件有事件流的概念,總結來說就是三種傳遞的方法,dom瀏覽器默認為從下往上的冒泡方式,但是可以支持捕獲方式,而IE只有冒泡。
事件分四種:內嵌事件、DOM0級事件和DOM2級事件、以及IE的事件,第一種事件方式不推薦,DOM0和DOM2兩種各有優缺點。
事件的類型有很多種,一般分為鼠標事件、鍵盤事件和其他。我們可以用傳入一個e的方式來獲取到Event對象,並使用其屬性。少部分事件帶有一些默認的行為,我們可以用相應方法予以清除。而事件冒泡也是有阻止其發生的方法的。
除以上內容,還有一個事件委托,概括起來意思就是子節點不處理事件,統一交由父元素處理。
以上知識點都能理解,活用上面有所欠缺,在之後的練習裏盡量多使用。 本周的練習基本都能做出來,但是周末這個按鈕確實把我難著,實現的效果實在太少,希望明天能好好看看老師思路。
##事件 ***
- ###事件流
* 概念:當一個標簽觸發事件以後,從這個標簽沿著一個方向傳遞,這就叫事件流。是瀏覽器處理事件的方法。 * 分類: - 冒泡(從下到上)(IE只支持) - 捕獲(從上到下) (網景) - DOM事件流—DOM瀏覽器 (先捕獲,後冒泡)(默認冒泡)(如果兩種方法都存在,最後順序由代碼決定)
- ###事件處理方法 * 內嵌事件 盡量避免使用內嵌事件
* DOM0級事件
- 優點:兼容各個瀏覽器 - 缺點:只能為一個事件添加一個處理方法 - 添加、刪除,可以用null覆蓋事件
* DOM2級事件 - addEventListener (dom瀏覽器)
`addEventListener("click",function(){},true代表捕獲/false代表冒泡)//三個參數` - 缺點:兼容有問題 - 優點:能為一個事件添加多個處理方法 - 刪除:removeEventListener 註意三個參數必須一樣,特別註意函數名
- attachEvent (IE瀏覽器) - 刪除:tetachEvent()兩個參數,除去第三個 - ###事件類型
* 鼠標 - mouse - over out 還會執行 裏面有子元素 - enter leave 子元素沒有影響 * 鍵盤 - key -down 一直按著 - up 彈起執行 - 按下彈起執行
* 其他 - onscroll
* ###事件對象(Event) - dom瀏覽器
- 獲取方法 :函數裏傳入一個e - clientX clientY //鼠標相對於瀏覽器 - screenX screenY //鼠標相對於窗口

- IE - `e =window.event || e ;` 做兼容
- 屬性
- onkeydown 鍵值,不分大小寫 - onkeyup - onkeypress 字符碼 - keyCode (常用) - charCode - which
- 阻止事件的默認行為(方法) - e.preventDefault();(dom) - e.returnValue=false; (IE) - 阻止事件冒泡 - e.stopProopagation//DOM - e.cancelBubble=true;//IE
- ###技巧 - border-collapse:collapse; - border-spaceing:0; - 還原顏色 "" - `parseInt(moveDiv.style.left || 0); //常見的數初始化技巧`
- ###事件委托
- 子元素不處理,父元素來處理事件。


JavaScript中的事件