0107-事件代理，留言板实战 - html

首页 > 博客列表 > 0107-事件代理，留言板实战

博主信息

博文 37

粉丝 2

访问量 34589

专题推荐

更多>

js事件传递

捕获: 从最外层元素逐级向内直到事件的绑定者
目标: 到达事件目标
冒泡: 从目标再由内向外逐级向上直到最外层元素

注：addEventListener有三个参数，第三个参数默认是false，就是冒泡，如果是true就是捕获，一般不会写第三个参数，默认就是冒泡

    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script>
        const list = document.querySelectorAll('li');
        //   console.log(list);
        list.forEach(li=>(li.onclick = (ev)=>{
            //  console.log(ev)查看事件对象: 保存着当前事件的所有信息;
            console.log(ev);
            // console.log(ev.type)查看事件类型;
            console.log(ev.type);
            //console.log(ev.currentTarget); 查看事件绑定者
            console.log(ev.currentTarget);
            // console.log(ev.path)查看事件传递的路径
            console.log(ev.path);
        }));
    </script>

图例：

js事件传递

利用事件冒泡制作无限级下来菜单

事件代理也叫事件委托。
事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有： 1.减少DOM操作，提高性能。 2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。

    <ul id="ul">
        <li>菜单1
            <ul>
                <li>二级菜单
                    <ul>
                        <li>三级菜单
                            <ul>
                                <li>四级菜单</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <style>
        ul>li>ul{
            margin-left: 2em;
            display: none;
        }
        ul>li>ul.activa{
            display:block;
        }            
    </style>
    <p>注：addEventListener有三个参数，第三个参数默认是false，就是冒泡，
            如果是true就是捕获，一般不会写第三个参数，默认就是冒泡</p>
            <p>事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：
                1.减少DOM操作，提高性能。
                2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。</p>
    <script>
            let ul =  document.querySelector('#ul');
            ul.addEventListener("click", ev => {
                // // 事件绑定者
                // console.log(ev.currentTarget);
                // 事件触发者,通常是"事件绑定者"的子元素
                // console.log(ev.target);
                // ev.target.children拿到当前事件触发者的子元素集合
                let children = ev.target.children;
                if(children[0]){
                    children[0].classList.toggle('activa');
                }
            });
    </script>

注：addEventListener有三个参数，第三个参数默认是false，就是冒泡，如果是true就是捕获，一般不会写第三个参数，默认就是冒泡

留言板实战

js-留言板
实例

添加留言图例

删除留言图例

代码部分

    <!DOCTYPE html>
    <h1>js-留言板</h1>
    <label><input type="text" name="" value=""></label>
    <ol></ol>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        input{padding: 0.2em;margin:1em 0;}
        button{
            font-size: 10px;
            background-color: #dc143c;
            margin-left: 2em;
            border-radius: 15px;
            padding: 0 5px;
            border: 0;
        }
    </style>
    <script>
        const input = document.querySelector('input');
        const ol = document.querySelector('ol');
        //为input创建键盘事件
        input.onkeydown = (ev)=>{
            // console.log(ev.key);
            // 当按下回车键Enter时执行
            if(ev.key==='Enter'){
                // console.log(ev.currentTarget.value);
                // 验证输入框是否为空
                if(ev.currentTarget.value.length==0){
                    ev.currentTarget.value = '不能为空';
                    input.style.color= 'crimson';
                }else{
                    // 编写html元素
                    let html = `<li>${ev.currentTarget.value}<button>x</button></li>`;
                    // 添加html元素
                    ol.insertAdjacentHTML("afterbegin",html);
                    // 清空输入框
                    ev.currentTarget.value = '';
                }
            }
        }
        // 添加删除事件
        ol.addEventListener('click',function(ev){
            //parentNode获取当前元素的父节点
            // remove 删除元素
            ev.target.parentNode.remove();
        })               
    </script>

字符串方法

js字符串常用方法
1.concat()拼装

    <script>
        let str = 'hollo'.concat("你好","js");
        console.log(str);
        // 返回值hollo你好js
    </script>

2.slice(start, end)取指定字符串中某一个或者一段字符

start:必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

    <script>
        str = "hello js";
        console.log(str.slice(0,-2));
        // 返回值hello
        console.log(str.slice(0,5));
        // 返回值hello
    </script>

substr(start, length)方法可在字符串中抽取从 start 下标开始的指定数目的字符。

start:必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

length:可选。从start字符数开始去几个字符的长度。必须是数值。如果省略了该参数，那么返回从start的开始位置到结尾的字串。不可是负数

    <script>
        str = "hello js";
        console.log(str.substr(0,5));
        // 返回值hollo
        console.log(str.substr(5));
        // 返回值js
    </script>

trim():删除字符串二端空格

    <script>
        str = "  hello js  ";
        console.log(str);
        console.log(str.trim());
    </script>

图例

trim():删除字符串二端空格

split();将字符串打成数组

第一个参数:必需。字符串，从该参数指定的地方分割

第二个参数:可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

    <script>
        str = "admin@php.cn";
        console.log(str.split("@"));
        str = 'a b c d';
        console.log(str.split(' ',3));
    </script>

图例：

split();将字符串打成数组
6.replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

第一个参数需要替换的字符串

第二个参数：必须用于替换后的字符窜

    <script>
        str = '你好 js';
        console.log(str);
        console.log(str.replace('js','php'));
    </script>

图例：

6.replace() 用于在字符串中用一些字符替换另一些字符
7.indexOf() 返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1

如果没有找到匹配的字符串则返回 -1。

注意： indexOf() 方法区分大小写。

第一个参数：必需。规定需检索的字符串值。

第二个参数：可选。的整数参数。规定在字符串中开始检索的位置。如省略该参数，则将从字符串的首字符开始检索。

    <script>
        str = "admin@php.cn";
        console.log(str.indexOf('p'));
        // 返回值6
        console.log(str.indexOf('p',7));
        // 返回值8
    </script>

8.charAt()返回指定位置的字符。

    <script>
        str = "admin@php.cn";
        console.log(str.charAt(5));
        // 返回值 @
    </script>

9.toLowerCase()将整个字符串转成小写字母。
toUpperCase()将整个字符串转成大写字母。

    <script>
        str = "admin@php.cn";
        console.log(str.toUpperCase());
        // 返回ADMIN@PHP.CN
        str ='ADMIN@PHP.CN';
        console.log(str.toLowerCase());
        // 返回admin@php.cn
    </script>

10.match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf()，但是它返回指定的值，而不是字符串的位置。

    <script>
        str = "admin@php.cn";
        console.log('php');
        // 返回php
    </script>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

js的数组详解及6个常用函数

2019-12-19 22:16:07

js事件传递

利用事件冒泡 制作 无限级下来菜单

留言板实战

字符串方法

利用事件冒泡制作无限级下来菜单