DOM常用事件

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

张0x0

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

阅读量977

点赞数 4

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

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

版权

web前端基础学习同时被 3 个专栏收录

80 篇文章 3 订阅

订阅专栏

JavaScript学习

37 篇文章 0 订阅

订阅专栏

html学习

12 篇文章 0 订阅

订阅专栏

什么是事件

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

前面我们所做的一些在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';
        }
        //鼠标双击事件
        div.ondblclick = function(){
            div.style.backgroundColor = 'yellow';
        }
        //鼠标移入事件
        div.onmouseover = function(){
            div.innerHTML = "鼠标移入啦！";
        }
        //鼠标移出事件
        div.onmouseout = function(){
            div.innerHTML = "鼠标移出啦！";
        }
        //鼠标按下事件
        div.onmousedown = function(){
            div.innerHTML = "鼠标按下啦！";
        }
        //鼠标抬起事件
        div.onmouseup = function(){
            div.innerHTML = "鼠标抬起啦！";
        }
    </script>

需要注意的是鼠标双击时，如果同时绑定了单击事件和双击事件，通常会先执行单击事件再执行双击事件。

键盘事件

键盘事件：键盘动作触发事件

1.按键按下：onkeydown

2.按键按下：onkeypress

3.按键松开：onkeyup

注意点：

1.上述事件同时触发时，触发次序为：onkeydown-->onkeypress-->onkeyup

2.onkeypress事件保存按键值为ASCII码，onkeydown、onkeyup事件保存按键值是虚拟键码

3.onkeypress事件区分字母大小写，onkeydown、onkeyup事件不区分

4.onkeypress事件只能监听字母和数字，不能监听功能按键，onkeydown、onkeyup事件都能监听

5.若一直按住按键不松开，会重复触发onkeydown和onkeypress事件

示例：文本输入框绑定键盘事件

    <input type="text">
    <script>
        var input = document.querySelector('input');
        input.onkeydown = function(){
            console.log("触发onkeydown");
        }
        input.onkeyup = function(){
            console.log("触发onkeyup");
        }
        input.onkeypress = function(){
            console.log("触发onkeypress");
        }
    </script>

同样是按下键触发，一定要弄清楚两者的区别

表单元素事件

1.获取焦点事件：onfocus

2.失去焦点事件：onblur

3.表单元素内容改变事件：onchange

4.元素获取用户输入事件：oninput

    <form>
        <input type="text">
        <div></div>
    </form>
    <script>
        var input = document.querySelector('input');
        //获取焦点事件--改变背景色
        input.onfocus = function(){
            input.style.backgroundColor = 'green';
        }
        //表单元素内容改变事件--离开输入框触发函数，小写字母转大写字母
        input.onchange = function(){
            input.value = input.value.toUpperCase();
        }
        //元素获取用户输入事件
        input.oninput = function(){
            var Value = input.value;
            document.querySelector('div').innerHTML = "你输入的是："+Value;
        }
        //失去焦点事件--清除背景色和div内容
        input.onblur = function(){
            input.style.backgroundColor = '';
            document.querySelector('div').innerHTML = '';
        }
    </script>

网页实现效果：

剪贴板事件

1.拷贝触发：oncopy

2.剪切触发：oncut

3.粘贴触发：onpaste

    <input type="text">
    <div></div>
    <script>
        var input = document.querySelector('input');
        var div = document.querySelector('div');
        //拷贝文本触发事件
        input.oncopy = function(){
            div.innerHTML = "你拷贝了文本！";
        }
        //剪切文本触发事件
        input.oncut = function(){
            div.innerHTML = "你剪切了文本！";
        }
        //粘贴文本触发事件
        input.onpaste = function(){
            div.innerHTML = "你粘贴了文本！";
        }
    </script>

网页实现效果：