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

搜索
博主信息
博文 34
粉絲 1
評論 1
訪問量 47277
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JS的事件代理機制的理解和留言板案例——2019年7月11日22時10分
嘿哈的博客
原創(chuàng)
911人瀏覽過

//        事件階段分為 捕獲階段、觸發(fā)階段、冒泡階段
//        捕獲階段由最頂層元素逐步進入最深層元素（依次一層一層進入）
//        觸發(fā)階段可理解為 點擊事件的觸發(fā)
//        冒泡階段 當(dāng)觸發(fā)后點擊事件會在元素上依次從內(nèi)到外執(zhí)行事件


實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .wrap{
            width: 400px;
            height:400px;
            background-color: #037b82;
            padding: 50px;
        }
        .wrap{
            width:300px;
            height: 300px;
        }
        .element{
            width: 300px;
            height:300px;
            padding: 50px;
            background-color: chocolate;
        }
        .element{
            width: 200px;
            height: 200px;
        }
        .child{
            width:200px;
            height:200px;
            background-color: #444444;
        }
    </style>
    <title>事件代理機制理解</title>
</head>
<body>
    <div class="wrap" id="wrap">

        <div class="element" id="element">

            <div class="child" id="child">

            </div>
        </div>
    </div>
    
    <script>
        //        事件階段分為 捕獲階段、觸發(fā)階段、冒泡階段
        //        捕獲階段由最頂層元素逐步進入最深層元素（依次一層一層進入）
        //        觸發(fā)階段可理解為 點擊事件的觸發(fā)
        //        冒泡階段 當(dāng)觸發(fā)后點擊事件會在元素上依次從內(nèi)到外執(zhí)行事件
        var wrapnode = document.getElementById('wrap');
        var elementnode = document.getElementById('element');
        var childnode = document.getElementById('child');

        wrapnode.addEventListener('click',function (event) {
            console.log('wrap捕獲')
        },true);
        wrapnode.addEventListener('click',function (event) {
            console.log('wrap冒泡')
        },false);
        elementnode.addEventListener('click',function (event) {
            console.log('element捕獲')
        },true);
        elementnode.addEventListener('click',function (event) {
            console.log('element冒泡')
        },false);
        childnode.addEventListener('click',function (event) {
            console.log('child捕獲')
        },true);
        childnode.addEventListener('click',function (event) {
            console.log('child冒泡')
        },false);




    </script>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

效果圖

QQ截圖20190714201410.png

事件代理

//          多個li事件js操作如下（事件代理）
//        事件代理 事件冒泡會依次由內(nèi)到外進行傳遞，當(dāng)有多個id為child的div塊要添加事件，
//        則id為child的事件會冒泡到父節(jié)點element上的div塊，則只需在id為element的div塊，
//        設(shè)置一個事件監(jiān)聽器，這就是事件代理或者叫事件委托

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 
    <title>事件代理機制理解</title>
</head>
<body>
    <div class="wrap" id="wrap">

        <div class="element" id="element">

            <div class="child" id="child">

            </div>
        </div>
    </div>
    <hr>
    <h3>單個li事件</h3>
    <!--單個li事件-->
    <ul id="li1">
        <li id="li2">item</li>
    </ul>
    <hr>
    <!--多個li事件-->
    <h3>多個li事件</h3>
    <ul id="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script>


//        單個li事件js操作如下
          var li1 = document.getElementById('li2');
          li1.addEventListener('click',function (ev) {
              alert('我被點擊了');
          },false);

//          多個li事件js操作如下（事件代理）
//        事件代理 事件冒泡會依次由內(nèi)到外進行傳遞，當(dāng)有多個id為child的div塊要添加事件，
//        則id為child的事件會冒泡到父節(jié)點element上的div塊，則只需在id為element的div塊，
//        設(shè)置一個事件監(jiān)聽器，這就是事件代理或者叫事件委托
            var lis = document.getElementsByTagName('li');

//        利用for循環(huán)語句給所有的li單獨設(shè)置點擊事件
//                for(var i = 0, n = lis.length ; i < n ; i+=1){
//                    list[i].addEventListener('click',function(ev){
//                    alert("我被點擊了");},false)
//                }

//        利用事件代理，用ul代理li的事件冒泡
            var list = document.getElementById('list');
            list.addEventListener('click',function (ev) {
                alert('我被點擊了');
                console.log(event.target);
            },false);


    </script>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

留言板實例（雙飛翼布局 ）


