事件传递机制与事件冒泡/事件代理及字符串常用的api

事件传递机制与事件冒泡/事件代理

事件三要素
1.事件名称：字符串’click’、’keydown’、’scroll’
2.事件主体：元素<button>、<div>、<p>、
3.事件方法：函数function(ev){…}

事件传递机制与事件冒泡

 <ul>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
     <li>item4</li>
     <li>item5</li>
 </ul>
 <script>
     const items=document.querySelectorAll('li');
     items.forEach(function(item){
         item.onclick=function(){
             console.log(event.currentTarget);
             // 阻止冒泡
             event.stopPropagation();
         };
     });
     // 事件冒泡：当前元素的事件会向上（父级）传递，父级有同名事件会自动触发
     // 关键词：父级、同名
     // li的父级ul
     document.querySelector('ul').onclick=()=>console.log('li的父级ul',event.currentTarget);
     // ul的父级body
     document.body.onclick=()=>console.log('ul的父级body',event.currentTarget);
     // body的父级html
     document.documentElement.onclick=()=>console.log('body的父级html',event.currentTarget);
     // html的父级document
     document.onclick=()=>console.log('html的父级document',event.currentTarget);
     // document的父级window
     window.onclick=()=>console.log('document的父级window',event.currentTarget);
 </script>

事件代理

 <body>
    <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>
        // 事件代理：将子元素的事件，委托在父元素上出发，以简化代码
        // 1.先获取所有li的父级ul
        const ul=document.querySelector('ul');
        // 2.给ul添加事件
        ul.onclick=function(){
            // 事件目标：li,子元素
            // 为了知道当前事件的触发者，可以为它添加自定义属性data-...
            console.log(event.target,event.target.dataset.index);
            // 事件目标：ul，父元素
            console.log(event.currentTarget);
        }
    </script>

字符串常用的api

 <script>
     let str='Php中文网';
     // 1.str.charAt()
     console.log(str.charAt(3));
     // 2.str.indexOf()
     console.log(str.indexOf('文'));
     // 3.str.search()
     console.log(str.search('文'));
     // 4.str.concat()
     console.log(str.concat('(','php.cn',')'));
     // 5.str.replace()
     console.log(str.replace('中文网','.cn'));
     // 6.str.slice()
     console.log(str.slice(0,3));
     // 7.str.substr()
     console.log(str.substr(0,3));
     // 8.str.split()把字符串以分割符为界点分割成数组
     console.log(str.split('h',[2]));
     // 9.str.trim()去掉字符串前后空格
     console.log(str.trim('网'));
     // 10.str.charCodeAt()指定位置的字符转ASCII码
     console.log(str.charCodeAt(1));
     // 11.str.toUpperCase()转成大写
     console.log(str.toUpperCase('php中文网'));
     // 12.str.toLowerCase()转为小写
     console.log(str.toLowerCase('php中文网'));
 </script>

事件传递机制与事件冒泡/事件代理

事件传递机制与事件冒泡

事件代理

字符串常用的api

相关文章