从零开始JavaScript学习第12天笔记:DOM的进阶

最新推荐文章于 2024-08-11 18:40:36 发布

骚年的潜力

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量53

点赞数

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/2203_75620248/article/details/132431625

版权

从零开始JavaScript学习第12天笔记:DOM的进阶

一.元素样式操作
- 1.getComputedStyle
二.事件的绑定方式
三.事件的响应链
四.addEventListener的使用
五.事件类型
- 1.Click（点击事件）

一.元素样式操作

通过获取到了元素，对其进行样式操作。
一道练习题

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
        }

        .box {
            width: 200px;
            height: 200px;
            margin-right: 10px;
            background-color: #ccc;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <img src="./images/イベ／ランス出撃／シーラ.jpg" onclick="changeBackground(this)">
        </div>
        <div class="box">
            <img src="./images/イベ／１軍.jpg" onclick="changeBackground(this)">
        </div>
        <div class="box">
            <img src="./images/イベ／２軍.jpg" onclick="changeBackground(this)">
        </div>
    </div>
</body>
<script>
    function changeBackground(image) {
        var imageUrl = image.src;
        document.body.style.backgroundImage = `url(${imageUrl})`;//`url(${imageUrl})`
        document.body.style.backgroundRepeat = 'no-repeat';
        document.body.style.backgroundSize = 'cover';
    }
</script>

该段代码的作用就是选择对于的图片，然后背景就变成相对应的图片

1.getComputedStyle

getComputedStyle是一个方法，用于获取一个元素的计算样式（computed style）。
getComputedStyle方法是Window对象的一个方法，通过该方法可以获取一个元素的计算样式。计算样式是指应用到元素上的所有样式，包括通过CSS样式表和内联样式所定义的样式。
要使用getComputedStyle方法，需要先获取一个元素的引用，可以使用document.getElementById()等方法来获取元素的引用，然后通过元素的window.getComputedStyle()方法来获取计算样式对象。


        setTimeout(() => {
            var box = document.getElementsByClassName("box")[0]
            var timer = setInterval(() => {
                let newh = parseFloat(getComputedStyle(box).height) + 4
                box.style.height = newh + "px"
                if (newh >= 400) {
                    clearInterval(timer)
                }
            }, 17);

        }, 2000);

需要注意的是，计算样式中的属性值是以字符串的形式返回的，如果需要使用数值进行计算，可以使用parseInt()或parseFloat()等方法将字符串转换为数值类型。

二.事件的绑定方式

事件是指用户与网页交互时触发的动作或行为，例如点击按钮、鼠标移动、键盘按下等。事件可以在网页中的元素上触发，例如按钮、链接、输入框等。JavaScript通过事件来响应用户的交互，执行相应的代码或操作。

1.HTML属性绑定

以在HTML元素上直接使用事件属性进行绑定。例如，使用onclick属性可以在按钮被点击时触发相应的事件处理函数。

<button onclick="myFunction()">Click Me</button>

2.DOM属性绑定

将事件处理函数赋值给元素的属性。例如，使用addEventListener方法可以将事件处理函数绑定到元素的特定事件上。

var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
  // 处理按钮点击事件的代码
});

3.事件委托

事件委托是一种将事件处理函数绑定到父元素上，通过冒泡机制在子元素上触发事件的方式。这样可以减少事件处理函数的数量，提高性能。通过检查事件的target属性，可以确定是哪个子元素触发了事件。

var parent = document.getElementById("parentElement");
parent.addEventListener("click", function(event) {
  if (event.target && event.target.nodeName === "LI") {
    // 处理列表项点击事件的代码
  }
});

三.事件的响应链

1.捕获阶段：在捕获阶段中，事件从DOM树的根节点开始逐级向下传播，直到达到事件的目标元素。在这个过程中，事件经过的每个元素都有机会捕获该事件并执行相应的事件处理程序。捕获阶段通过执行“捕获型事件处理函数”来处理事件。
2.目标阶段：当事件到达目标元素时，会触发该元素上绑定的事件处理程序。这个阶段是事件的目标阶段，通过执行“目标型事件处理函数”来处理事件。
3.冒泡阶段：在目标阶段之后，事件会从目标元素开始向上冒泡，逐级向上传播到DOM树的根节点。在这个过程中，事件经过的每个元素都有机会冒泡该事件并执行相应的事件处理程序。冒泡阶段通过执行“冒泡型事件处理函数”来处理事件。
事件响应链的顺序是先捕获，再目标，最后冒泡。但是，并不是所有的事件都会经过捕获和冒泡阶段，只有支持捕获和冒泡的事件才会经过这两个阶段。

在实际应用中，可以利用事件的冒泡和捕获机制来实现事件的委托和事件的多层处理。事件委托可以将事件处理程序绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素并触发父元素上的事件处理程序。这样可以减少事件处理程序的数量，提高性能。事件的多层处理可以利用事件的冒泡机制，通过父元素上的事件处理程序来处理多个子元素的相同事件。

四.addEventListener的使用

1.addEventListener的语法

