DOM事件+环境对象this

不要图透
155 阅读3分钟

dom事件-基础

事件

介绍：

事件是在编程时系统内发生的动作或者发生的事情；

我的理解：用户对一些DOM元素的操作就为事件，比如：点击DOM元素、鼠标移入DOM元素等。

-----假如网页是静态的，就是网页对我们的点击元素或者其他什么操作没有对应的反应(比如字体变颜色、切换图片)时，我们会不会对这样的上网感到很没劲，我想答案是肯定的。那么事件监听就是来解决这一问题的，配置事件监听可以对事件设置执行函数，其中，函数我们可以理解为效果。也就是设置事件效果，既如此上面那个问题就解决了。

事件监听(注册事件)

介绍&原理：

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

作用：

实现用户与网页的交互，使网页内容变为动态可变。

语法：

元素.addEventListener('事件',要执行的函数)

使用例子：

<body>
    <button>提交</button>
    <script>

        // 获取dom元素button
        let but1 = document.querySelector('button')

     //对button对象设置点击事件；每点击一次按钮，就执行一次函数
        but1.addEventListener('click', function () {console.log('别，还是留给别人吧') })
    </script>
</body>

效果如下：image-20220411222456872

监听三要素：

  1. 事件源： 哪个dom元素被事件触发了，要获取dom元素；
  2. 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等；
  3. 事件调用的函数： 要做什么事。

注意：

  1. 事件类型要加引号；
  2. 函数是“点击”之后再去执行，每次“点击”都会执行一次。

事件监听版本

1、DOM L0(第一个版本)

语法：

  1. 写在js里：事件源.on事件 = function() { 代码.. }

    例子：

    <body>
    <button>提交</button>
    <script>

        // 获取dom元素button
        let but1 = document.querySelector('button')

     //对button对象设置点击事件；每点击一次按钮，就执行一次函数
        but1.onclick=function () {console.log('别，还是留给别人吧') }
    </script>
</body>

    效果：image-20220411222456872

  2. 写在行内 ('引号里的内容可以不为函数')：

    1. <button on事件类型="函数名()">点击< /button>

      例子：

      <body>

    <!-- 在标签里直接注册事件 -->
    <button onclick="names()">提交</button>

    <script>

        // 定义函数
        function names() { console.log('别，还是留给别人吧') }
        
    </script>
</body>

      效果：image-20220411222456872

    2. <button on事件类型="要执行的代码">点击 < /button>

      例子：

      <body>

    <!-- 在标签里直接注册事件 -->
    <button onclick="console.log('别，还是留给别人吧')">提交</button>

</body>

      效果和上面的一样。

注意：
  1. 在JS里一个事件类型，不能绑定多个处理函数；
  2. 在行内注册事件，可以一个事件类型绑定多个处理函数。

2、DOM L2（现在在用）

语法：

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

注意：

在JS里一个事件类型，可以绑定多个处理函数。

两个版本的区别

1、就写js里的而言：新版本在JS里一个事件类型，可以绑定多个处理函数；而老版本的不行，它只会执行最后面的函数，前面的会被覆盖。如：

<body>

    <!-- 老版本事件触发按钮 -->
    <button class="but1">提交1</button>

    <!-- 新版本事件触发按钮 -->
    <button class="but2">提交2</button>

    <script>

        // 获取dom元素button
        let but1 = document.querySelector('.but1')
        let but2 = document.querySelector('.but2')


        //老版本，一个事件类型绑定多个处理函数
        but1.onclick = function () { console.log('老版本') }
        but1.onclick = function () { console.log('老版本') }
        but1.onclick = function () { console.log('我是老版本') }


        //新版本，一个事件类型绑定多个处理函数
        but2.addEventListener('click', function () { console.log('我是新版本') })
        but2.addEventListener('click', function () { console.log('我是新版本') })
        but2.addEventListener('click', function () { console.log('我是新版本') })
    </script>

</body>

两个按钮各点击两次，效果如图image-20220411232752772

2、老版本里行内的写法不推荐，它没有实现结构与行为分离，而且函数内容写多了会影响代码的可读性。

常用事件类型

  1. 鼠标事件(鼠标触发)
    1. click---鼠标点击；
    2. mouseenter---鼠标经过；
    3. mouseleave---鼠标离开；
    4. mousemove---鼠标移动。
  2. 焦点事件(例：表单获得光标)
    1. focus---获得焦点；
    2. blur---失去焦点。
  3. 键盘事件(键盘触发)
    1. keydown---键盘按下触发；
    2. keyup---键盘抬起触发。
  4. 文本事件(例：表单输入触发)
    1. input---用户输入事件。

环境对象（this）

介绍：

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

我的理解：环境变量是指向调用这个函数的对象。

作用：

弄清楚this的指向，可以让我们代码更简洁

使用方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>

    <script>

        //获取dom元素div
        let div = document.querySelector('div')

        // 设置div点击事件
        div.addEventListener('click', function () {

            // 引用this修改div文本，this指向div对象
            this.innerText = '我是this'
        })
    </script>
</body>

</html>

效果：image-20220411235141776

注意：

1、函数的调用方式不同，this 指代的对象也不同；

2、【谁调用， this 就是谁】 是判断 this 指向的粗略规则；

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

拓展：

image-20220411235341413

总结

我的思维导图day2

avatar
文章
阅读
粉丝