HTML事件属性

Dear 丶 2021-07-25 15:27 356阅读 0赞

# HTML事件属性 #

菜鸟教程【[HTML事件属性][HTML]】

1.  **鼠标事件**

*  click （点击鼠标）
 *  dblclick（双击鼠标）
 *  drag（拖动元素）
 *  dragend（拖动操作结束）
 *  dragenter（元素被拖动至有效的拖放目标）
 *  dragleave（元素离开有效拖放目标）
 *  dragover（元素被拖动至有效拖放目标上方）
 *  ondragstart（拖动操作开始）
 *  ondrop（被拖动元素正在被拖放）
 *  mousedown（按下鼠标）
 *  mouseup（释放按下的鼠标）
 *  mousemove（鼠标光标移动）
 *  mouseover（鼠标移入）
 *  mouseenter（鼠标移入）
 *  mouseout（鼠标移出）
 *  mouselease（鼠标移出）
 *  新增mousewheel（转动鼠标滚轮）
 *  新增onscroll（滚动元素的滚动条）

mouseover 和 mouseenter相同点与区别：都是鼠标移入一个元素时触发，区别在于：mouseenter事件只有在鼠标移入到事件所绑定的事件是才会触发且事件只触发一次，而mouseover是鼠标移入到所绑定的元素或子元素均会触发。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>鼠标移入事件</title>
      <style> #box { width: 200px; height: 200px; margin: 100px auto 0; border: 1px solid #ccc; } #subbox { width: 150px; height: 150px; margin: 25px auto 0; background: lightblue; } </style>
    </head>
    <body>
      <div id="box">
        <div id="subbox"></div>
      </div>
    </body>
    </html>
    <script> var box = document.getElementById("box"); var subbox = document.getElementById("subbox"); // 鼠标移入box和subbox时subbox均变成粉色 box.onmouseover = function () { subbox.style.background = "lightpink"; } box.onmouseout = function () { subbox.style.background = ""; } // 鼠标移入box时触发，subbox变成粉色，当移入到subbox时则变回蓝色即不触发事件， 且光标再次移到box时不再触发事件即事件只触发一次 box.onmouseenter = function () { subbox.style.background = "lightpink"; } box.onmouseout = function () { subbox.style.background = ""; } </script>

mouseout和mouselease相同点与区别：鼠标移出元素则会触发事件，区别在于mouseleave只有鼠标光标移出绑定的事件时才会触发，而mouseout只要移出事件绑定的事件或其子元素都会触发该事件。（与mouseover和mouseenter同理）。

**注**：当mouseenter和mouseleave一起使用时与mouseover和mouseout/mouseleave一起使用的感官作用是一样的。

1.  **键盘事件**  
    keydown（按下键盘）  
    keypress（按下键盘并松开按键）  
    keyup（松开按键）
2.  **表单事件**  
    blur（元素失去焦点）  
    change（元素改变）  
    contextmenu（当触发上下文菜单）  
    focus（元素获取焦点）  
    formchange（表单改变）  
    forminput（表单获得用户输入）  
    input（元素获得用户输入）  
    invalid （元素无效）  
    reset （表单重置）  
    select （选取元素）==>需要双击  
    submit （提交表单）
3.  **窗口事件**
4.  **多媒体事件**
5.  **其他事件**

[HTML]: https://www.runoob.com/tags/ref-eventattributes.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/6237dad4713a44c88634c2cae7ece009.png