菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 薛伯一-20221110-DOM&BOM-DAY04 [打印本页]

作者: Paracelsus 时间: 2022-11-11 01:20
标题: 薛伯一-20221110-DOM&BOM-DAY04

一、事件深入

  1.1注册事件方式
<h1>h1标签</h1>
         function h1Click() {
         console.log('h1');
      }
后注册的事件处理函数将会覆盖前面注册的处理函数
const box =  document.querySelector('#box');
            box.addEventListener('click', function () {
         console.log('box')
      })
  注意：如果添加多个事件，不会覆盖掉之前的事件，并且会按顺序同时打印

  1.2移出绑定事件
传统方式解绑
<div id="box1">box1</div>

function box1Click() {
         console.log('---------')
document.querySelector('#box1').onclick = null;
      }
常用方式解绑
const box2 = document.querySelector('#box2');
      box2.addEventListener('click', box222);
      function box222() {
         box2.removeEventListener('click', box222);
      }

  1.3事件流
事件冒泡
1.所有元素都不是独立的，是串联在一起的。
2.单个元素触发事件之后还会影响其他元素
3.事件流的方式：事件冒泡（从小到大）、事件捕获（从大到小）
4.事件冒泡阶段：在点击完成之后立即触发目标对象，然后一层一层向上冒泡。
5.事件捕获阶段：在点击div后不会立即触发div的事件，而是一层一层向下捕获，最终到达div触发事件
事件捕获
1.在每个点击事件后添加true，会从最高的一级父级开始打印
阻止默认事件：e.stopPropagation();
在事件捕获中如果添加该事件对象方法，只会打印最高那一级的父级
在冒泡事件中如果添加该事件对象方法，会打印点击的那一级dom节点

  1.4事件对象
event事件对象是传递给事件处理函数的唯一参数
currentTarget：当前事件处理程序所在的元素
target：事件目标，只包含事件的真实目标
this：始终指向currentTarget
在事件处理内部，只有一个节点，this、target、currentTarget指向的是同一个元素dom
  1.5目标对象

const list = document.querySelector('#list');
      list.addEventListener('click', function (e) {
         console.log('e.target==this', e.target == this);
         console.log('e.currentTarget==this', e.currentTarget == this);

  1.6修改type类型disabled禁用属性

  1.7阻止事件默认行为

   阻止右键菜单的事件document.addEventListener('contextmenu', function (e) {
         e.preventDefault();
      })
   阻止左键选择文本document.querySelector('selectstart',function(e){
         e.preventDefault();
      })

  1.8键盘事件
获取键盘keycode：
const ipt = document.querySelector('#ipt');
      ipt.addEventListener('keydown', function (e) {
         document.querySelector('#keycode').textContent = e.keyCode;
      })

  1.9事件委托就是把一个元素的响应事件的函数委托到另一个元素。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)