JS事件的相关特性以及原理

最新推荐文章于 2024-07-06 16:47:02 发布

安全天天学

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量92

点赞数 1

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_53568983/article/details/126045765

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.class对象

目标1：
1.改变H1标签的class属性
2.classList对象的添加，判断，替换，删除

<!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>classList对象</title>

</head>
<body>
    <h1 >改变</h1>
    <script>
        let h1 = document.querySelector('h1');
        h1.className = 'red';
        h1.classList.add('blue');
        h1.classList.remove('red');
        if(h1.classList.contains('blue'))
        {
            h1.classList.replace('blue','red');
        }
        h1.classList.toggle('red');
        console.log(h1.className);
    </script>
</body>
</html>

总结:
// 1.在JS中，Element的class叫className，可以直接用这个属性改变
// 也可以用【Element】.classList;
// 2.【Element】.classList.add();【Element】.classList.remove()
// 【Element】.classList.contains();【Element】.classList.replace();
// 【Element】.classList.toggle()

2.事件的添加与删除

目标1：
1.事件对象的使用（设置和取消）
2.设置监听器（设置和取消）
3.搞懂冒泡
目标2：
1.事件派发(自定义事件，事件触发，定时器（一次性，定时性）)
2.限制

<!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>事件的添加与删除</title>
</head>
<body>
    <button>元素对象</button>
    <button>元素事件监听器</button>
    <button>事件派发器/广告联盟点击赚钱</button>
    <script>
        let btn1 = document.querySelector('button:first-of-type');
        btn1.onclick = () => {
            console.log(event);
        }
        btn1.onclick = null;
        const f = function () {
            console.log(event);
        }
        let btn2 = document.querySelector('button:nth-of-type(2)');
        btn2.addEventListener('click',f,false);//函数不用‘’
        btn2.removeEventListener('click',f,false);

        // 目标2：
        // 1.事件派发(自定义事件，事件触发，定时器（一次性，定时性）)
        // 2.限制
        let btn3 = document.querySelector('button:nth-of-type(3)');
        let i = 0;
        let y = () => {
            console.log('你以及转了： ' + i + '元');
            i++;
        }
        btn3.addEventListener('click',y,false);
        const myEvent = new Event('click');
        // btn3.dispatchEvent(myEvent);
        // setTimeout(() => {btn3.dispatchEvent(myEvent);},2000)
        //定时触发

        //间歇触发
        let time = setInterval(() => {
            btn3.dispatchEvent(myEvent);
            if(i>=10)
            {
                clearInterval(time);
            }
        },1000)

总结：
1.事件添加：
1.1直接添加（Element.事件 = ‘’）
解除：Element.事件 = null
1.2添加监听（Element.addEventListener(‘事件’,触发函数,false)）
解除：Element.removeEventListener(‘事件’,触发函数,false)
2.事件派发
2.1添加事件
2.2事件触发(Element.dispatchEvent(事件)）
2.3定时触发（setTimeout(函数，时间)）
2.4间歇触发，以及停止（setInterval(函数，时间)），clearInterval

3.事件传递机制与事件冒泡/事件代理/委托

** 目标1：**
1.事件对象
2.事件主体
3.事件目标

目标2：
1.冒泡传递
2.阻止冒泡
3.target和currenttarget的区别

<!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>事件传递机制与事件冒泡/事件代理/委托</title>
</head>
<body>
    <!-- 目标1：
    1.事件对象
    2.事件主体
    3.事件目标 -->
    <button onclick="show()">点击</button>

    <ul>
        <li data-index="1">item1</li>
        <li data-index="2">item2</li>
        <li data-index="3">item3</li>
        <li data-index="4">item4</li>
        <li data-index="5">item5</li>
      </ul>
    <script>
        let show = () => {
            console.log(event);

            console.log(event.currentTarget);

            console.log(event.target);
            //event:触发这个事件的所有操作
        }
        
        let ul = document.querySelector('ul');
        ul.onclick = () => {
            console.log(event.currentTarget);
        }        
        const items = document.querySelectorAll('li');
        items.forEach(element => {
            element.onclick = () => {console.log(event.currentTarget,event.target);
            event.stopPropagation();//阻止冒泡
        }
             
        });
        document.querySelector('button');
    </script>

</body>
</html>

4.表单控件

目标1：
1.禁止按钮提交默认行为
2.禁止冒泡
3. 表单非空验证

<!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>表单控件</title>
</head>
<body>
    <!-- 2. 取消form表单元素的默认提交行为 -->
    <!-- <form action="login.php" method="post" id="login" οnsubmit="return false"> -->
        <form action="login.php" method="post" id="login">
            <label class="title">用户登录</label>
            <label for="email">邮箱:</label>
            <input type="email" id="ema" name="email" value="" autofocus />
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" />
            <!-- button: 如果写到form标签内, 默认是提交行为 -->
            <!-- 1. 修改button 类型 -->
            <!-- <button type="button" name="submit" οnclick="check(this)">登录</button> -->
            <button name="submit" onclick="check(this)">登录</button>
          </form>  
          <script>
            function check(els){
                event.preventDefault();
                event.stopPropagation();

                // console.log(els.form);
                // console.log(els.form.ema);
                // console.log(els.form.password); //根据id来的

                if(els.form.ema.value.length == 0)
                {
                    alert('输入不能为空');
                    els.form.ema.focus();
                    return false;
                }
                if(els.form.password.value.length == 0)
                {
                    alert('输入不能为空');
                    els.form.password.focus();
                    //聚集体会
                    return false;
                }

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