BOM #第二天

最新推荐文章于 2023-10-06 17:29:30 发布
最新推荐文章于 2023-10-06 17:29:30 发布
阅读量95 收藏
点赞数
文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52809337/article/details/120024495
版权

目录

一、事件绑定的方式

二、事件解除

三、event对象

四、事件响应链

五、事件代理

六、停止冒泡

一、事件绑定的方式

1.句柄式写法 ：只能绑定一个事件处理函数

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: green;
  }
  .active {
    background-color: red;
  }
</style>

<div class="box active"></div>

 <script>
    let box = document.querySelector('.box');
    // 1.句柄式写法 只能绑定一个事件处理函数
    document.querySelector('.box').onclick = changeBack
    function changeBack() {
      box.classList.contains('active') ? box.classList.remove('active') : box.classList.add('active');
    }
  </script>

2.addEventListener： 可以绑定多个事件处理函数

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: green;
  }
  .active {
    background-color: red;
  }
</style>

<div class="box active"></div>

<script>
    // 2.addEventListener 可以绑定多个事件处理函数
    let box = document.querySelector('.box');
    function changeBack() {
      box.classList.contains('active') ? box.classList.remove('active') : box.classList.add('active');
    }
    function changeContent() {
      box.innerHTML ? box.innerHTML = '' : box.innerHTML = '新增内容';
    }
    box.addEventListener('click', changeBack);
    box.addEventListener('click', changeContent);
  </script>

二、事件解除

1.句柄式的事件解除：element.onclick = false;

  <style>
    .yhq {
      width: 300px;
      height: 100px;
      border-radius: 24px;
      background-color: coral;
      color: #FFF;
      text-align: center;
      line-height: 100px;
    }
  </style>

<div class="yhq">大额优惠券</div>

<script>
    let yhq = document.querySelector('.yhq');
    
    function getyhq() {
      alert("领取成功");
      yhq.style.opacity = 0.5;

      // 解除绑定事件
      yhq.onclick = false;
    }
    yhq.onclick = getyhq;  // 赋值函数不加小括号
</script>

2.事件监听器的解除方式 ：element.removeEventListener('事件类型', 事件处理函数);

  <style>
    .yhq {
      width: 300px;
      height: 100px;
      border-radius: 24px;
      background-color: coral;
      color: #FFF;
      text-align: center;
      line-height: 100px;
    }
  </style>

<div class="yhq">大额优惠券</div>

<script>
    let yhq = document.querySelector('.yhq');
    
    function getyhq() {
      alert("领取成功");
      yhq.style.opacity = 0.5;

      // 解除绑定事件
      yhq.removeEventListener('click', getyhq);
    }
    yhq.addEventListener('click', getyhq); // 函数不加小括号
</script>

三、event对象

event对象：盒子被触发时的事件， 如鼠标移动事件、键盘按下事件

鼠标even事件常用属性：

属性           含义

clientX

盒子触发时离左边的距离（可视区域）

clientY

盒子触发时离顶部的距离（可视区域）

offsetX

盒子触发时离盒子左边的距离

offsetY

盒子触发时离盒子顶部的距离

 pageX

盒子触发时离界面左边的距离

pageY

盒子触发时离界面顶部的距离

screenX

盒子触发时离屏幕左边的距离

screenY

盒子触发时离屏幕顶部的距离

对以上even事件属性的解释：

鼠标点击红圈中绿点的地方

 css:
 

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px;
    }
  </style>

 html:

<div></div>

js:

   <script>
     let div = document.querySelector("div");
     div.onclick = function(e) {
       console.log(e);
       /* 
        clientX: 185
        clientY: 120
        offsetX: 78
        offsetY: 21
        screenX: 234
        screenY: 224
        */     
     }
   </script>

【案例】盒子上下左右移动

 <style>
    .box {
      width: 300px;
      height: 300px;
      border-radius: 24px;
      background-color: coral;
      color: #FFF;
      text-align: center;
      line-height: 100px;
      position: relative;
    }
  </style>

<div class="box"></div>

<script>
    let box = document.querySelector('.box');
    window.addEventListener('keydown', function(event) {
      // console.log(event);
      if (event.key == 'ArrowUp') {
        box.style.top = parseFloat(getComputedStyle(box).top) - 3 + 'px';
      }
      if (event.key == 'ArrowDown') {
        box.style.top = parseFloat(getComputedStyle(box).top) + 3 + 'px';
      }
      if (event.key == 'ArrowLeft') {
        box.style.left = parseFloat(getComputedStyle(box).left) - 3 + 'px';
      }
      if (event.key == 'ArrowRight') {
        box.style.left = parseFloat(getComputedStyle(box).left) + 3 + 'px';
      }
      
    })
  </script>

四、事件响应链

1.事件冒泡：标签之间形成嵌套关系之后，绑定同一事件，会由子级逐渐冒泡到父级

