蓝旭前端05：JavaScript进阶

meoo_

于 2024-04-12 21:19:40 发布

阅读量1.6k

点赞数 49

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/meoo_/article/details/137686159

版权

一、获取元素

1.通过id获取元素

ID：是元素的唯一属性，只能有一个。

document.getElementById('idname');

2.通过类名获取元素

CLASS：class属性不是唯一的可以有多个，多个类名之间用空格隔开，返回的是一个数组。

document.getElementsByClassName('classname');

3.通过标签名获取元素

tag：标签如div，p，hr1；

document.getElementsByTagName('div');

4.通过选择器获取元素

selector：选择器如：#Id,.class,标签名等。


        //querySelector只返回第一个与之匹配的元素
        document.querySelector('selectorname');
        //querySelectorAll返回所有匹配的元素
        document.querySelectorAll('seletorname');

二、事件监听

1.事件监听

当一个元素绑定了一个监听器后，对应事件触发时会执行相应函数。

element.addEventListener(event, function, useCapture)

解释：event是事件的类型，function是事件触发时执行的函数，useCapture是一个布尔值，表示事件是否在捕获阶段执行。

事件类型：click、mouseover、mouseout、keydown、keyup等。
事件处理函数：事件触发时执行的函数。
捕获阶段：事件从最外层元素向内层元素传播的阶段。例如：点击一个按钮，事件会从document传播到按钮。

2.监听例子

<div id="div">
        <button id="button">点此触发事件</button>
    </div>
    <script>
        document.getElementById('button').addEventListener('clcik',function(){
            console.log('click');
        },false);
    </script>

点击按钮触发点击事件，监听器执行函数，控制台打印click。

3.冒泡阶段

什么是冒泡阶段：事件从内层元素向外层元素传播的阶段。例如：点击一个按钮，事件会从按钮传播到document。
捕获阶段：事件从最外层元素向内层元素传播的阶段。例如：点击一个按钮，事件会从document传播到按钮。

冒泡阶段和捕获阶段的执行顺序：先捕获再冒泡。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <button id="button">点此触发事件</button>
    </div>
    <script>
        document.getElementById('div').addEventListener('click',function(){
            console.log('div')
        },false)
        document.getElementById('button').addEventListener('click',function(){
            console.log('click')
        },false)
    </script>
</body>
</html>

当点击按钮时先触发button的事件然后冒泡到父元素，使得父元素事件触发。

控制台先打印click在打印div。

怎么阻止冒泡：使用event.stopPropagation()方法。

三、事件对象

1.事件对象

事件对象是事件触发时传递给事件处理函数的一个对象，包含了事件的相关信息。

element.addEventListener('event', function(event) {
    // 事件对象
})

事件对象的属性：type、target、currentTarget、clientX、clientY等。
事件对象的方法：preventDefault()、stopPropagation()等。
事件对象的类型：click、mouseover、mouseout、keydown、keyup等。
事件对象的坐标：事件触发时的坐标。

target与currentTarget别：target是指向点击事件触发时的元素，currentTarget是指向获取的id元素。currentTarget的用法主要是帮助你确定当前处理事件的元素，并在需要时阻止事件冒泡或进行其他相关操作。

四、事件委托

事件委托是指将事件绑定到父元素上，通过事件对象的target属性判断事件源，从而执行对应的事件处理函数。

事件委托的优点：减少事件绑定，提高性能。
事件委托的原理：事件冒泡。
事件委托的应用：动态添加元素五、

五、事件绑定

1.事件绑定

事件绑定是指将元素绑定上事件处理函数，当事件触发时函数执行。

<!DOCTYPE html>
<html>
<head>
    <title>事件绑定</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        document.getElementById('btn').addEventListener('click', function() {
            console.log('click')
        }, false)
    </script>
</body>
</html>

事件绑定的优点：提高代码维护性，增强页面交互性，灵活性：使得开发者可以根据具体需求定制事件处理行为。
事件绑定的原理：事件监听。

六、事件解绑

1.事件解绑

事件解绑是指将事件处理函数从元素上解绑，当事件不再触发时不执行对应的事件处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="button">点我</button>
    </div>
    <script>
        function myFuction(){
            console.log('button')
            document.getElementById('button').removeEventListener('click',myFuction)
        }
        document.getElementById('button').addEventListener('click',myFuction);
    </script>
</body>
</html>

当第二次按下按钮时已经解绑，控制台不会再次打印button。

七、事件触发

1.事件触发

事件触发通常是在编程中，当特定的事件（如用户点击按钮、鼠标移动、键盘输入等）发生时，自动执行相应的代码或函数。

element.dispatchEvent(event)

<!DOCTYPE html>
<html>
<head>
    <title>事件触发</title>
</head>
<body>
    <button id="btn">按钮</button>
    <div id="clr">请把鼠标移动到上面</div>
    <div id="keyon">现在没有按下</div>

    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function() {
            console.log('click');
        }, false);
        // 手动触发按钮的点击事件
        btn.dispatchEvent(new Event('click'));
        var clr = document.getElementById('clr');
        clr.addEventListener('mouseover', function() {
            this.style.backgroundColor = 'red';//请把鼠标移动到上面背景颜色变成红色
        }, false);
        // 手动触发div的mouseover事件
        clr.dispatchEvent(new Event('mouseover'));

        var keyon = document.getElementById('keyon');
        document.addEventListener('keydown', function() {
            keyon.innerHTML = '按下了键盘';
        }, false);
        document.addEventListener('keyup', function() {
            keyon.innerHTML = '现在没有按下';
        }, false);

        // 手动触发键盘事件
        document.dispatchEvent(new KeyboardEvent('keydown', {
            key: 'a'
        }));

    </script>
</body>
</html>

八、事件处理程序

事件处理程序

事件处理程序是指事件触发时执行的函数，用于处理事件。

事件处理程序的类型：内联事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序。
事件处理程序的优点：解耦，提高代码的可维护性。

1.内联事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="console.log('click')">点我</button>
</body>
</html>

优点：代码简洁，直观。

缺点：维护性低

2.DOM0级事件处理程序

DOM0级事件处理程序是指将事件处理函数赋值给元素的事件属性。

<!DOCTYPE html>
<html>
<head>
    <title>DOM0级事件处理程序</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        document.getElementById('btn').onclick = function() {
            console.log('click');
        }
    </script>
</body>
</html>

优点：简单，直观

缺点：不利于维护，同一事件只能绑定一个处理函数。

3.DOM2级事件处理程序

<!DOCTYPE html>
<html>
<head>
    <title>DOM2级事件处理程序</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        document.getElementById('btn').addEventListener('click', function() {
            console.log('click');
        }, false)
    </script>
</body>
</html>

优点：支持事件委托、支持事件解绑、支持事件触发、支持事件对象。
注意：DOM2级事件处理程序不会覆盖元素原有的事件处理函数。
注意：DOM2级事件处理程序推荐使用，提高代码的可维护性。
注意：DOM2级事件处理程序的第三个参数useCapture是一个布尔值，表示事件是否在捕获阶段执行，默认是false(可不写)。