html 鼠标事件

2021-06-21 08:33:17 阅读：191 来源： 互联网

标签：脚本鼠标当鼠标 text2 html 事件 document 运行

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html 鼠标事件

html鼠标事件

实例