實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style>
    /*頭部樣式*/
        .header{
            background-color: lightseagreen;
        }
        .header .content{
            width:1000px;
            margin: 0 auto;
            height: 60px;
        }
        .header ul{
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 0;
        }
        .header ul li {
            list-style: none;
        }
        .header ul li a {
            float: left;
            /*文本居中*/
            text-align: center;
            line-height: 60px;

            min-height: 60px;
            min-width: 80px;

            padding: 0 15px;
            /*去除下劃線*/
            text-decoration: none;

            /*文本顏色*/
            color: white;
        }
        .header .content ul li a:hover{
            background-color: cadetblue;
            font-size: 1.1rem   ;
        }
    /*中間樣式*/
    .container{
        /*background-color:lightseagreen;*/
        width: 1000px;
        min-height: 400px;
        margin: 5px auto;
        overflow: hidden;
    }
    .container .wrap {
        width:inherit;
        min-height: 400px;
        /*border: 1px solid;*/
        /*background-color: #037b82;*/
    }
    .container .left {
        width:280px;
        min-height: 400px;
        /*border: 1px solid;*/
        /*background-color: #444444;*/
    }
    .container .wrap,.container .left {
        float: left;
    }
    .container .left{
        margin-left:-100%;
    }
    .container .wrap .main{
        padding-left: 280px;

    }
    .container .wrap .main .con{
        padding-left: 15px;
        min-height: 380px;
        text-align: center;
    }
    .container .wrap .main .con #liuyan {
        width:500px;
        height: 50px;
        display: inline-block;
    }
    .container .wrap .main .con ul {

        margin-top: 5px;
        padding-left: 2px;
         width:650px;
        min-height: 220px;
         border: 1px solid;
         display: inline-block;
     }
    .container .wrap .main .con ul li{
        width:650px;
        min-height:44px;
        border-bottom: 1px dashed;
        display: inline-block;
        line-height: 44px;
        list-style: none;
        text-align: left;
        overflow: hidden;


    }
    .container .wrap .main .con ul li button{
        float: right;
        line-height: 44px;
        background-color: lightseagreen;
        width: 50px;
        border: 0;
    }
    .container .wrap .main .con h3{
        text-align: center;
        color: black;
        border-bottom: 1px solid;
    }
    .container .left h3{
        text-align: center;
        color: black;
        border-bottom: 1px solid;
    }
    .container .left ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .container .left ul li a {
        display: inline-block;

        width: 100%;
        height: 50px;

        text-align: center;
        line-height: 50px;

        background-color: black;
        color: white;
        text-decoration: none;
    }
    .container .left ul li a:hover{
        background-color: red;
    }
    .active {
        background-color: red;
    }
    .container .left ul li a.active1 {
        background-color: red;
    }
    /*尾部樣式*/
    .footer{
        background-color: lightseagreen;
    }
    .footer .content{
        width:1000px;
        height: 60px;
        margin: 0 auto;
    }
    .footer .content p {
        text-align: center;
        line-height: 60px;
    }
    .footer .content p a {
        text-decoration: none;
        color:firebrick;
    }
    .footer .content p a:hover {
        color: white;
    }
     </style>
</head>
<body>
    <div class="header">
        <div class="content">
        <ul>
            <li><a href="">首頁</a></li>
            <li><a href="" class="active">留言板</a></li>
            <li><a href="">聯(lián)系方式</a></li>
            <li><a href="">公司新聞</a></li>
            <li><a href="">案例展示</a></li>
        </ul>
        </div>
    </div>
    <div class="container">
        <div class="wrap">
            <div class="main">
                <div class="con">
                <h3>留言板</h3>
                    <div class="conmain">
                        <input type="text" id="liuyan" name="liuyan" autofocus placeholder=" 輸入30個字內(nèi)" maxlength="30">
                        <ul id="list">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="left">
            <h3>欄目</h3>
            <ul>
                <li><a href="" class="active1">留言板</a></li>
                <li><a href="">聯(lián)系方式</a></li>
                <li><a href="">公司新聞</a></li>
                <li><a href="">案例展示</a></li>
            </ul>
        </div>
    </div>
    <script>
//        留言功能
        var liuyan = document.getElementById('liuyan');
        var list = document.getElementById('list');
        var myDate = new Date();

        liuyan.addEventListener('keypress',addliuyan,false);

        function addliuyan(ev) {
            if (event.key === 'Enter') {
                var item = document.createElement('li');
                item.innerHTML = liuyan.value + '  <button>刪除</button>';
//                item.innerHTML = liuyan.value + '  時間：'+new Date()  + '  <button>刪除</button>' ;

                if (list.childElementCount === 0) {
                    list.appendChild(item);
                } else {
                    list.insertBefore(item, list.firstElementChild);
                }

                liuyan.value = null;
            }
        }
//        事件代理 刪除按鈕功能
        list.addEventListener('click',del,false);
        function del(ev) {
            if(confirm('是否刪除')){
//                var ul = event.currentTarget;
//                var btn = event.target;
//                var li = btn.parentElement;
//                ul.removeChild(li);

                //        簡寫
                event.currentTarget.removeChild(event.target.parentElement);
            }
            return false;
        }

    </script>
    <div class="footer">
        <div class="content">
            <p>
                <a href="">友情鏈接</a> | 
                <a href="">地理地圖</a> | 
                <a href="">備案號：*****</a>
            </p>
        </div>
    </div>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例



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

老師批語：事件代理的前提是冒泡, 這個一定要記住
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)