<style>
    .outer {
      width: 300px;
      height: 300px;
      background-color: purple;
      position: relative;
    }
    .middle {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 360px;
    }
    .inner {
      width: 100px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 360px;
    }
  </style>

  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>

  <script>
    let outer = document.querySelector('.outer');
    let middle = document.querySelector('.middle');
    let inner = document.querySelector('.inner');

    function handleOuter() {
      console.log('outer');
    }
    function handleMiddle() {
      console.log('middle');
    }
    function handleInner() {
      console.log('inner');
    }
    // 按照事件冒泡响应过程来触发
    outer.onclick = handleOuter;
    middle.onclick = handleMiddle;
    inner.onclick = handleInner;
  </script>

2.事件捕获：标签之间形成嵌套关系之后，绑定同一事件，会由父级逐渐冒泡到子级

  • 格式：node.addEventListener('事件类型', 处理函数, true); 
  • 只有addEventListener绑定的事件才有事件捕获
<style>
    .outer {
      width: 300px;
      height: 300px;
      background-color: purple;
      position: relative;
    }
    .middle {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 360px;
    }
    .inner {
      width: 100px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 360px;
    }
  </style>

  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>

  <script>
    let outer = document.querySelector('.outer');
    let middle = document.querySelector('.middle');
    let inner = document.querySelector('.inner');

    function handleOuter() {
      console.log('outer');
    }
    function handleMiddle() {
      console.log('middle');
    }
    function handleInner() {
      console.log('inner');
    }
    // 按照事件捕获响应过程来触发
    outer.addEventListener('click', handleOuter, true);
    middle.addEventListener('click', handleMiddle, true);
    inner.addEventListener('click', handleInner, true);
  </script>

3.如果既有事件冒泡也有事件捕获，就会先捕获再冒泡!!

<style>
    .outer {
      width: 300px;
      height: 300px;
      background-color: purple;
      position: relative;
    }
    .middle {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 360px;
    }
    .inner {
      width: 100px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 360px;
    }
  </style>

  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>

  <script>
    let outer = document.querySelector('.outer');
    let middle = document.querySelector('.middle');
    let inner = document.querySelector('.inner');

    function handleOuter() {
      console.log('outer');
    }
    function handleMiddle() {
      console.log('middle');
    }
    function handleInner() {
      console.log('inner');
    }

    // 按照事件冒泡响应过程来触发
    outer.onclick = handleOuter;
    middle.onclick = handleMiddle;
    inner.onclick = handleInner;

    // 按照事件捕获响应过程来触发
    outer.addEventListener('click', handleOuter, true);
    middle.addEventListener('click', handleMiddle, true);
    inner.addEventListener('click', handleInner, true);
  </script>

五、事件代理

事件代理:借助事件冒泡处理过程，并且通过事件源对象获取事件目标，将事件绑定到父节点身上

【案例】通过给ul绑定事件，点击某个li时，该li的样式改变

  <ul>
    <li>列表标签1</li>
    <li>列表标签2</li>
    <li>列表标签3</li>
    <li>列表标签4</li>
    <li>列表标签5</li>
  </ul>

  <script>
    let ul = document.querySelector("ul");
    let lis = document.querySelectorAll('li');
    
    // 新增一个字节点
    let li = document.createElement("li");
    li.innerHTML = '列表标签6';
    ul.append(li);
    
    // 给ul绑定
    ul.addEventListener('click', function(event) {
    // 排他思想 点击li之前去掉其他li的样式
      for (let i = 0; i < lis.length; i++) {
        lis[i].style.color = '';
        lis[i].style.fontSize = '';
      }
      event.target.style.color = 'red';
      event.target.style.fontSize = '24px';
      // console.log(event.target);   
    })
  </script>

结果：

六、停止冒泡

1.停止冒泡：点击子级之后，父级不再被触发

2.停止冒泡的方式：

  • event.stopPropagation();
  • event.cancelBubble = true

兼容性比较好的一种写法:

event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;

  <style>
    .outer {
      width: 300px;
      height: 300px;
      background-color: purple;
      position: relative;
    }

    .middle {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 360px;
    }

    .inner {
      width: 100px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 360px;
    }

    .box {
      width: 140px;
      height: 220px;
      background-color: lightsalmon;
      display: none;
      position: absolute;
    }
  </style>

  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>

<script>
 let outer = document.querySelector('.outer');
    let inner = document.querySelector('.inner');

    function handleOuter() {
      console.log('outer');
    }

    function handleInner() {
      console.log('inner');

      // event.stopPropagation();
      // 兼容性比较好的一种写法
      event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
    }

    outer.onclick = handleOuter;
    inner.onclick = handleInner;
  </script>

3.阻止默认事件

【案例】点击鼠标右键，弹出自己写的盒子

 <style>
    .box {
      width: 140px;
      height: 220px;
      background-color: lightsalmon;
      display: none;
      position: absolute;
    }
  </style>

  <div class="box">
    ……………………
  </div>

window.oncontextmenu = function (event) {
      document.querySelector(".box").style.display = "block"

      document.querySelector(".box").style.top = event.pageY + "px";
      document.querySelector(".box").style.left = event.pageX + "px";

      return false;
    }
