事件詳解2

2022-03-07 23:21:26 字數 2355 閱讀 6780

預設行為

•什麼是預設行為

不需要自己去編寫,瀏覽器本身就具備的功能

如:在空白頁面點選滑鼠右鍵出現選單

l阻止預設行為

•普通寫法:return false;

•例子1.  遮蔽右鍵選單

document.oncontextmenu=function

();

同理,阻止表單提交onsubmit、

阻止onkeydown

–彈出自定義右鍵選單

>無標題文件

title

>

<

script

>

document.oncontextmenu

=function

(ev)

;document.onclick

=function();

script

>

head

>

<

body

>

<

ul id

="ul1"

>

<

li>登陸

li>

<

li>回到首頁

li>

<

li>登出

li>

<

li>加入vip

li>

ul>

body

>

html

>

view code

•例子2.  只能輸入數字的輸入框

>無標題文件

title

>

<

script

>

window.onload

=function

()

//return false;

};};

script

>

head

>

<

body

>

<

input

id="txt1"

type

="text"

/>

body

>

html

>

view code

–keydown、keyup事件的區別

簡易拖拽

•拖拽原理

距離不變

三個事件 onmousedown 、onmousemove、onmouseup

靠譜拖拽

注意問題

•拖拽的問題

–直接給document加事件

•ff下,空div拖拽bug

–阻止預設事件

•防止拖出頁面

修正位置

總結:1. 什麼是事件的預設行為

2. 上下文選單:oncontextmenu

3. 文字框內禁止輸入內容例項

4. 自定義右鍵選單例項

5. 只能輸入數字的輸入框例項:onkeydown、onkeyup

6. 拖拽例項:拖拽原理、三個事件、document範圍、解決ff的bug

7. 限制拖拽範圍的條件:document.documentelement.clientwidth

路由事件詳解

路由事件 路由事件是指一些在試圖樹中按照它們的路由規則可上拋或下拋的事件。這種路由事件經常有 管道 冒泡 直接 可以將事件處理器直接掛接在新增事件的元素上,也可以通過附加屬性語法 button.click button click 掛接在他上面或者下面的其他元素上。路由事件一般是成對出現的。第乙個是...

onPropertyChange 事件詳解

先看這麼一段解釋 onpropertychange 當在物件上進行屬性改變時候觸發 onchange 當物件內容或者選擇內容改變時候觸發 當乙個html元素的屬性改變的時候,都能通過onpropertychange來捕獲。例如乙個物件的value屬性被頁面的指令碼修改的時候,onchange無法捕獲...

JavaScript 事件詳解

描述的是在頁面中接受事物的順序 由最具體的元素接收,然後逐級向上傳播至最不具體的元素節點 文件 最不具體的節點接收事件,而最集體的節點應該是最後接收事件 直接新增到html結構中 按鈕 這種處理方式,存在修改函式名,需要到html中修改事件呼叫的函式名的問題 把乙個函式賦值給乙個事件處理程式屬性 解...