JS中的事件

最新推荐文章于 2024-09-16 08:47:17 发布

苏苏苏0

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量130

点赞数

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

本文链接：https://blog.csdn.net/weixin_52482833/article/details/125071637

版权

1.事件的概念

用户在网页的一些点击、滑动、输入等交互行为。

2.事件的添加方式

a.在标签上添属性的方式 onlick="btnClick()"
b.通过获取DOM对象的方式添加事件
c.通过获取DOM对象给DOM监听一个事件

<!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>
  </head>
  <body>
    <!-- 1. 在标签上添属性的方式 onlick="btnClick()" -->
    <button onclick="btnClick1()">按钮1</button>
    <button class="btn2">按钮2</button>
    <button class="btn3">按钮3</button>
  </body>
  <script>
    // 事件的处理函数
    function btnClick1() {
      console.log('click1');
    }

    // 2.通过获取DOM对象的方式添加事件
    var btn2El = document.querySelector('.btn2');
    btn2El.onclick = function () {
      console.log('click2');
    };

    // 3.通过获取DOM对象 给DOM监听一个事件
    var btn3El = document.querySelector('.btn3');
    // 添加事件监听
    btn3El.addEventListener('click', btn3Click);

    function btn3Click() {
      console.log('click3');
      // 移除事件监听 移除必须和监听时必须是同一个函数
      btn3El.removeEventListener('click', btn3Click);
    }
  </script>
</html>

3.事件的参数

event：事件对象

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>
  </head>
  <body>
    <button class="btn1">按钮1</button>
    <button class="btn2" onclick="btnClick2(event,this)">按钮2</button>
    <button class="btn3">按钮3</button>
  </body>
  <script>
    var btn1 = document.querySelector('.btn1');
    var btn3 = document.querySelector('.btn3');
    btn1.onclick = function (event) {
      // event 事件对象(坐标等信息)
      console.log(event);
      // 当前被用户点击的按钮
      console.log(event.target);
      // this => 当前被用户点击的按钮
      console.log(this);
    };

    function btnClick2(event, _this, id) {
      // 当在标签添加属性的方式添加事件，需要通过传入实参this
      console.log(_this);
      // 当在标签添加属性的方式添加事件，需要通过传入实参event
      console.log(event);
      console.log('btnClick2');
    }

    btn3.addEventListener('click', function (event) {
      console.log(event);
      console.log(this);
    });
  </script>
</html>

4.事件类型

鼠标事件

事件类型	描述
click	点击事件
dblclick	双击事件
mousedown	鼠标按下
mouseup	鼠标抬起
mouseenter	鼠标进入事件
mouseleave	鼠标移除事件
mousemove	鼠标移动事件
mouseover	鼠标进入事件
mouseout	鼠标移除事件

键盘事件 keyCode（键值） || key (别名)

属性	描述
keydown	某个键盘按键被按下
keyup	键盘按键被松开
keypress	某个键盘按键被按下并松开

框架/对象（Frame/Object）事件

属性	描述
hashchange	检测url 中hash值的变化
load	页面加载
resize	浏览器窗口大小发生变化触发
scroll	滚动触发

表单事件

属性	描述
input	针对的是input控件，输入内容就会触发事件
change	针对的是input和select控件,失焦获取内容，radio、checkbox
focus	针对的是input获取焦点
blur	针对的是input失去焦点
submit	表单的提交