博客列表 >冒泡事件和委派,写留言本-2019年7月12日

冒泡事件和委派,写留言本-2019年7月12日

神仙不在的博客
神仙不在的博客原创
2019年07月18日 14:06:50624浏览

所谓的冒泡就是事件向上传递,后代元素的事件被触发,祖先的相同事件也被触发。

委派:将事件统一绑定给元素的共同祖先,这样当后代元素的事件被触发时,会冒泡到祖先元素,从而通过祖先元素的响应来处理事件。

实例

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>委派</title>

</head>
<body >

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<script>
  
    var ul = document.getElementsByTagName('ul').item(0);
    ul.addEventListener('click',function (ev) {alert(this.nodeName);  },false);

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

运行实例 »

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


这个留言本写下来真的费力,视频看了好几遍。

实例

<!DOCTYPE html>
<html lang="cn_zh">
<head>
    <meta charset="UTF-8">
    <title>留言本</title>
</head>
<body>
<label for="comment">留言本</label>
<input type="text" name="comment" id="comment" autofocus>
<ul id="list"></ul>
<script>
    var comment = document.getElementById('comment');
    var ul = document.getElementById('list');
    comment.addEventListener('keypress',getvalue,false);
    function getvalue(event) {
        if (event.key==='Enter') {
        var li = document.createElement('li');
            li.innerHTML = comment.value +  '  <button>删去</button>';
        if (ul.childElementCount === 0) {ul.appendChild(li);
            comment.value = null;}else{
            ul.insertBefore(li,ul.firstElementChild);
            comment.value = null;
        }

        }
    }
    ul.addEventListener("click", del,false);
    function del(event) {
        if ( confirm("你确定删去?")) {
            event.currentTarget.removeChild(event.target.parentElement);
        }

    }



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

运行实例 »

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

currentTarget 指代 事件的监听者

Target指代事件的触发者

event.currentTarget.removeChild(event.target.parentElement)  这一句好长,但是也好理解。

这个留言本只是基础功能,还需要多练习,理解js编程的思想和方法。

js小结下

找对象,搞对象。

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