html 鼠标事件

2021-06-21 08:33:17 作者：互联网

html鼠标事件

onclick         当单击鼠标时运行脚本
ondblclick      当双击鼠标时运行脚本
onmousedown     当按下鼠标按钮时运行脚本
onmousemove     当鼠标指针移动时运行脚本
onmouseout      当鼠标指针移出元素时运行脚本
onmouseover     当鼠标指针移至元素之上时运行脚本
onmouseup       当松开鼠标按钮时运行脚本

实例

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单事件</title>
    <script type="text/javascript">
        function copyText() {
            let text1 = document.getElementById('text1').value;
            let text2 = document.getElementById('text2').innerHTML;
            document.getElementById('text2').innerHTML = text2 + text1;
        }
    </script>
</head>
<body>
<form action="#">
    <fieldset>
        <legend>鼠标事件演示</legend>
        <label>文本:</label><input type="text" id="text1" value=""/><br/>
        <label>复制的文本:</label>
        <output id="text2"></output>
        <br/><br/>
        <input type="button" value="单击复制文本" onclick="copyText()"/>
        <input type="button" value="双击复制文本" ondblclick="copyText()"/>
        <input type="button" value="鼠标按键复制文本" onm ousedown="copyText()"/>
        <input type="button" value="鼠标移开复制文本" onm ouseout="copyText()"/>
        <input type="reset" value="重置"/>
    </fieldset>
</form>
</body>
</html>

标签：脚本,鼠标,当鼠标,text2,html,事件,document,运行
来源： https://www.cnblogs.com/hu308830232/p/14911009.html