第15章 0406-细说事件-PHP课程网总结-前端部分-郭俊杰的知识库

第15章 0406-细说事件

Data: 2017-11-12 17:52:27Form: JournalClick: 7

问题集合：

1. check(ele) ele这个参数随便填嘛？

答：

这是自定义形参,用来接收外部参数，可以自定义名称

2. ele.form.password 里面的password是id还是class？

答：id或 name 均可，通常是name

3. 我想换成火狐浏览器怎么换？

答：

4. 添加了阻止冒泡，与不阻止有什么区别？

答：子元素绑定点击事件，同时阻止冒泡，在发生点击事件后，父元素如果添加了点击事件的是没有反应的

5. 是不是表单项目用document.forms.login.email.onfocus后面必须用function(){}这种方式,用函数名不行是吧,想要用函数名的话是不是在input里面添加属性来用？

答：可以用函数，非必须匿名函数，一种是直接在input属性中直接调用函数，一种是在js块中类似onclick=。。。，第二种可匿名也可以调用声明好的函数，还是看你的使用方式

demo1：js操作css

<style>
        /* 内部样式,仅适合当前文档 */
        /* 外部样式,适用于所有引用它的文档 */
                .box {
            width: 200px;
            height: 150px;
        }
    </style>
<!-- style属性: 行内样式 -->
    <div class="box" style="color: red; background-color: yellow">php.cn</div>
    <script>
        const box = document.querySelector('.box');
        // box.style.border = '1px solid blue';
        //行内样式
        console.log(box.style.color);
        console.log(box.style.backgroundColor);
        console.log(box.style.width);
        console.log(box.style.height);

        // 内部样式,外部样式: 计算样式, 通过 全局方法 getComputedStyle
        console.log(window.getComputedStyle(box).width);
        console.log(window.getComputedStyle(box).height);
        // 返回是字符串,string
        console.log(parseInt(window.getComputedStyle(box).width));

        let width = parseInt(window.getComputedStyle(box).width) + 100;
        console.log(width);
        box.style.width = width + 'px';
    </script>

demo2：class: 用js控制

<style>
        .title {
            border: 1px solid #000;
        }
                .active {
            color: red;
        }
                .bgc {
            background-color: yellow;
        }
                .em {
            color: blueviolet;
        }
                .bgc2 {
            background-color: lightgreen;
        }
    </style>
<h2 class="title" id="one">php中文网</h2>
    <script>
        const h2 = document.querySelector('.title');

        // 传统
        console.log(h2.id);
        console.log(h2.className);
        // h2.className = 'title active';
        // h2.className = 'title active bgc';
        // h2.className = 'title active';

        // classList
        // add(): 添加
        h2.classList.add('active');
        h2.classList.add('bgc');

        // contains(): 判断
        console.log(h2.classList.contains('active'));
        console.log(h2.classList.contains('hello'));

        // remove()移除
        h2.classList.remove('bgc');

        // replace(): 替换
        h2.classList.replace('active', 'em');

        // toggle(): 动态切换class
        // 如果之前没这个样式,就加上,如果有,就去掉
        // h2.classList.add('bgc2');
        h2.classList.toggle('bgc2');
    </script>

demo3：事件的添加与删除

<button class="btn1">click1</button>
    <button class="btn2">click2</button>
    <button class="btn3">click3</button>

    <script>
        // 事件属性动态添加
        const btn1 = document.querySelector('.btn1');
        // event: 事件对象
        btn1.onclick = () => console.log(event.type);
        // btn1.onclick = () => console.log('1211111');
        // btn1.onclick = () => console.log('abc');
        // 删除
        // btn1.onclick = null;

        // 事件监听器
        const btn2 = document.querySelector('.btn2');

        const show1 = () => console.log(1111);
        const show2 = $ => console.log(2222);
        const show3 = _ => console.log(3333);

        btn2.addEventListener('click', show1);
        btn2.addEventListener('click', show2);
        btn2.addEventListener('click', show3);
        btn2.removeEventListener('click', show3);

        // 事件派发
        const btn3 = document.querySelector('.btn3');
        let i = 0;
        const getMoney = () => {
            console.log('已收入 :' + i + ' 元');
            i += 0.5;
        };
        btn3.addEventListener('click', getMoney);

        // 创建一个机器人小助手,帮你不分昼夜的帮你点击,你就直接躺平了

        // btn3.dispatchEvent(自定义事件);

        // 创建一个自定义事件
        const myclick = new Event('click');

        // 第一次自动点击
        // btn3.dispatchEvent(myclick);
        // 第2次自动点击
        // btn3.dispatchEvent(myclick);
        // 第3次自动点击
        // btn3.dispatchEvent(myclick);
        // 第4次自动点击
        // btn3.dispatchEvent(myclick);

        // 延时触发,一次性
        setTimeout(() => console.log('hello'), 2000);

        // 间隙性,不断
        setInterval(() => btn3.dispatchEvent(myclick), 2000);
    </script>

