博学谷学习记录 | 学习总结，用心分享 | 前端学习之Web APIs（二）

程序二次猿

已于 2023-01-29 23:17:56 修改

阅读量57

点赞数

文章标签：前端学习 javascript html 开发语言

于 2023-01-29 22:50:23 首次发布

本文链接：https://blog.csdn.net/m0_47321226/article/details/128773217

版权

事件（一）

这一章的“事件”基本围绕着下图展开，

事件监听

事件监听的本质就是监视着某个元素，只要该元素被某种行为触发了就立即作出某种响应。核心语法如下：

这行代码表明了事件监听的三要素：

① 事件源：被触发的元素

② 事件类型：触发元素的类型，比如点击click、鼠标经过mouseover等等

③ 事件的调用函数：触发某个元素后需要做什么

事件类型

事件类型即用何种行为去触发事件源（或者说目标元素），常见的类型如下：

这些行为的名称在传入事件监听函数时需要加上引号，即以字符串类型传入。

事件对象

之前提到事件监听三要素中的事件源是被触发的元素，而元素本身就是一个对象，那这里的事件对象又是什么呢？其实事件对象就是事件本身。

拿点击事件举个例子

  <body>
    <div>举例子用的div</div>
    <script>
      const div = document.querySelector('div')
      div.addEventListener('click',function(e){
        console.log(e);
      })
      console.log(typeof div);
    </script>
  </body>

将这个点击事件打印出来之后就能看到非常多的属性，其中有一个 target 属性，其值就是 div 对象。

鼠标经过事件类似，

其中也有一个名叫 target 的属性，其值也为 div 对象。

综上所述，虽然元素和事件都是对象，但二者并不一样，

元素是事件发生的区域限制，也就是说这个事件只能在规定好的元素上发生，在这个元素之外做出的相同事件并不能被浏览器捕获，而当事件被捕获的瞬间，浏览器就会列出这个事件的所有信息，从而能被程序员使用。

环境对象---- this（一）

这是一个会贯穿整个JavaScript的变量，这里简单介绍一下它在普通函数和匿名函数内部的使用。

this是函数内部的一个特殊变量，它代表着当前函数运行时所处的环境，函数的调用方式不同，this 指代的对象也会不同。总的来说就是谁调用这个函数，this就指向谁。

    <script>
      //匿名函数
      let fn1 = function () {
        console.log(this);
      };

      fn1();

      //普通函数
      function fn2() {
        console.log(this);
      }

      fn2();

      //对象内方法
      const obj = {
        var1: "变量1",
        var2: "变量2",
        fn3: function () {
          console.log(this);
        },
      };

      obj.fn3();
    </script>