DOM的学习----事件

蟹蟹22

已于 2022-08-25 10:34:57 修改

阅读量851

点赞数 1

文章标签：学习 html 前端

于 2022-08-24 20:14:23 首次发布

本文链接：https://blog.csdn.net/m0_55673399/article/details/126511293

版权

了解事件

JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间

事件三要素

1.事件源：事件被触发的对象比如-->按钮对象

2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…

3.事件处理程序：通过一个函数赋值的方式

执行事件的步骤

1.获取事件源

2.注册事件（绑定事件）

3.采用函数赋值形式添加事件处理程序

事件冒泡

当子元素和父元素都有事件时，触发子元素事件会向上触发父元素事件，一直到Document


<body>
  <div id="outer">outer
    <div id="center">center
      <div id="inner">inner</div>
    </div>
  </div>
  <script>
    var inner = document.getElementById('inner');
    var center = document.getElementById('center');
    var outer = document.getElementById('outer');
    // 当我们只有一个inner点击方法的时候 我们发现想要实现的效果和我们预期的一样
    inner.onclick = function () {
      console.log('我是inner点击的');
    }
    // 但是当我们给inner的父元素和祖先元素也添加点击事件时 一点击inner 所有祖先元素的事件都会被触发，这就是事件冒泡现象
    center.onclick = function () {
      console.log('我是center点击的');
    }
    outer.onclick = function () {
      console.log('我是outer点击的');
    }
  </script>
</body>

阻止冒泡：

直接在对应方法中使用event.stopPropagation()便可阻止事件冒泡

事件处理程序

事件处理程序的名字以"on"开头

HTML 事件处理程序

<body>
 <!-- 一 -->
  <button id="btn" onclick="console.log('Clicked')">点我呀</button>
 <!-- 二 -->
  <button onclick="handler()">按钮一</button>
  <script>
    function handler () {
      console.log('按钮一被点击了');
    }
  </script>
</body>

DOM0事件处理程序

<body>
  <button id="btn">点一下</button>
  <script>
    var btn = document.getElementById('btn')
    btn.onclick = function () {
      console.log('按钮被点击了')
    }
  </script>
</body>

DOM2事件处理程序

<body>
  <button id="btn">点击</button>
  <script>
    // 添加事件 
    var btn = document.getElementById('btn')
    btn.addEventListener('click', function () {
      console.log('按钮被点击了')
    })
    // 如果想要移除 得这么添加事件
    var handeler = function () {
      console.log('点击')
    }
    btn.addEventListener('click', handeler)
    //  移除事件
    btn.removeEventListener('click', handeler)
  </script>
</body>

事件对象

在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中

阻止默认事件得发生

event.preventDefault();

阻止a标签的默认事件的发生

 <a href="https://www.baidu.com">百度一下</a>
  <script>
    // 阻止a标签的默认事件发生
    var a = document.getElementsByTagName('a')[0]
    a.onclick = function () {
      event.preventDefault();
      console.log('被点击了');
    }
  </script>

阻止表单事件的默认行为


  <form action="eef">
    <input type="submit" value="提交" id="inp1">
  </form>
  <script>
    // 阻止表单事件的默认行为
    var input1 = document.getElementById('inp1')
    input1.onclick = function () {
      event.preventDefault();
      console.log('被点击了');
    }
  </script>

事件委托

点击不同的子元素li，触发不同的事件

事件委托（明明子元素节点自己可以实现的事件委托给父节点）
目的:减少dom操作浏览器的重排和重绘,并且新添加的元素也是有事件的

<ul id="father">
    <li id="li1">去哪</li>
    <li id="li2">吃啥</li>
    <li id="li3">喝啥</li>
  </ul>
 <script>
    // 分别获取三个子元素的节点
    var li1 = document.getElementById('li1')
    var li2 = document.getElementById('li2')
    var li3 = document.getElementById('li3')
    // 子元素的触发事件
    li1.onclick = function () {
      console.log('苏州');
    }
    li2.onclick = function () {
      console.log('想吃火锅');
    }
    li3.onclick = function () {
      console.log('茶百道的草莓奶冻');
    }
</script>

委托后

<script>
var ulfa = document.getElementById('father')
    ulfa.addEventListener('click', function (event) {
      var target = event.target
      switch (target.id) {
        case 'li1':
          target.innerHTML = '苏州'
          break
        case 'li2':
          target.innerHTML = '想吃火锅'
          break
        case 'li3':
          target.innerHTML = '茶百道的草莓奶冻'
          break
      }
    })
 </script>

例如，利用事件冒泡来完成事件委托

<script>
  window.onload = function () {
    var ul = document.getElementsByTagName('ul')[0]
    var li = document.getElementsByTagName('li')
    ul.onclick = function (event) {
      // 利用事件冒泡
      event.target.style.backgroundColor = 'red'
      console.log(event.target, '事件源');
    }
  }
</script>

<body>
  <ul>
    <li>1个li</li>
    <li>2个li</li>
    <li>3个li</li>
    <li>4个li</li>
    <li>5个li</li>
    <li>6个li</li>
    <li>7个li</li>
    <li>8个li</li>
  </ul>
</body>

蟹蟹22

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的学习----事件

了解事件JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间1.事件源：事件被触发的对象比如-->按钮对象2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…3.事件处理程序：通过一个函数赋值的方式。
复制链接

扫一扫