日韩毛片,粗大黑人巨精大战欧美成人

首頁 > 博客列表 > 事件傳遞機制與事件冒泡/事件代理及字符串常用的api

博主信息

博文 34

粉絲 0

評論 0

訪問量 28613

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

事件傳遞機制與事件冒泡/事件代理

事件三要素
1.事件名稱：字符串’click’、’keydown’、’scroll’
2.事件主體：元素<button>、<div>、<p>、
3.事件方法：函數(shù)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();
         };
     });
     // 事件冒泡：當前元素的事件會向上（父級）傳遞，父級有同名事件會自動觸發(fā)
     // 關(guān)鍵詞：父級、同名
     // 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>
        // 事件代理：將子元素的事件，委托在父元素上出發(fā)，以簡化代碼
        // 1.先獲取所有l(wèi)i的父級ul
        const ul=document.querySelector('ul');
        // 2.給ul添加事件
        ul.onclick=function(){
            // 事件目標：li,子元素
            // 為了知道當前事件的觸發(fā)者，可以為它添加自定義屬性data-...
            console.log(event.target,event.target.dataset.index);
            // 事件目標：ul，父元素
            console.log(event.currentTarget);
        }
    </script>

字符串常用的api

 <script>
     let str='Php中文網(wǎng)';
     // 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('中文網(wǎng)','.cn'));
     // 6.str.slice()
     console.log(str.slice(0,3));
     // 7.str.substr()
     console.log(str.substr(0,3));
     // 8.str.split()把字符串以分割符為界點分割成數(shù)組
     console.log(str.split('h',[2]));
     // 9.str.trim()去掉字符串前后空格
     console.log(str.trim('網(wǎng)'));
     // 10.str.charCodeAt()指定位置的字符轉(zhuǎn)ASCII碼
     console.log(str.charCodeAt(1));
     // 11.str.toUpperCase()轉(zhuǎn)成大寫
     console.log(str.toUpperCase('php中文網(wǎng)'));
     // 12.str.toLowerCase()轉(zhuǎn)為小寫
     console.log(str.toLowerCase('php中文網(wǎng)'));
 </script>

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

markdown語法學(xué)習(xí)及代碼展示

2022-07-02 17:47:31

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

事件傳遞機制與事件冒泡/事件代理

事件傳遞機制與事件冒泡

事件代理

字符串常用的api