事件委托

原创 2018年04月16日 00:13:32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            margin: 50px auto;
        }
        .box ul{
            list-style: none;
        }
        .box ul li{
            height: 40px;
            line-height: 40px;
            border: 1px solid #b0b0b0;
            margin-top: 10px;
            padding-left: 10px;
        }
        .box ul li span{
            float: right;
            padding: 0 5px;
            font-size: 12px;
            color: #fff;
            height: 26px;
            line-height: 26px;
            margin-top: 7px;
            margin-right: 10px;
        }
        .box ul li span.update{
            background-color: peru;

        }
        .box ul li span.delete{
            background-color: lightcoral;
        }
        #addBtn{
            height: 30px;
            background-color: lightgreen;
            line-height: 30px;
            text-align: center;
            margin-top: 20px;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>苹果<span class="update">修改</span><span class="delete">删除</span></li>
        <li>橘子<span class="update">修改</span><span class="delete">删除</span></li>
        <li>香蕉<span class="update">修改</span><span class="delete">删除</span></li>
        <li>西瓜<span class="update">修改</span><span class="delete">删除</span></li>
        <li>葡萄<span class="update">修改</span><span class="delete">删除</span></li>
        <li>芒果<span class="update">修改</span><span class="delete">删除</span></li>
    </ul>
    <div id="addBtn">添加一项</div>
</div>
<script>
    var add = document.getElementById('addBtn');
    var ul = document.getElementsByTagName('ul')[0];


  //添加
    add.onclick = function () {
        var res= prompt('请输入要添加的内容?');
        if(res){
            var li = document.createElement('li');//创建元素节点
            li.innerHTML = res+'<span class="update">修改</span><span class="delete">删除</span>';
            ul.appendChild(li);//添加元素
        }
    };



     //事件冒泡:事件发生时,事件发生的元素的祖先元素也可以被触发该事件
    //事件委托:利用事件冒泡的机制,把事件绑定给祖先元素,事件发生时通过判断事件源的具体信息做相应的处理
    ul.onclick = function (event) {
        event = event || window.event; //处理ie低版本的兼容
        var tar = event.target || event.srcElement;//处理事件源的兼容性
        if(tar.innerHTML ==='删除'){
            if(confirm('确定要删除吗?')){
                tar.parentNode.parentNode.removeChild(tar.parentNode);//删除元素
            }
        }else if(tar.innerHTML ==='修改'){
            var res= prompt('请输入要修改的内容?');
            if(res){
                var li = document.createElement('li');
                li.innerHTML = res+'<span class="update">修改</span><span class="delete">删除</span>';
                tar.parentNode.parentNode.replaceChild(li,tar.parentNode);//替换,新的在前
            }
        }
    }
</script>
</body>
</html>

UGUI图形用户操作界面详解与实战

Unity引擎就为我们提供了一套使用起来十分方便简洁,功能又极其强大的系统,对于用户来说,通过图形操作界面与计算机进行沟通,而开发者,就创建这样的环境给用户进行体验。
  • 2018年01月23日 20:24

JavaScript面试问题:事件委托和this

JavaScript不仅门槛低,而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背景,所以不是每个人都对JavaScrip...
  • u011043843
  • u011043843
  • 2015-06-08 09:35:57
  • 1666

深入理解JS事件委托

概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各...
  • zls986992484
  • zls986992484
  • 2017-03-12 22:47:57
  • 541

高性能 javaScript 之事件委托(Vue版)

一、概念理解: 1、事件:HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。比如点击事件、鼠标移入/移出事件等。事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数...
  • zjsfdx
  • zjsfdx
  • 2017-10-14 16:34:43
  • 1359

浅谈事件委托和this的用法

浅谈事件委托和this用法详解事件委托 事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。比如用ul元素来处理其子元素li的事件。有多种方法来处理事件委托。标准方法来源于原生浏览器...
  • hengs_dream
  • hengs_dream
  • 2016-07-30 22:29:10
  • 1138

javascript事件委托理解,jQuery .on()方法一步到位实现事件委托

本篇文章借鉴自:博客园文章,只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托?他还有一个名字叫做事件代理,(时间代理 === 事件委托,现在才知道这两个是一个意思) 高程3上讲:事件委托即是利...
  • orange0111
  • orange0111
  • 2016-11-13 22:52:36
  • 1307

jQuery的事件绑定与事件委托

在用jQuery的事件绑定时,会用到on()、bind()、live()、 delegate()这几个方法,但对他们的区别缺从未注意过,现稍总结一下,如有错误,欢迎指正。       参考文档: h...
  • aiolos1111
  • aiolos1111
  • 2016-07-28 13:42:57
  • 7403

JavaScript 事件委托

转自:http://www.html-js.com/article/JavaScript-JavaScript-the-event-delegate-to-implement-event-can-be...
  • hi_kevin
  • hi_kevin
  • 2014-07-14 11:10:55
  • 3836

js 事件委托是什么

li{ border: 1px solid red; } aaaaaaaa bbbbbbbb cccccccc ...
  • u011301203
  • u011301203
  • 2016-12-10 12:20:30
  • 464

JS和JQuery中的事件委托 学习笔记

事件委托其实并不是一个很高级的技巧,比如在一个页面里面,当只存在两个按钮的时候,可能你给按钮添加监听是这样的:(本文不考虑浏览器兼容性,关于事件的兼容性可参考前面的学习笔记) 按钮1 ...
  • u011366705
  • u011366705
  • 2015-07-23 01:06:24
  • 2724
收藏助手
不良信息举报
您举报文章:事件委托
举报原因:
原因补充:

(最多只允许输入30个字)