js-DOM-事件

乖女子@@@

已于 2022-10-12 19:52:27 修改

阅读量364

点赞数

分类专栏： javascript 文章标签： javascript

于 2021-03-27 20:49:03 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/115270189

版权

javascript 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

(2)使用addEventListener来注册事件

[2]移除事件

[3]什么事件为冒泡事件；什么事件是委托事件

1.事件阶段

事件分为三大阶段

捕获事件
- 当某个事件被触发之后，那么它所有的父元素相同的事件也会被触发；
- 执行顺序：在捕获的过程中，最外层（根）元素的事件先被触发，然后依次向内执行，直到触发最里面的元素（事件源)--->由外到内，由父到子；
目标事件(正常事件)
冒泡事件
- 当某个元素的事件被触发之后，那么它所有的父元素相同的事件也会被触发；
- 执行顺序：由内到外，从小到大；

执行顺序

从上往下开始执行；

先执行捕获阶段；
再执行目标阶段；
再执行冒泡阶段

2.注册/移除事件

[1]注册事件

注册事件有两种方式,一种是使用on关键字来进行事件注册，另一种是通过addEventListener方法进行事件注册。

(1)on关键字

使用on关键字注册事件的特点是如果同一个元素,拥有多个相同事件，如果利用on关键字,那么后面的事件会覆盖前面的事件--->也就是说若是使用on关键字注册事件，同一元素不能注册相同的事件！

eg:注册点击事件-点击只会打印大家好,我是课代表

box.onclick = function () {
    console.log('大家好,我是班长');
}
box.onclick = function () {
    console.log('大家好,我是课代表');
}

(2)使用addEventListener来注册事件

使用addEventListener注册事件，可以实现给一个元素,设置多个相同的事件

(1)语法

addEventListener(事件类型，事件方法，true/false)

第三个参数为false那么该事件为事件冒泡，若是为true那么该事件为事件委托

eg注册点击事件

function fun1() {
    console.log('大家好,我是班长');
}

addEventListener('click' fun1,false)

[2]移除事件

(1)on关键字注册的事件在移除时直接置空；

// 1. 利用on设置事件
box.onclick = function () {
    console.log('我只能打印一次');
    // 点击完之后立刻清空点击事件
    this.onclick = null;
}

(2)addEventListener注册事件使用removeEventListener方法移除事件

function fun() {
    console.log('我只能打印一次');
    // 点击完之后移除事件
    // removeEventListener()
    // add怎么赋值,remove就怎么赋值
    box.removeEventListener('click',fun,false)
}

[3]什么事件为冒泡事件；什么事件是委托事件

使用on注册的事件是冒泡事件；
使用addEventListener注册的事件
- 若是第三个参数为false则是冒泡事件；
- 若是第三个参数为true若是捕获事件；

[4]阻止事件冒泡/事件捕获

即可以阻止事件冒泡又可以阻止事件捕获
- e.stopPropagation();
阻止事件冒泡
- e.cancelBubble();

[5].如何理解事件代理

[1]定义：事件代理简单来说就是：事件不直接绑定在某个元素上而是绑定在该元素的父元素上，进行触发的时候再通过条件进行判断；

[2]优点：

大量节省内存占用，减少注册事件；
当在新增加子对象时，无需再对齐进性事件绑定，对于动态内容比较友好；

[3]举例说明

如下，若是我们为li设置点击事件，需要循环设置10个点击事件(但是若是li元素有成千上百个呢，直接为li元素设置点击事件就不太友好了)，事件代理仅需设置一个点击事件就可以完成所需功能！

 <ul id="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
    <script>
      let ul = document.getElementById('ul')
      ul.onclick=function(e){
          console.log(e.target.innerHTML);
      }
    </script>

3.事件类型

注：事件不采用驼峰命名，所有的都是用小写

1)表单元素的事件

[1]oninput---表单元素值改变事件；

eg:当输入框中内容改变的时候，打印输入框中的内容；

 <body>
    <input type="text" id="input" />
    <script>
      let inputBox = document.getElementById('input')
      inputBox.oninput = function () {
        console.log(inputBox.value)
      }
    </script>
  </body>

[2]获得焦点事件--主要用于表单:onfoucs
[3]失去焦点事件:onblur

2)鼠标/键盘事件

鼠标事件

[1]鼠标点击事件：onclick
[2]鼠标双击事件:ondblclick
[3]鼠标移入时触发:onmouseenter
[4]鼠标移出时触发:onmouseleave
[5]鼠标滚动事件:onscroll
[6]鼠标移动事件:onmousemove
[7]鼠标按下事件:onmousedown
[8]鼠标弹起事件:onmouseup

键盘事件

[1]键盘按下时触发:onkeydown
[2]键盘按下时触发(禁止了功能键):onkeypress
[3]键盘弹起事件:onkeypress
- 注：中文弹起两次，英文弹起一次