JavaScript鼠标事件类型和事件处理函数详解

JavaScript鼠标事件类型和事件处理函数详解 第一张

JavaScript鼠标事件类型

JavaScript鼠标事件类型包括:onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmousemove等。

onclick事件

onclick事件是鼠标左键单击时发生的事件,用法如下:

<input type="button" value="按钮" onclick="alert('按钮被点击')">

onmousedown事件

onmousedown事件是鼠标按下左键时发生的事件,用法如下:

<input type="button" value="按钮" onmousedown="alert('按钮被按下')">

onmouseup事件

onmouseup事件是鼠标松开左键时发生的事件,用法如下:

<input type="button" value="按钮" onmouseup="alert('按钮被松开')">

onmouseover事件

onmouseover事件是鼠标移动到某元素上时发生的事件,用法如下:

<input type="button" value="按钮" onmouseover="alert('鼠标移动到按钮上')">

onmouseout事件

onmouseout事件是鼠标移出某元素时发生的事件,用法如下:

<input type="button" value="按钮" onmouseout="alert('鼠标移出按钮')">

onmousemove事件

onmousemove事件是鼠标在某元素上移动时发生的事件,用法如下:

<input type="button" value="按钮" onmousemove="alert('鼠标在按钮上移动')">

JavaScript鼠标事件处理函数

JavaScript鼠标事件处理函数包括:addEventListener()、removeEventListener()、dispatchEvent()等。

addEventListener()

addEventListener()函数用来给某元素添加事件,用法如下:

element.addEventListener('click',function(){
    //处理函数
});

removeEventListener()

removeEventListener()函数用来移除某元素的某个事件,用法如下:

element.removeEventListener('click',function(){
    //处理函数
});

dispatchEvent()

dispatchEvent()函数用来触发某元素的某个事件,用法如下:

element.dispatchEvent('click');
© 版权声明
THE END
分享