生活随笔
收集整理的這篇文章主要介紹了
JavaScript之事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、鼠標事件
案例
<!DOCTYPE html
>
<html
><head
><meta charset
="UTF-8"><title
></title
><style type
="text/css">#d1
{width
: 100px
;height
: 100px
;background
-color
: red
;}</style
><script type
="text/javascript">function fun1(){console
.log("雙擊666")}function fun2(){console
.log("鼠標按下")}function fun3(){console
.log("鼠標抬起")}function fun4(){console
.log("鼠標進入")}function fun5(){console
.log("鼠標離開")}function fun6(){console
.log("鼠標移動")}</script
></head
><body
><div id
="d1" ondblclick
="fun1()" onmousedown
="fun2()" onmouseup
="fun3()" onmouseenter
="fun4()" onmouseleave
="fun5()"onmousemove
="fun6()"></div
></body
>
</html
>
二、按鍵事件
案例
<!DOCTYPE html
>
<html
><head
><meta charset
="UTF-8"><title
></title
><script type
="text/javascript">function func1(){console
.log("按鈕按下")}function func2(){console
.log("按鈕抬起")}function func3(){console
.log("按鈕按下并抬起")}</script
></head
><body
><input type
="text" onkeydown
="func1()" onkeyup
="func2()" onkeypress
="func3()"/></body
>
</html
>
三、表單事件
案例
<!DOCTYPE html
>
<html
><head
><meta charset
="UTF-8"><title
></title
><script type
="text/javascript">function fun1(){console
.log("獲得焦點")}function fun2(){console
.log("失去焦點")}function fun3(){console
.log("正在輸入")}function fun4(){console
.log("內容改變")}function fun5(sel){console
.log(sel
.value
)}function fun6(){alert("提交")return false}function fun7(){console
.log("重置")return false}</script
></head
><body
><form action
="https://www.baidu.com" method
="get" onsubmit
="fun6()" onreset
="fun7()">用戶名
:<input type
="text" name
="username" id
="username" value
="" onfocus
="fun1()" onblur
="fun2()" oninput
="fun3()" onchange
="fun4()"/><br
/><br
/><select name
="city" onchange
="fun5(this)"><option value
="1" selected
>--請選擇城市
--</option
><option value
="2">北京
</option
><option value
="3">長沙
</option
><option value
="4">濟南
</option
></select
><br
/><br
/><!--<input type
="submit" value
="提交數據" onsubmit
="fun6()"/><input type
="reset" value
="充值數據" onreset
="fun7()"/>--><input type
="submit" value
="提交數據"/><input type
="reset" value
="充值數據"/></form
></body
>
</html
>
四、頁面加載事件
<!DOCTYPE html
>
<html
><head
><meta charset
="UTF-8"><title
></title
><script type
="text/javascript">function testFun(){var in1
=document
.getElementById("d1")var v1
=in1
.valueconsole
.log(v1
)}</script
></head
><body onload
="testFun()"><input type
="text" name
="d1" id
="d1" value
="test" /></body
>
</html
>
總結
以上是生活随笔為你收集整理的JavaScript之事件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
