【2021-09-17】JS学习（九）--事件高级

最新推荐文章于 2024-10-30 18:24:25 发布

qq_52691800

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量85

点赞数

分类专栏： JS学习文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_52691800/article/details/120533267

版权

JS学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

十五、事件高级

事件三要素：

事件目标（event target）

发生的事件与之相关联或与之相关的对象
事件处理程序（event handler）

处理或相应事件的函数
事件对象（event object）

与特定事件相关且包含有关该事件详细信息的对象

1.事件冒泡

特点：从内往外传递事件由一个具体的元素接收，然后又逐步传递到不具体的节点注意：元素需要嵌套，每层元素都绑定事件阻止事件冒泡

<!--
 * @Description: 事件冒泡
 * @Author: rendc
 * @Date: 2021-09-07 09:58:35
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-07 10:11:47
-->
<!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>事件冒泡</title>
  <style>
    .outer {
      border: 1px solid yellowgreen;
      width: 300px;
      height: 300px;
    }

    .center {
      border: 1px solid yellowgreen;
      width: 200px;
      height: 200px;
    }

    .inner {
      border: 1px solid yellowgreen;
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="center">
      <div class="inner">
        hello
      </div>
    </div>
  </div>
</body>
<script>
  var outer = document.getElementsByClassName('outer')[0];
  var center = document.getElementsByClassName('center')[0];
  var inner = document.getElementsByClassName('inner')[0];
  outer.onclick = function () {
    console.log("outer");
    event.stopPropagation(); // 阻止事件冒泡
  }
  center.onclick = function () {
    console.log("center");
    event.stopPropagation(); // 阻止事件冒泡
  }
  inner.onclick = function () {
    console.log("inner");
    // console.log(event);
    event.stopPropagation(); // 阻止事件冒泡
  }
</script>

</html>

2. 事件捕获

特点：从外往内传递

事件由不太具体的节点接收到，然后传递到具体的节点上。

addEventListener()

作用：绑定事件监听器

参数：

1. 事件类型（click mouseover 等）

2. 事件处理函数当绑定的事件被触发时要执行的操作

3. boolean？用来决定事件流类型事件冒泡false 事件捕获true

removeEventListener()

作用：移除事件

参数：

     1. 事件名
     2. 事件处理函数 
     3. boolean？ 事件冒泡false  事件捕获true

onXXXXX

属性

作用：绑定事件比如：onclick onmouseover 调用者：节点可以是div 也可以是button

IE事件处理程序

attachEvent()

作用：事件绑定

参数：事件处理程序名称

事件处理函数

detachEvent()

作用：事件移除

<!--
 * @Description: 事件捕获
 * @Author: rendc
 * @Date: 2021-09-07 09:58:35
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-07 10:17:08
-->
<!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>事件捕获</title>
  <style>
    .outer {
      border: 1px solid yellowgreen;
      width: 300px;
      height: 300px;
    }

    .center {
      border: 1px solid yellowgreen;
      width: 200px;
      height: 200px;
    }

    .inner {
      border: 1px solid yellowgreen;
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="center">
      <div class="inner">
        hello
      </div>
    </div>
  </div>
</body>
<script>
  var outer = document.getElementsByClassName('outer')[0];
  var center = document.getElementsByClassName('center')[0];
  var inner = document.getElementsByClassName('inner')[0];
  outer.addEventListener(
    'click',
    function () {
      console.log("outer");
    },
    true);
  center.addEventListener(
    'click',
    function () {
      console.log("center");
    },
    true);
  inner.addEventListener(
    'click',
    function () {
      console.log("inner");
    },
    true);
</script>

</html>

3. 事件对象 event

在触发DOM的某个事件时会产生一个事件对象 event ，这个包含所有与事件相关的信息，浏览器默认会把event传入到事件处理函数中，event对象的属性都是只读属性。

    属性          类型          说明
    type        String        事件类型
    bubbles     Boolean       事件是否冒泡
    cancelable  Boolean       是否可取消事件默认行为
    target      Element       事件目标

<!--
 * @Description: 事件对象
 * @Author: rendc
 * @Date: 2021-09-07 09:58:35
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-07 11:08:07
-->
<!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>事件对象</title>
  <style>
    .outer {
      border: 1px solid yellowgreen;
      width: 300px;
      height: 300px;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="center">
      <div class="inner">
        hello
      </div>
    </div>
  </div>
</body>
<script>
  var outer = document.getElementsByClassName('outer')[0];
  outer.onclick = function () {
    event.stopPropagation(); // 阻止事件冒泡
    // console.log(event);
    console.log(event.type);
    console.log(event.bubbles);
    console.log(event.cancelable);
    console.log(event.target);
  }
</script>

</html>

4. 事件类型

鼠标事件

      click     点击鼠标的主按钮  点击触控板
      dblclick  双击鼠标的主要按钮
      mousedowm 任意鼠标按钮按下时触发
      mouseup   任意鼠标按钮抬起（释放）时触发
      mousemove 鼠标在元素内部移动时会重复触发
      mousewheel  滚轮事件
      mouseover
      mouseenter
      mouseout
      mouseleave

<!--
 * @Description: 鼠标事件
 * @Author: rendc
 * @Date: 2021-09-07 11:19:33
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-07 11:34:47
-->
<!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>鼠标事件</title>
  <style>
    #app {
      width: 100px;
      height: 100px;
      border: 1px solid hotpink;
    }
  </style>
</head>

<body>
  <div id="app">

  </div>
</body>
<script>
  var div = document.getElementById("app");
  // console.log(div);
  var handler = function (event) {
    console.log(event.type);
    // switch (event.type) {
    //   case "click":
    //     console.log("鼠标点击");
    //     break;
    //   case "mouseover":
    //     console.log("光标移入");
    //     break;
    // }
  }
  div.onclick = handler;
  div.onmouseover = handler;
  div.onmousedowm = handler;
  div.onmouseout = handler;
  // div.onmousemove = handler;
  // 坐标点
  div.onclick = function (event) {
    console.log("页面坐标位置：" + event.pageX + ',' + event.pageY);
    console.log("屏幕坐标位置：" + event.screenX + ',' + event.screenY);
    console.log("客户区坐标位置：" + event.clientX + ',' + event.clientY);
  }
</script>

</html>

焦点事件

blur 元素失去焦点
focus 元素获得焦点

UI事件

      load
        在页面完全加载后会在window上触发这个事件
        如果是图像加载完成后 会在img元素上触发
        window.onload
      unload
        在页面完全卸载后会在window上触发这个事件
      select
        当用户选择文本框中的字符时会触发
      resize
        当浏览器窗口被调整宽高时会触发 会重复触发
      scroll
        滚动条滚动时会触发 会重复触发

键盘事件

      keydown 按下键盘任意键触发 如果按住不放会重复触发
      keypress 按下键盘字符键触发
      keyup   释放按键时触发

<!--
 * @Description: 键盘事件
 * @Author: rendc
 * @Date: 2021-09-07 11:46:43
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-07 12:04:56
-->
<!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>键盘事件</title>
</head>

<body>
  <div></div>

</body>
<script>
  document.onkeydown = function () {
    console.log("有键被按下" + event.keyCode);

  }
  // document.onkeydown = function () {
  //   if (event.shiftKey) {
  //     console.log("shift被按下");
  //   }
  //   if (event.ctrlKey) {
  //     console.log("ctrl被按下");
  //   }
  //   if (event.altKey) {
  //     console.log("alt被按下");
  //   }
  //   if (event.metaKey) {
  //     console.log("meta被按下");
  //   }
  // }
</script>

</html>

事件代理

将事件绑定当前元素的父元素上，这时候点击当前元素时，就会执行父元素上绑定的事件处理函数

好处：父元素代理子元素的事件，子元素可以动态添加，不用频繁的去绑定事件

可以通过 event.target 获得当前元素

<!--
 * @Description: 事件代理
 * @Author: rendc
 * @Date: 2021-09-09 09:06:32
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-09 09:32:56
-->
<!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>事件代理</title>
  <style>
    .parent {
      border: 1px solid blue;
      overflow: hidden;
    }

    .child {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      float: left;
      margin: 10px;
    }

    .add {
      width: 100px;
      height: 100px;
      border: 1px solid blue;
      float: left;
      margin: 10px;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="add" onclick="addChild()">+</div>
  </div>
</body>
<script>
  // 单个子元素绑定事件
  // var child = document.getElementsByClassName("child")[0];
  // child.onclick = function () {
  //   alert("我是子元素")
  // }
  // 多个子元素绑定事件
  // var child = document.getElementsByClassName("child");
  // for (let i = 0; i < child.length; i++) {
  //   child[i].onclick = function () {
  //     alert("我是子元素")
  //   };
  // }
  // 将事件代理到父元素上-事件代理
  var parent = document.getElementsByClassName('parent')[0];
  parent.onclick = function (event) {
    if (event.target.className === 'child') {
      alert("我是子元素")
    }
  }
  // 追加节点
  function addChild() {
    var parent = document.getElementsByClassName('parent')[0];
    var child = document.getElementsByClassName('child')[0];
    var cloneChild = child.cloneNode(true);
    var lastChild = parent.lastChild.previousSibling;
    // parent.appendChild(cloneChild);
    parent.insertBefore(cloneChild, lastChild);
  }
</script>

</html>