JS-Web API-day02

玩三国杀玩的

已于 2025-01-14 21:21:19 修改

阅读量735

点赞数 11

CC 4.0 BY-SA版权

分类专栏： JS 文章标签：前端 javascript 开发语言

于 2025-01-14 18:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/ImmortalsK/article/details/145113172

JS 专栏收录该内容

13 篇文章

订阅专栏

一、事件监听（绑定）

1.1 事件监听

事件：编程时系统内发生的动作或者发生的事情。比如用户在网页上单击一个按钮

事件监听：

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

语法：

对象.addEventListener('事件类型',要执行的函数)

事件监听三要素：

事件源：被触发的dom元素

事件类型：什么方式触发就是什么类型比如鼠标点击，鼠标滑过，进入，页面滑动等

事件调用的函数：事件触发之后要做的事情

例：获得焦点事件
  const input = document.querySelector('input')
  //获得焦点
  input.addEventListener('focus',function (){
    console.log(('有焦点触发'));
  })

1.2 事件监听版本

发展史：

        DOM L0 ：是 DOM 的发展的第一个版本； L：level

        DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准

        DOM L2：使用addEventListener注册事件

        DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

DOM L0

事件源.on事件 = function{}

DOM L2

事件源.addEventListener('事件类型',事件处理函数)

区别：

on方式时间会被覆盖，addEventListener方式可以给同一个对象多次绑定事件，用有事件更多特性

二、事件类型

2.1 鼠标事件-鼠标触发

2.1.1 click-鼠标点击事件

事件类型 click

<body>
<button>点击</button>
<script>
    //鼠标触发事件

    //需求：点击了按钮，弹出一个对话框
    //事件源 按钮
    //事件类型 点击鼠标
    // 事件处理程序，谈出对话框
    const  button  = document.querySelector('button')
    // 实际就是为button 写了一个方法 click  可以button.click()调用
    //鼠标点击 click
    button.addEventListener('click',function (){
        alert('你好呀')
    })   //click鼠标点击    多次点击多次执行

</body>

2.1.2 mouseenter-鼠标经过事件

事件类型 mouseenter

<style>
    div{
        width: 500px;
        height: 300px;
        background-color: lightskyblue;
    }
</style>
<body>
<div>123</div>
<script>
    //鼠标触发事件

    const div = document.querySelector('div')
    // 鼠标经过 mouseenter
    div.addEventListener('mouseenter',function () {
        alert('轻轻的我走了')
    })
</script>
</body>

2.1.3 mouseleave-鼠标离开事件

事件类型：mouseleave

<style>
    div{
        width: 500px;
        height: 300px;
        background-color: lightskyblue;
    }
</style>
<body>
<div>123</div>
<script>
    //鼠标离开 mouseleave
    div.addEventListener('mouseleave',function () {
        alert('轻轻的我走了，挥一挥衣袖，不带走一片云彩')
    })
</script>
</body>

2.2 焦点事件-表单获得光标

2.2.1 focus-获得焦点事件

事件类型：focus

<body>
<input type="text">
<script>
  //焦点事件
  const input = document.querySelector('input')
  //获得焦点
  input.addEventListener('focus',function (){
    console.log(('有焦点触发'));
  })
</script>
</body>

2.2.2 blur-失去焦点事件

事件类型：blur

<body>
<input type="text">
<script>
  //焦点事件
  const input = document.querySelector('input')
  //失去焦点
  input.addEventListener('blur',function (){
    console.log(('失去焦点触发'));
  })

</script>
</body>

2.3 键盘事件-键盘触发

2.3.1 Keydown-键盘按下触发

事件类型：Keydown

<body>
<input type="text">
<script>
    const input = document.querySelector('input')
    input.addEventListener('keydown',function (){
        console.log('键盘按下了')
    })
</script>
</body>

2.3.2 Keyup-键盘抬起触发

事件类型：Keyup

<body>
<input type="text">
<script>
    const input = document.querySelector('input')
    input.addEventListener('keypress',function (){
        console.log('键盘弹起来')
    })
</script>
</body>

2.4 文本事件-表单输入触发

2.4.1 input-用户输入事件

事件类型：input
<body>
<input type="text">
<script>
  const input = document.querySelector('input')
  //文本事件
  input.addEventListener('input',function (){
      console.log(input.value)
  })
</script>
</body>
还有change事件，检测文本框里面的值是否发生改变

2.5 鼠标经过事件的区别

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

但是没有事件冒泡的鼠标经过事件有时候也会有作用

2.6 两种注册事件的区别

传统on注册（L0）

        同一个对象,后面注册的事件会覆盖前面注册(同一个事件)

        直接使用null覆盖偶就可以实现事件的解绑

        都是冒泡阶段执行的

事件监听注册（L2）

        语法: 元素对象.addEventListener(事件类型, 事件处理函数, 是否使用捕获)

        后面注册的事件不会覆盖前面注册的事件(同一个事件)

        可以通过第三个参数去确定是在冒泡或者捕获阶段执行

        必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

        匿名函数无法被解绑

三、事件对象

3.1 获取事件对象

事件对象：

是个对象，存储了关于事件触发时的相关信息

使用场景：

判断用户按下了哪个键；

判断鼠标点击了哪个元素等。

获取：

事件绑定的回调函数的第一个参数就是事件对象，一般命名为e,ev,event
<body>
<input type="text">
<script>
  const input = document.querySelector('input')
  //按下回车键之后 打印
  input.addEventListener('keyup',function (e) {
    if(e.key === 'Enter'){
      console.log('我按下了回车键')
    }
  })
</script>
</body>

3.2 事件对象常用属性

常用属性

type 获取当前的事件类型

clientX/clientY 获取光标相对于浏览器可视窗口左上角的位置

offsetX/offseY 获取光标相对于当前DOM元素左上角的位置

key 用户按下的键盘键的值，代替了keyCode

target：指代触发事件的对象

pageX/pageY：获取光标相对于浏览器整个HTML页面左上角的位置

例：判断按下的键是否是Enter
<body>
<input type="text">
<script>
  const input = document.querySelector('input')
  //按下回车键之后 打印
  input.addEventListener('keyup',function (e) {
    if(e.key === 'Enter'){
      console.log('我按下了回车键')
    }
  })
</script>
</body>

四、环境对象

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

注：

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

粗略的辨认就是谁调用，this就是谁

直接调用函数就相当于是window函数，这里this指代window

例：
<body>
<button>按钮</button>
<script>
  //环境对象this
  //在一般函数中 非严格模式下，this指向的Window，调用者
  const btn = document.querySelector('button')
  function surrounding(){
    console.log(this)//Window
  }
  surrounding()  //   window.surrounding()
  //在其他函数中，this指向调用者
  btn.addEventListener('click',function (){
    console.log(this)//<button>按钮</button>
    //用法
   // btn.style.color = 'red'
    //可以换成
    this.style.color = 'red'
  })
  //所以粗略情况下，this指向调用者
</script>
</body>

五、回调函数

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

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

举例子，定时器，事件绑定里面的执行函数都是回调函数

注：

使用匿名函数作为回调函数比较常见

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