DOM常用事件

最新推荐文章于 2022-12-13 14:09:01 发布

张0x0

最新推荐文章于 2022-12-13 14:09:01 发布

阅读量1k

点赞数 4

分类专栏： web前端基础学习 html学习 JavaScript学习文章标签：前端 javascript html dom

本文链接：https://blog.csdn.net/zxn200125/article/details/121523392

版权

本文介绍了DOM中的常见事件，包括鼠标事件（如onclick、onmouseover等）、键盘事件（onkeydown、onkeyup等）、表单元素事件（onfocus、onblur、onchange等）以及剪贴板事件（oncopy、oncut、onpaste）。通过这些事件，开发者可以响应用户的交互行为，实现更丰富的网页动态效果。

摘要由CSDN通过智能技术生成

什么是事件

事件：文档或者浏览器窗口发生的一些特定交互瞬间。通过监听这些事件，可以来实现在事件发生时执行特定的操作。

前面我们所做的一些在js中找到html标签的事情就是绑定事件行为，例如：

    <div></div>
    <script>
        var div = document.querySelector('div');
    </script>

常用事件

鼠标事件

鼠标事件：鼠标动作触发事件

常用的鼠标事件有：

1.单击事件：onclick

2.双击事件：ondblclick

3.鼠标移入：onmouseover

4.鼠标移出：onmouseout

5.鼠标按下：onmousedown

6.鼠标抬起：onmouseup

鼠标事件动作时触发的事件一般用函数进行描述，可以在一个元素上绑定多个鼠标事件，例如：

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 100px auto;
        cursor: pointer;
        text-align: center;
        line-height: 100px;
    }
</style>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        //鼠标单击事件
        div.onclick = function(){
            div.style.backgroundColor = 'pink';
        }