js的事件機制
阿新 • • 發佈：2019-03-30
直接 不同的 行為 ndb font 失去 div 有效 html元素
3.鍵盤事件
onkeyup 當鼠標在某個HTML元素上彈起的時候觸發
onkeydown 當鼠標在某個HTML元素上下壓的時候觸發
4.焦點事件
onfocus 當某個HTML元素獲取焦點的時候觸發
onblur 當某個HTML元素失去焦點的時候觸發
5.頁面加載事件
onload 當頁面加載成功後
註意:
js中添加事件的第一種方式：
在HTML上直接使用事件操作進行添加，操作值為監聽的函數。
js中的事件只有在當前HTML元素中有效。
一個HTML元素可以添加多個不同的事件。
一個事件 可以觸發多個函數的執行，但是不同的函數要使用分號隔開。
<input type="button" id="" value="單擊事件" onclick="testdbclick()"/>
<hr /><br />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove();"
onmouseout="testOnmouseout();">
</div>
<hr />
鍵盤事件學習：<br />
鍵盤彈起事件： <input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/>
<br />
鍵盤下壓事件： <input type="text" name="" id="" value="" onkeyup="testOnkeydown()"/>
<hr />
焦點事件學習：<hr />
獲取焦點：
<input type="text" name="" id="" value="" onfocus="testOnfocus();"/>
失去焦點：
<input type="text" name="" id="" value="" onfocus="testOnblur()"/>
js的事件機制
解釋：當我們的行為動作滿足了一定的條件後，會觸發某事務的執行。
內容：
1.單雙擊事件
單擊：onclick 當鼠標單擊時候會觸發
雙擊：ondbclick 當鼠標雙擊時候會觸發
2.鼠標事件
onmouserover 當鼠標懸停在某個HTML元素上的時候觸發
onmousermove 當鼠標在某個HTML元素上移動的時候觸發
onmouseout 當鼠標在某個HTML元素上移除的時候觸發
3.鍵盤事件
onkeyup 當鼠標在某個HTML元素上彈起的時候觸發
onkeydown 當鼠標在某個HTML元素上下壓的時候觸發
4.焦點事件
onfocus 當某個HTML元素獲取焦點的時候觸發
onblur 當某個HTML元素失去焦點的時候觸發
5.頁面加載事件
onload 當頁面加載成功後
註意:
js中添加事件的第一種方式：
在HTML上直接使用事件操作進行添加，操作值為監聽的函數。
js中的事件只有在當前HTML元素中有效。
一個HTML元素可以添加多個不同的事件。
一個事件 可以觸發多個函數的執行，但是不同的函數要使用分號隔開。
實現代碼
<h3>js的單擊事件機制</h3>
<hr />
<input type="button" id="" value="單擊事件" onclick="testOnclick()"/>
<input type="button" id="" value="單擊事件" onclick="testdbclick()"/>
<hr /><br />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove();"
onmouseout="testOnmouseout();">
</div>
<hr />
鍵盤事件學習：<br />
鍵盤彈起事件： <input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/>
<br />
鍵盤下壓事件： <input type="text" name="" id="" value="" onkeyup="testOnkeydown()"/>
<hr />
焦點事件學習：<hr />
獲取焦點：
<input type="text" name="" id="" value="" onfocus="testOnfocus();"/>
失去焦點：
<input type="text" name="" id="" value="" onfocus="testOnblur()"/>
js的事件機制