简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 7月11日作业：1. 实例演示你对事件代理机制的理解? 提示, 从事件冒泡与DOM结构二方面进行分析 2. 模仿留言板案例, 利用学过的CSS知识, 写一个美观的留言板页面, 并使用JavaScript完成基本的留言添加与删除功能... 发挥你的想象力, 做一个看上去较为专业的界面....
Blogger Information
Blog 7
fans 0
comment 0
visits 4548
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
7月11日作业：1. 实例演示你对事件代理机制的理解? 提示, 从事件冒泡与DOM结构二方面进行分析 2. 模仿留言板案例, 利用学过的CSS知识, 写一个美观的留言板页面, 并使用JavaScript完成基本的留言添加与删除功能... 发挥你的想象力, 做一个看上去较为专业的界面....
陈康民的博客
Original
499 people have browsed it

问题1. 实例演示你对事件代理机制的理解?

实例

<p>解答：</p>
1.1事件冒泡：当点击li时依次弹出，li，ul，body，提示框，反应的冒泡事件的生效顺序，由子级到父级
<div>
<ul>
    <li>
        点击我弹出提示框
    </li>
    <li>
        点击我弹出提示框2
    </li>
</ul>
</div>

<!--使用事件代理前 需要添加5个P标签的事件-->

1.2、使用事件代理的好处，可以简化代码
<div>
    使用事件代理前 需要添加5个P标签的事件
    <p>1点我出现hello word-1</p>
    <p>2点我出现hello word-2</p>
    <P>3点我出现hello word-3</P>
    <P>4点我出现hello word-4</P>
    <P>5点我出现hello word-5</P>
</div>

<!--原本添加在p标签中的事件需要添加5次，通过事件代理添加在父div里-->
使用事件代理后 只需要在父级div添加1个js事件
<div id="pfather">
    <p>点我出现good job</p>
    <p>点我出现good job</p>
    <P>点我出现good job</P>
    <P>点我出现good job</P>
    <P>点我出现good job</P>
</div>


<!--点击li弹出提示框，提示语li-->
<script>
    var lis = document.getElementsByTagName('li');
    for(var i = 0; i < lis.length;i++){
        lis[i].addEventListener ('click',function(ev) {
            alert(this.nodeName);
    },false);
}
</script>

<!--点击ul弹出提示框，提示语ul-->
<script>
    var uls = document.getElementsByTagName('ul').item(0);
    uls.addEventListener('click',function(ev){
        alert(this.nodeName);
    });
</script>

<!--点击div弹出提示框，提示语div-->
<script>
    var div = document.getElementsByTagName('div').item(0);
    div.addEventListener('click',function(ev){
        alert(this.nodeName);
    });
</script>


<!--未使用事件代理前每个p标签都要添加js-->
<script>
    var p = {};
    p.p1 = document.getElementsByTagName('p').item(1);
    console.log(p.p1);
    p.p1.addEventListener('click',function(ev){
        alert('hello word-1');
    });

    p.p2 = document.getElementsByTagName('p').item(2);
    console.log(p.p2);
    p.p2.addEventListener('click',function(ev){
        alert('hello word-2');
    });

    p.p3 = document.getElementsByTagName('p').item(3);
    console.log(p.p3);
    p.p3.addEventListener('click',function(ev){
        alert('hello word-3');
    });

    p.p4 = document.getElementsByTagName('p').item(4);
    console.log(p.p4);
    p.p4.addEventListener('click',function(ev){
        alert('hello word-4');
    });

    p.p5 = document.getElementsByTagName('p').item(5);
    console.log(p.p5);
    p.p5.addEventListener('click',function(ev){
        alert('hello word-5');
    });
</script>

<!--在父级div使用事件代理-->
<script>
    var pfather = document.getElementById('pfather');
    pfather.addEventListener('click',function(ev){
        alert('good job');
    });
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

2留言板：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>DOM操作: 添加留言</title>

    <style>
        .container{
            margin: 0 auto;
            width: 100%;
            max-width: 720px;
            background-color: #1E5B94;
        }

        .label1{
            color: #ffffff;
            margin: auto;
            width: 16rem;
            min-height: 2rem;
            line-height: 1.85rem;
        }

        #list{
            padding-left: 0;
        }

        #list li{
            list-style-type:none;
            margin-left: 0;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: #ffffff;
        }

        #list li button{
            float: right;
        }


    </style>
</head>
<body>
<div class="container">
<div class="label1">
    <label for="comment">请留言：</label>

<input type="text" id="comment" autofocus>
    <ul id="list"></ul>
</div>

</div>

<script>
    var ly={};
    lycomment = document.getElementById('comment');
    //留言列表
    ly.list = document.getElementById('list');
    //为留言框添加事件监听,当监听到keypress，执行addComment
    lycomment.addEventListener('keypress', addComment, false);

    function addComment(event){
        if (event.key === 'Enter'){
            //1、创建一个li元素
            ly.item = document.createElement('li');
            //2、添加内容
            ly.item.innerHTML = comment.value + '  <button>删除</button>';
            //3、将留言添加到页面中
            if (ly.list.childElementCount === 0){
                ly.list.appendChild(ly.item);
            } else {
                ly.list.insertBefore(ly.item, ly.list.firstElementChild);
            }
            //4、清空留言框
            comment.value = null;

        }
    }

    //事件代理
    ly.list.addEventListener('click', del, false);

    //删除留言的事件方法click
    function del(event){
        if(event.target.nodeName === 'BUTTON'){
            if(confirm('是否删除？')){
                event.currentTarget.removeChild(event.target.parentElement);
            }
        }
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：qualified

Teacher's comments：现在都学到实战开发, 你还在前端停留, 要赶紧了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！