奋斗的小baby
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的回车键按下触发登录事件
斗师——Ace
09-23 3740
created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } methods:{ async login() { this.$refs.form.validate(_ => { if (_) { c...
5天学会PROTEL 99 SE
08-08
第二天，我们进入电路原理图设计环节。会详细讲解如何绘制电路原理图，包括元件库的使用、元件的放置、连接线的绘制、网络标号的设定以及错误检查。此外，还将学习如何利用元件参数编辑器定制和管理自定义元件。 第...
(Keydown,KeyCode)键盘事件的简单使用
猫老爷
04-07 1万+
开发工具与关键技术： VS Keydown,KeyCode 作者:听民谣的老猫 撰写时间：2019/4/1 16:15 W.A.S.D 是我们玩游戏时经常用到的几个键盘按键。通过W来触发游戏人物向上移动，A.S.D分别控制着左下右。也就是为W.A.S.D绑定相应的键盘事件。 ______ 键盘事件 键盘事件的使用就和鼠标事件原理一样。只不过鼠标事件是通过鼠标的点击来触发，而键盘事件是通...
注册快捷键（单快捷键、组合快捷键）
weixin_42333548的博客
12-04 1358
一、注册快捷键方法 window.addEventListener('keydown', onWindowKeyDown, false); window.addEventListener('keyup', onWindowKeyUp, false); 注意：addEventListener在组建销毁的时候也需要销毁 eg：react+hooks useEffect(() => { window.addEventListener('keydown', onWindowKeyDow
js键盘监听事件(pc端)
Tanjc518的博客
08-31 1075
js键盘监听事件
addEventListener( ) 方法 -- 事件监听
m0_52545254的博客
07-11 6516
事件监听/捕获/冒泡
【火线100天】2015中考数学 第五单元 四边形测试题1
08-19
【火线100天】2015中考数学第五单元四边形测试题1主要涵盖了四边形的各类知识点，包括正多边形、菱形、矩形、正方形的性质，以及全等三角形的性质、勾股定理、二次根式运算、一次函数性质、图形变换等。下面是对这些...
AD教案实验6单片机最小系统原理图设计.pdf
06-18
3. 变量BOM单输出：按照第二步设置好BOM格式后，如果要以变量形式输出BOM单，课单机菜单按钮，从中选择Change Variant变量，再到处BOM单既可以变量形式输出。 五、自定义模板 大家也可以自定义模板：利用Excel...
JavaScript 练手小技巧：键盘事件
九天翔龙的技术博客
01-28 3448
键盘事件应该是鼠标事件之外，使用频率最高的 JS 事件了吧？一般用于或者。键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件。
vue中监听键盘按下
I_Do_Well的博客
06-07 517
2.然后在methods中直接写入事件即可在整个页面监听。1.在mounted中创建键盘监听。
Vue 中实现监听keydown快捷键阻止和恢复浏览器默认事件
前端打工人的博客
07-29 1208
Vue中实现监听keydown快捷键阻止和恢复浏览器默认事件
vue自定义热键、自定义快捷键组合，vue阻止默认事件
m0_50427485的博客
02-11 3911
vue自定义热键、自定义快捷键组合，vue阻止默认事件，window.addEventListener监听事件，键盘事件KeyDown，自定义快捷键组合可能会与浏览器的默认快捷键冲突，mixins
Vue页面监听键盘按键的多种方法
热门推荐
一步一个脚印，踏实努力，向着目标前进
10-06 1万+
在Vue页面中，可以使用多种方法来监听键盘按键。@keydown@keyup
一个月纯 JS 挑战——JavaScript30（1）——纯 JS 模拟敲鼓效果
幼儿园园长
03-30 958
首先呢，给大家推荐一个很好的免费的JS学习项目——JavaScript30。 JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。 我是跟着github上的一位大神一点一点学习的，他每一个挑战都有详细的注释和讲解，不会学的一头雾水，但是主要还是要自己动手去写代码并且自己复习知识点呀。 附上github地址：ht
总结——JavaScript常用事件
创梦流浪人
01-26 110
JavaScript中常见的的事件总结，鼠标事件、键盘事件、表单事件、加载事件、点击事件、双击事件，这些事件都是我们在写代码的时候经常会用到的，使用代码的形式通俗易懂的讲解这些事件应该怎么使用，需要反复练习，烂熟于心。
前端监听键盘事件
老实敲代码，佛只渡有缘人
03-06 1311
react中监听键盘事件
vue中使用事件监听addEventListener()来实现回车登录功能
sanrenxingqg的博客
07-01 3016
在开发中需要做一个点击回车按钮来实现登录的功能，使用到事件监听。 事件监听addEventListener()用法：（参照文献：菜鸟教程.） addEventListener(event, function, useCapture) 参数一event：必须。字符串，指定事件名。 注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。 参数 描述 event 必须。字符串，指定事件名。 “onclick”；注意: 不要使用 “on” 前缀。 例如，使
autocad 二次开发 bom
最新发布
08-21
BOM（Bill of Materials，物料清单）在AutoCAD二次开发中，通常是指项目中所需的所有组件、材料和部件列表，这些信息会在工程设计过程中生成，以便于管理和成本估算。 在AutoCAD二次开发中，对BOM的支持通常是通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值