demo4：事件冒泡,事件委托

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡

<button onclick="show()">click</button>
    <script>
        function show() {
            // console.log(event.type);
            // 1. 事件绑定者(事件主体):currentTarget
            console.log(event.currentTarget);
            /// 2. 事件触发者(目标)
            console.log(event.target);
            // console.log(event.target === event.currentTarget);
        }
    </script>

    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>

    <script>
        // const lis = document.querySelectorAll('li');
        // for (let i = 0; i < lis.length; i++) {
        // 默认是冒泡阶段来触发
        // lis[i].onclick = () => console.log(event.currentTarget);
        // lis[i].onclick = () => {
        // 阻止冒泡
        //         event.stopPropagation();
        //         console.log(event.currentTarget);
        //     };
        // }
        // 当我点击内部元素时,它的祖先元素上的"同名事件"会被自动触发
        // ul.click
        // document.querySelector('ul').onclick = () => console.log(event.currentTarget);
        // body.click
        document.body.onclick = () => console.log(event.currentTarget);
        // html
        document.documentElement.onclick = () => console.log(event.currentTarget);

        // 复用冒泡机制,简化这种多级元素中的事件行为
        // 将原来需要添加到多个子元素上的事件,全部统一添加到父元素上即可

        document.querySelector('ul').onclick = () => {
            // 阻止冒泡
            event.stopPropagation();
            // 重点是识别出事件的绑定者是哪个,事件触发者是哪个?
            // 1. 事件绑定者, ul , currentTarget: 父元素
            console.log(event.currentTarget);

            // 2. 事件触发者(目标), target: 子元素
            console.log(event.target);
        };
    </script>

demo5：表单事件

<!-- 2.  onsubmit="return false;" -->
    <form action="" method="post" id="login">
        <label class="title">用户登录</label>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" value="" autofocus />
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" />
        <!-- 1. type="button" 来表示这是一个普通按钮,没有提交行为 -->
        <button name="submit" onclick="check(this)">登录</button>
    </form>

    <script>
        function check(ele) {
            // 第3种方式,禁用默认行为
            event.preventDefault();
            // 防止冒泡
            event.stopPropagation();
            // 非空验证
            // 每一个表单控件input,都有一个form属性,指向所属的表单元素
            console.log(ele.form);
            // 通过form属性可以获取到表单中所有元素的值
            // console.log(ele.form.email);
            let email = ele.form.email;
            let password = ele.form.password;
            if (email.value.length === 0) {
                alert('邮箱不能为空');
                email.focus();
                return false;
            } else if (password.value.length === 0) {
                alert('密码也不能为空');
                email.focus();
                return false;
            } else {
                alert('验证通过');
            }
        }

        document.forms.login.email.onblur = function() {
            if (this.value.length === 0) {
                alert('不能为空');
                return false;
            }
        };

        // 1. submit: 提交时触发
        // 2. focus: 获取焦点时触发
        // 3. blur: 失去焦点时触发
        // 4. change: 值发生改变且失去焦点时触发
        // 5. input: 值发生改变就会触发,不必等失去焦点,与change不同

        // 作业: 将该表单验证方式,改为失去焦点就进行非空验证, 而不必等到点击提交按钮时
    </script>