WebAPI-js常用鼠标事件汇总

╰半夏微凉° 2023-06-12 11:05 13阅读 0赞

#### onclick点击事件 ####

`oncllick` 点击事件，在绑定该事件的元素被鼠标点击时就会触发

语法：

> elementObject.onclick = eventHandler

*  `elementObject` 将要绑定事件的元素对象
 *  `eventHandler` 事件处理函数

示例：

<button id="btn">按钮</button>
    
    <script> // 获取元素对象 var el = document.querySelector('#btn') // 为元素注册点击事件 el.onclick = function() { // 事件处理函数 alert('触发了点击事件！') } </script>

![在这里插入图片描述][20191112193744235.gif]

#### onmouseover ####

`onmouseover` 鼠标移入事件；当鼠标移入到指定元素上时触发

语法：

> elementObject.onmouseover = eventHandler

示例：

<div id="box" style="width:200px;height:200px;background:skyblue;"></div>
    
    <script> // 获取元素对象 var el = document.querySelector('#box') // 为元素注册进入事件 el.onmouseover = function() { // 事件处理函数 console.log('触发了鼠标进入事件') } </script>

![在这里插入图片描述][20191112200738944.gif]

#### onmouseout ####

`onmouseout` 鼠标离开事件；当鼠标指针移出指定元素时就会触发

语法：

> elementObject.onmouseout = eventHandler

示例：

<div id="box" style="width:200px;height:200px;background:skyblue;"></div>
    
    <script> // 获取元素对象 var el = document.querySelector('#box') // 为元素注册离开事件 el.onmouseout = function() { // 事件处理函数 console.log('触发了鼠标离开事件！') } </script>

![在这里插入图片描述][20191112202131448.gif]

#### onmouseenter ####

`onmouseenter` 鼠标进入事件；与 onmouseover 事件类似，唯一的区别是 onmouseenter 事件不支持事件冒泡

语法：

> elementObject.onmouseenter = eventHandler

示例：

<div id="box" style="width:200px;height:200px;background:purple;"></div>
    
    <script> // 获取元素对象 var el = document.querySelector('#box') // 为元素注册进入事件 el.onmouseover = function() { // 事件处理函数 console.log('触发了鼠标进入事件') } </script>

![在这里插入图片描述][20191112204340546.gif]

#### onmouseleave ####

`onmouseleave` 鼠标离开事件；与 onmouseout事件类似，唯一的区别是 onmouseleave 事件不支持事件冒泡

语法：

> elementObject.onmouseleave = eventHandler

示例：

<div id="box" style="width:200px;height:200px; background:purple;"></div>
    
    <script> // 获取元素对象 var el = document.querySelector('#box') // 为元素注册离开事件 el.onmouseleave = function() { // 事件处理函数 console.log('触发了鼠标离开事件') } </script>

![在这里插入图片描述][20191112204857366.gif]

#### onmousemove ####

`onmouseove` 鼠标移动事件；鼠标在指定元素对象上移动时就会触发

语法：

> elementObject.onmousemove = eventHandler

示例：

<div id="box" style="width:200px;height:200px;background:pink;"></div>
    
    <script> // 获取元素对象 var el = document.querySelector('#box') // 为元素注鼠标移动事件 el.onmousemove = function() { // 事件处理函数 console.log('触发了鼠标移动事件') } </script>

![在这里插入图片描述][20191112210135610.gif]

#### onmouseup ####

`onmouseup` 鼠标按键弹起事件；在鼠标按键抬起时会触发（左键、右键和滚轮抬起后均会触发）

语法：

> elementObject.onmouseup = eventHandler

示例：

<button id="btn">按钮</button>
    
    <script> // 获取元素对象 var el = document.querySelector('#btn') // 为元素注册鼠标按键抬起事件 el.onmouseup = function() { // 事件处理函数 console.log('触发了鼠标按键弹起事件！') } </script>

![在这里插入图片描述][20191112211045352.gif]

#### onmousedown ####

`onmousedown` 鼠标按键按下时会触发该事件；同样左键、右键和滚轮按下后均会触发

语法：

> elementObject.onmousedown = eventHandler

示例：

<button id="btn">按钮</button>
    
    <script> // 获取元素对象 var el = document.querySelector('#btn') // 为元素注册按下事件 el.onmousedown = function() { // 事件处理函数 console.log('触发了鼠标按下事件！') } </script>

![在这里插入图片描述][20191112211839179.gif]

#### onfocus ####

`onfocus` 在元素对象获得焦点时会触发该事件；多用于表单元素

语法：

> elementObject.onfocus = eventHandler

示例：

<input type="text" id="txt"/>
    
    <script> // 获取元素对象 var el = document.querySelector('#txt') // 为元素注册焦点事件 el.onfocus = function() { // 事件处理函数 console.log('触发了焦点事件！') } </script>

![在这里插入图片描述][20191112212730710.gif]

#### onblur ####

`onbulr` 元素失去焦点时触发的事件；一般多用于表单元素

语法：

> elementObject.onblur = eventHandler

示例：

<input type="text" id="txt"/>
    
    <script> // 获取元素对象 var el = document.querySelector('#txt') // 为元素注册焦点事件 el.onblur = function() { // 事件处理函数 console.log('触发了失焦事件！') } </script>

![在这里插入图片描述][20191113083538175.gif]

[20191112193744235.gif]: https://img-blog.csdnimg.cn/20191112193744235.gif
[20191112200738944.gif]: https://img-blog.csdnimg.cn/20191112200738944.gif
[20191112202131448.gif]: https://img-blog.csdnimg.cn/20191112202131448.gif
[20191112204340546.gif]: https://img-blog.csdnimg.cn/20191112204340546.gif
[20191112204857366.gif]: https://img-blog.csdnimg.cn/20191112204857366.gif
[20191112210135610.gif]: https://img-blog.csdnimg.cn/20191112210135610.gif
[20191112211045352.gif]: https://img-blog.csdnimg.cn/20191112211045352.gif
[20191112211839179.gif]: https://img-blog.csdnimg.cn/20191112211839179.gif
[20191112212730710.gif]: https://img-blog.csdnimg.cn/20191112212730710.gif
[20191113083538175.gif]: https://img-blog.csdnimg.cn/20191113083538175.gif