addEventListener 是 JavaScript 中用于给元素添加事件监听器的方法。
它用于在指定元素上注册特定类型的事件，并指定当事件发生时要执行的回调函数。
element.addEventListener(event, function, useCapture);
event：要监听的事件类型，比如 click、mouseover 等。
function：事件触发时要执行的回调函数。
useCapture：一个可选的布尔值参数，指定事件是否在捕获阶段进行处理。默认为 false，即在冒泡阶段处理事件。

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button clicked!");
});

2.stopPropagation的语法

stopPropagation 是 JavaScript 中用于阻止事件冒泡的方法。
事件冒泡是指当一个元素上的事件被触发时，该事件会向上冒泡到父元素，直到冒泡到文档的根元素。如果不阻止事件冒泡，事件将会在整个冒泡过程中触发所有父元素上相同类型的事件处理程序。

<body>
  <div id="myContainer" style="width: 200px; height: 200px; border: 1px solid black;">
    <button id="myButton">Click Me!</button>
  </div>

  <script>
    var button = document.getElementById("myButton");
    button.addEventListener("click", function(event) {
      event.stopPropagation();
      console.log("Button clicked!");
    });

    var container = document.getElementById("myContainer");
    container.addEventListener("click", function() {
      console.log("Container clicked!");
    });
  </script>

3.stopImmediatePropagation

用于停止当前事件的传播，并阻止任何后续的事件处理程序被调用。

 <button id="myButton">Click Me</button>

    <script>
        document.getElementById("myButton").addEventListener("click", function (event) {
            console.log("1111");
        });

        document.getElementById("myButton").addEventListener("click", function (event) {
            console.log("2222");
            event.stopImmediatePropagation();
        });

        document.getElementById("myButton").addEventListener("click", function (event) {
            console.log("3333");
        });

        document.getElementById("myButton").click();
    </script>

主要用于同级别的监听器的判定。

4.removeEventListener()

removeEventListener()方法来解绑事件。removeEventListener()方法用于从指定元素中移除事件处理程序。

<body>
<button id="myButton">Click Me</button>

<script>
    function clickHandler(event) {
        console.log("Button clicked");
    }

    document.getElementById("myButton").addEventListener("click", clickHandler);

    // 解绑事件
    document.getElementById("myButton").removeEventListener("click", clickHandler);
</script>

</body>

5.preventDefault()

preventDefault()是一个事件对象的方法，用于阻止事件的默认行为。当一个事件（比如点击链接、提交表单、按下键盘等）触发时，浏览器会执行该事件的默认行为。但是有时候我们希望阻止事件的默认行为，这时可以使用preventDefault()方法。

<body>

<a href="https://www.example.com" id="myLink">Click Me</a>

<script>
document.getElementById("myLink").addEventListener("click", function(event) {
  event.preventDefault(); // 阻止链接的默认跳转行为
  console.log("Link clicked");
});
</script>

</body>

五.事件类型

1.click: 当鼠标单击元素时触发。
2.mouseover: 当鼠标指针进入元素时触发。
3.mouseout: 当鼠标指针离开元素时触发。
4.keydown（按键按下事件） - 当用户按下键盘上的任意键时触发。
5.dblclick: 当鼠标双击元素时触发。
6.mousedown: 当鼠标按下元素时触发。
7.mouseup: 当鼠标释放元素时触发。
8.mousemove: 当鼠标在元素上移动时触发。
9.contextmenu: 当鼠标右键单击元素时触发。
10.mousewheel: 当鼠标滚轮滚动时触发（兼容性较差）。
11.wheel: 当鼠标滚轮滚动时触发（更现代的事件）。
12.keyup（按键释放事件） - 当用户释放键盘上的按键时触发。
13.Load（加载事件） - 当页面或图片等资源加载完成时触发。
14.Scroll（滚动事件） - 当页面滚动时触发。
15.Resize（窗口大小改变事件） - 当窗口大小改变时触发。
16.Focus（获得焦点事件） - 当元素获得焦点时触发。
17.Blur（失去焦点事件） - 当元素失去焦点时触发。
18.Submit（表单提交事件） - 当用户提交表单时触发。

1.Click（点击事件）

点击分为按下和松开，必须是完整的才被认为是一个点击事件。用Click事件来响应用户点击元素的操作。当用户单击元素时，可以触发Click事件，并执行相应的操作。

// 获取元素
const button = document.getElementById("myButton");
// 添加Click事件监听器
button.addEventListener("click", function() {
  // 在这里编写要执行的操作
  console.log("Button clicked!");
});

骚年的潜力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始JavaScript学习第12天笔记:DOM的进阶

事件委托可以将事件处理程序绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素并触发父元素上的事件处理程序。事件的多层处理可以利用事件的冒泡机制，通过父元素上的事件处理程序来处理多个子元素的相同事件。事件冒泡是指当一个元素上的事件被触发时，该事件会向上冒泡到父元素，直到冒泡到文档的根元素。需要注意的是，计算样式中的属性值是以字符串的形式返回的，如果需要使用数值进行计算，可以使用parseInt()或parseFloat()等方法将字符串转换为数值类型。事件响应链的顺序是先捕获，再目标，最后冒泡。
复制链接

扫一扫