本文為大家總結了JS DOM的常用事件,具有一定的參考價值,有興趣的夥伴們可以參考一下。
click 单击 dblclick 双击 contextmenu 右击 mouseover 鼠标悬停在元素上, 建议用 mouseenter 代替 mouseout 鼠标离开元素,建议用 mouseleave 代替 mouseenter 鼠标悬停在元素上 mouseleave 鼠标离开元素 mousedown 鼠标按键按下 mouseup 鼠标按键抬起 mousemove 鼠标移动
keydown 键盘按键按下 keyup 键盘按键抬起 keypress 键盘按键按下,用于可输入字符按键
1. 哪些元素可以監聽鍵盤事件?
① document
② 可以取得焦點的元素(表單控件,尤其是可輸入的元素)
2 . keydown 和keypress 的差別?
① keydown 所有的按鍵按下都可以觸發,無法區分大小寫按鍵。
② keypress 只有可輸入字元按鍵按下才可以觸發,可以區分大小寫按鍵。
3. 如何取得按下的是哪個按鍵?
使用event 物件中的屬性:
evnet.keyCode 取得按鍵對應的ascii 值
event .which 同keyCode
event.key 取得按鍵的字元值。
load 页面中所有的一切加载完毕就会触发,可以监听到window上或者body元素 DOMContentLoaded 页面中所有的元素加载完毕就会触发,可以监听在window或者document上, 只能使用 addEventListener 监听事件 beforeunload 当关闭网页的时候触发
load 事件與DOMContentLoaded 事件的差異:
① load事件是頁面中所有的一切加載完畢才能觸發,包括元素以及外部資源。
② DOMContentLoaded 事件是頁面中所有的元素載入完畢就可以觸發,不包含外部資源。
submit 当表单提交的时候触发,该事件监听到form元素 reset 当表单重置的时候触发,该事件监听到form元素 focus 当表单控件获取焦点的时候触发 blur 当表控件单失去焦点的时候触发 select 输入框或文本域中的内容被选中 change 对于输入框,内容改变且失去焦点才会触发;适合用于select
load 图片文件下载完毕 error 图片加载失败
resize 监听到 window上,视口大小发生改变 scroll 监听到window或者是具有滚动体的元素,页面或元素中的内容发生滚动就触发。
為事件的回呼函數設定第一個形參,就可以取得event 物件。
不同類型的事件所取得的 Event 物件類型也不同。
offsetX / offsetY 获取鼠标在目标元素上的坐标位置 clientX / clientY 获取鼠标在视口上的坐标位置 pageX / pageY 获取鼠标在页面上的坐标位置 screenX / screenY 获取鼠标在屏幕上的坐标位置 button 获取按的是哪个鼠标按键, 0:左键; 1:中间键; 2:右键
keyCode 获取按键对应的编码值 which 同 keyCode key 获取按键对应的字符值
type 获取事件名 timeStamp 获取触发事件时距离打开页面时的毫秒数 target 获取目标元素 stopPropagation() 阻止事件冒泡 preventDefault() 阻止浏览器默认行为
在事件的回呼函數中執行event.stopPropagation()
,就可以阻止冒泡。
超链接点击跳转 表单的提交和重置 右键弹出系统菜单 等...
在事件的回呼函數中呼叫event.preventDefault()
即可阻止預設行為。
注意: 如果使用第二種方式監聽事件,在回呼函數中
return false
同樣可以阻止預設行為。
事件監聽到祖先元素上,判斷目標元素,如果目標元素滿足條件,就執行相關操作。
事件委託的優勢:
對於給大量的元素監聽相同的事件,使用事件委託比遍歷挨個監聽效率更好。
利用事件委託可以讓新增的元素也可以回應事件。
相關推薦:【JavaScript影片教學】
#以上是JavaScript DOM 常用事件最新總結!的詳細內容。更多資訊請關注PHP中文網其他相關文章!