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

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. 表单非空验证

```html
<!DOCTYPE html>

<body>


<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 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>
总结：
1.禁止按钮提交默认行为:event.preventDefault();
2.禁止冒泡:event.stopPropagation();
3.获取表单元素的两种方式：
3.1直接获取
3.2【input】.form.

1.class对象

2.事件的添加与删除

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

4.表单控件

相关文章