博客列表 >留言板的制作

留言板的制作

简简单单的博客
简简单单的博客原创
2019年07月18日 10:11:22634浏览

制作留言版之前需要了解的一些东西,比如事件的属性

事件的属性包括:事件捕获、时间冒泡阶段

举例一个事件点击效果:

实例

<button id="btn" class="red" onclick="alert(this.nodeName)">点击我试试看</button>

运行实例 »

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

留言板

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
</head>
<body>
<label for="comment">请留言</label>
<input type="text" id="comment" autofocus>
<ul id="list">
</ul>
<script>
    var comment = document.getElementById('comment');
    var list = document.getElementById('list');
    comment.addEventListener('keypress',addComment,false);
    function addComment(event) {
        if(event.key === 'Enter'){
            var item = document.createElement('li');
            item.innerText = comment.value;
             if (list.childElementCount === 0) {
                    list.appendChild(item);
                } else {
                    list.insertBefore(item, list.firstElementChild);
                }
                comment.value = null;
        }
    }
</script>
</body>
</html>

运行实例 »

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



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议