dom事件基础

最新推荐文章于 2024-07-28 16:45:11 发布

网站装修工

最新推荐文章于 2024-07-28 16:45:11 发布

阅读量81

点赞数

分类专栏： webapi 文章标签：大数据

本文链接：https://blog.csdn.net/liubibaoo/article/details/125546959

版权

webapi 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.事件监听

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件

语法:

事件源 e.target ：那个dom元素被事件触发了，要获取dom元素

事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等

事件调用的函数： 要做什么事

1.1 事件监听版本

DOM L0 事件源.on事件 = function() { }

DOM L2 事件源.addEventListener(事件，事件处理函数)

区别：

on方式会被覆盖， addEventListener 方式可绑定多次，拥有事件更多特性，推荐使用

2.事件类型

mouseenter 和 mouseleave 不冒泡

mouseout 和 mouseover 冒泡

3.事件对象

事件对象也是个对象 , 这个对象有事件触发时的相关信息

在事件绑定的回调函数的第一个参数就是事件对象形参

语法:

3.1事件对象的常用属性

<script>
        // 获取光标相对于游览器可见窗口左上角的位置
        document.addEventListener('click', function (e) {
            document.write(e.clientX)
            document.write(`<br>`)
            document.write(e.clientY)
        })

        // 用户按下键盘的值
        document.addEventListener('keydown', function (c) {
            document.write(c.key)
            if (c.key === 'a') {
                console.log('00');
            }
        })
    </script>

4.环境对象

环境对象： 指的是函数内部特殊的 变量 this ，它代表着当前函数运行时所处的环境

谁调用， this 就是谁是判断 this 指向的粗略规则

直接调用函数，其实相当于是 window.函数，所以 this 指代 window

<body>
    <button>按钮</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            // 哪一个对象在调用该函数 ,那么this 关键字就是执行这个对象
            console.log(btn === this);
        })
    </script>
</body>

5.回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数

简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

回调函数本质还是函数，只不过把它当成参数使用

click()，调用该方法时，相应的DOM元素就会执行点击事件。

网站装修工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom事件基础

语法: mouseenter 和 mouseleave 不冒泡mouseout 和 mouseover 冒泡事件对象也是个对象 , 这个对象有事件触发时的相关信息在事件绑定的回调函数的第一个参数就是事件对象形参语法: 5.回调函数如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数回调函数本质还是函数，只不过把它当成参数使用click()，调用该方法时，相应的D
复制链接

扫一扫

专栏目录