加on和不加on的區別:

????????1.加on的是綁定事件,綁定在某個元素上,當該元素滿足事件條件時執行,示例 :?

<script type="text/javascript"> function change(){ alert("onclick"); } </script> <button id="btn3" onclick="change()">dd</button>

? ? ? ? 2.不加on的是方法,作用是,當調用這個方法的元素滿足事件狀態時,執行事件方法中的function方法代碼

<script type="text/javascript"> $(function(){ $("#btn4").click(function(){ alter("1");}); }); </script> <button id="btn4">ee</button>

提示:兩者用法有些許不同,是兩個感念,但本質一樣,加on的是在元素中綁定一個在js中寫好的方法,不加on是獲取一個元素,給他加上事件方法

注意:

????????1 . 事件方法中不要直接寫代碼,要寫function(){}方法后在里面寫代碼

????????元素.click(function(){

? ? ????????? ? 執行操作:

????????});

? ? ? ? 2.onclick綁定的方法不要寫在${function(){}}中, 既文檔加載完成時執行的代碼中,不然調用的那個方法無效,是不執行的,可以自己屢屢思路就知道的緣故

?( 因為寫在文檔加載完成時里面的話 , 加載完頁面后那個聲明在那里面的方法就相當于" 被執行過一遍了 " , 但是因為文檔加載完成時里面的代碼沒有調用那個方法,所以你看到不他執行過后的效果,然后你再在其他地方調用這個已經被執行過然后丟進垃圾緩存里的東西,是找不到的,就算有,對程序而言也沒有,就算聯想到也沒有,不是說js的方法只能被執行一遍就不執行了,是因為他寫在加載文檔完成時執行了,加載完成時執行一遍后就不會再執行了,簡單說,作用域不同 )

鼠標事件

事件	描述
onclick	鼠標點擊時觸發
ondbclick	鼠標雙擊時觸發
onmousedown	鼠標按下時觸發 （只是按下的瞬間）
onmouseleave	鼠標移除事件
onmouseover	鼠標劃過，經過，移進時觸發
onmousemove	鼠標移動，指的是移動,時觸發 (與over的區別在于over只是在移進時觸發一次，而move只要鼠標移動就會觸發)
onmouseout	移開時觸發
oncontextmenu	鼠標右鍵菜單展開時觸發。 在此事件中 ev.preventDefault() 可阻止右鍵菜單的彈出。

鍵盤事件

事件	描述
onkeydown	鍵盤被按下動作時觸發
onkeyup	鍵盤被松開時觸發
onkeypress	某個鍵盤的鍵被按下或按住時觸發 [ 鍵盤 < 字符鍵 ( 除去那些功能鍵，例如：Ctrl shift等 ) > 被按下,而且如果按住不放的話，會重復觸發此事件 ]

UI事件

事件	描述
window.onload	頁面元素（包含圖片，多媒體等）加載完成后執行
window.onscroll	頁面滾動事件
window.onresize	窗口或者框架被重新調整大小時

表單事件

事件	描述
onblur	失去焦點時（表單驗證最常用）
onfocus	獲得焦點時觸發
onchange	內容改變且失去焦點時
change	狀態發生改變事件
oninput	內容改變時
onreset	重置按鈕被點擊
onsubmit	提交按鈕被點擊
onselect	輸入框文本被選中

事件

事件	描述
onabort	圖像加載被中斷
ondblclick	鼠標雙擊某個對象
onerror	當加載文檔或圖像時發生某個錯
onload	某個頁面或圖像被完成加載
onmouseup	某個鼠標按鍵被松開
onreset	重置按鈕被點擊
onresize	窗口或框架被調整尺寸
ondragstart	用戶開始拖動元素時觸發
ondrag	元素正在拖動時觸發
ondragend	用戶完成元素拖動后觸發
ondragenter	當被鼠標拖動的對象進入其容器范圍內時觸發此事件
ondragover	當被拖動的對象在另一對象容器范圍內拖動時觸發此事件
ondragleave	當被鼠標拖動的對象離開其容器范圍內時觸發此事件
ondrop	在一個拖動過程中，釋放鼠標鍵時觸發此事件

總結

以上是生活随笔為你收集整理的前端事件大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。