【Python全栈-JavaScript】原生的JavaScript 之鼠标事件、键盘事件和HTML事件


原生的JavaScript 鼠标事件和键盘事件

JavaScript 鼠标事件有以下8种:

onmousedown
鼠标的键钮被按下。

onmouseup
鼠标的键钮释放弹起。

onclick
鼠标左键(或中键)被单击。

事件触发顺序是:onmousedown -> onmouseup -> onclick

ondblclick
鼠标左键(或中键)被双击。

事件触发顺序是:onmousedown -> onmouseup -> onclick -> onmousedown -> onmouseup -> onclick -> ondblclick。

oncontextmenu
弹出右键菜单,它可能是鼠标右键触发的,也可能是键盘的菜单键触发的。

onmouseover
鼠标移动到目标上方。

onmouseout
鼠标从目标上方移出。

onmousemove
鼠标在目标上方移动

注意:事件名称大小写敏感。若需要监听以上事件,则在事件名的前面加个on即可。

事件区别

onmouseover、onmouseout:鼠标移动到自身时候会触发事件,同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave:鼠标移动到自身是会触发事件,但是移动到其子元素身上不会触发事件

全局事件对象event

event.x
事件发生时鼠标的位置

event.y
事件发生时鼠标的位置

button
鼠标的哪一个键触发的事件

0
鼠标左键
1
鼠标中键
2
鼠标右键

代码范例1:


  
    
  

代码范例2:




    
    鼠标事件











JavaScript 键盘事件有以下3种:

keydown:按键按下 keyup:按键抬起 keypress:按键按下抬起



    
    键盘事件







JavaScript HTML事件

load:文档加载完成 select:被选中的时候 change:内容被改变 focus:得到光标 resize:窗口尺寸变化 scroll:滚动条移动