DOM事件机制

最新推荐文章于 2023-07-16 23:21:02 发布

weixin_45753087

最新推荐文章于 2023-07-16 23:21:02 发布

阅读量53

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45753087/article/details/126510504

版权

HTML DOM允许JavaScript对HTML事件做出反应。JS能够在事件发生时执行，比如用户点击某个ＨＴＭＬ元素时。

为了在用户点击时执行代码，向HTML属性添加JavaScript代码

<div id='div1'>我是一个div</div>
<button id='btn'>点我啊</button>
<!-- 还可以在HTML标签中进行事件的绑定 需要加()-->
<button id='btn2' onclick="clickFun()">点我啊2</button>
<script>
  // 点击按钮，改变div的内容，大小，背景颜色
  // 分别获取div和button的节点
  var div = document.getElementById('div1');
  var btn = document.getElementById('btn');
  // 如需向 HTML 元素分配事件，您能够使用事件属性。给按钮节点绑定点击事件
  btn.onclick = function () {
    div.innerHTML = '点击按钮改变的';
    div.style.width = '200px';
    div.style.height = '200px';
    div.style.backgroundColor = 'red';
  }
  // 执行在btn2中绑定的事件
  function clickFun() {
    console.log('我是btn2绑定的事件');
  }
</script>

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

事件由三部分组成：事件源、事件类型、事件处理程序（事件三要素）

１、事件源：事件被触发的对象

２、事件类型：触发时间的条件

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

事件的执行步骤

１、获取事件源

２、注册事件（绑定事件）

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

常用事件

－用户点击鼠标时

－网页加载后

－图像加载后

－鼠标移至元素上时

－．．．

一、事件流

事件流描述了页面接收事件的顺序。

１、事件冒泡（IE事件流）

事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）

<!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>Document</title>
  <style>
    *{
      color: white;
      font-size: 20px;
    }
    #outer{
      width: 300px;
      height: 300px;
      background-color: red;
    }
    #center{
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    #inner{
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<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>
</html>

在点击页面中的id为inner的div元素，click事件会以如下顺序发生