JS之事件高级

释怀°Believe

已于 2022-03-02 19:13:33 修改

阅读量330

点赞数

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

于 2022-02-27 12:32:07 首次发布

本文链接：https://blog.csdn.net/qq_52986400/article/details/123161087

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

一、注册事件
- 1.注册事件概述
- 1.2addEventListener事件监听方式
二、删除事件
- 2.1删除事件的方式
三、DOM事件流
四、事件对象
- 4.1事件对象定义
- 4.2事件对象的常见属性和方法
五、阻止事件冒泡
六、事件委托
七、常用的鼠标事件
- 7.1常用的鼠标事件
8键盘事件

一、注册事件

1.注册事件概述

给元素添加事件，称为注册事件或者绑定事件
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
利用on楷体的事件onlick

<button onlick = "alert()"></button>

特点:
注册事件的唯一性
存在事件覆盖
方法监听注册方式
按注册顺序依次执行

1.2addEventListener事件监听方式

里面的事件类型是字符串，必须加引号，而且不带on
同一个元素同一个事件可以田间多个侦听器（事件处理程序）

<button>传统注册方式</button>
<button>方法监听注册事件</button>
<script>
  var btns = document.querySelectorAll('button');
  //传统方式注册事件
  btns[0].onlick = function (){
    alert('hi');
  }
  btns[0].onlick = function (){
    alert('hello');
  }
  //事件监听注册事件
  btns[1].addEventListener('click',function (){
    alert(22);
  })
  btns[1].addEventListener('click',function (){
    alert(33);
  })

</script>

二、删除事件

2.1删除事件的方式

1.传统注册方式
eventTarget.onlick = null;
2.方法监听注册方式
eventTarget.removeEventListener(type,listener[,useCapture]);

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

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

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

</html>

三、DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程叫DOM事件流
分为三个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段

四、事件对象

4.1事件对象定义

eventTarget.onlick = function(event){}
div.addEventListener(‘click’,function (event){
console.log(event);}

event表示事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态
理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个就是事件对象event

   <style>
        div{
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div>123</div>
<script>
    var div = document.querySelector('div');
    // div.onclick = function (event){
    //     console.log(event);
    //   // 1.event即为事件对象 写到侦听函数 小括号里面
    //   // 2.事件对象只有有了事件才会存在 他是系统自动创建的 不需要传递参数
    //   // 3.事件对象是事件一系列相关数据的集合 比如鼠标点击里面就包含了鼠标的相关信息，如果是键盘事件，就包含了键盘的事件，比如按下哪个键
    //    4.事件对象可以自己命名，比如e
         //5，兼容性  windows.event
    // }
    div.addEventListener('click',function (event){
        console.log(event);
    })
</script>

4.2事件对象的常见属性和方法

请添加图片描述

五、阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点

e.stopPropagation(); // stop 停止  Propagation 传播
e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡

六、事件委托

请添加图片描述
事件委托也称为事件代理，在jQuery里面称为事件委派。
事件委托的原理：
不是每个节点单独社事件事件监听器，而是事件监听器设置在其父结点上，然后利用冒泡原理影响设置每个节点。

<body>
  <ul>
<!--    ul>li{$}*4 + tab键-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
<script>
  var ul = document.querySelector('ul');
  ul.addEventListener('click',function (e){
    alert('知否，知否');
    //e.target可以得到我们点击的对象
    e.target.style.backgroundColor = 'pink';
  })
</script>

不用给每个子元素添加，为父亲添加监听器，通过事件冒泡，冒泡给ul
七、常用的鼠标事件
e.onclick                 鼠标点击左键触发
e.onmouseover      鼠标经过事件
e.onmouseout        鼠标离开
e.onfocus               获得鼠标焦点触发
e.onblur                 失去鼠标焦点触发
e.onmousemove    鼠标移动触发
e.onmouseup         鼠标弹起触发
e.onmousedown    鼠标按下触发

七、常用的鼠标事件

7.1常用的鼠标事件

1.进制鼠标右键菜单

<script>
  //contextmenu主要控制应该合适显示上下文菜单，主要用于取消默认的上下文菜单
  document.addEventListener('contextmenu' ,function(e){
    e.preventDefault();
  })
  //2.进制选中文字
  document.addEventListener('selectstart',function (e){
    e.preventDefault();
  })
</script>

7.2鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。
我们主要利用MouseEvent和键盘事件对象KeyboardEvent
在这里插入图片描述

8键盘事件

8.1常用的键盘事件

<script>
  //常用的键盘事件
  // document.onkeyup = function (){
  //   console.log('up');
  // // }
  document.addEventListener('keyup',function (){
    console.log('up');
  })
</script>

在这里插入图片描述

注意：
如果使用addEventListener不需要加on
onkeypress和前面的两个区别是：他不识别功能键
三个事件的执行顺序是：keydown – keypress – keyup

8.2键盘事件对象

keyCode 返回该键的ASCLL值

<script>
  //常用的键盘事件
  // document.onkeyup = function (){
  //   console.log('up');
  // // }
  document.addEventListener('keyup',function(e){
    // console.log(e);
    console.log('up' + e.keyCode);
    //keyup 和 keydown不区分大小写
  })
  document.addEventListener('keypress',function(e){
      // console.log(e);
      console.log('press' + e.keyCode);
      //keypress 区分大小写
  })
</script>

8.2.1模拟京东按键搜索

按键为s就将光标自动到搜索框


```javascript

```javascript
<input type="text">
<script>
      var search = document.querySelector('input');
      document.addEventListener('keyup',function (e){
        // console.log(e.keyCode);
        if(e.keyCode === 83){
          search.focus(); // 搜索框获得焦点
        }
      })
</script>

8.2.2模拟京东查询快递单号

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                // console.log('输入内容啦');
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
            // 当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 当我们获得焦点，就显示这个con盒子
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>
</body>