当前位置：网站首页>JS事件的相关特性以及原理

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

2022-07-30 12:00:00 【今天不学习，明天变腊鸡】

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>