JavaScript事件代理的触发源如何判定？

现在有一个ul里面原本是空的，然后通过ajax请求数据生成许多个li。而每个li都有相关的操作。
这种类型的场景就很适合用事件代理了。
HTML结构如下：

<ul id="ul">
    <li>
        <div>
            <button class="delete"><i classs="fa fa-cross"></i> 删除</button>
            <button class="save"><i classs="fa fa-plus"></i> 添加</button>
        </div>
    </li>
    <li>
        <div>
            <button class="delete"><i classs="fa fa-cross"></i> 删除</button>
            <button class="save"><i classs="fa fa-plus"></i> 添加</button>
        </div>
    </li>
</ul>

现在每个li有几个button。那么我需要在ul上面绑定两个监听器对应两个button的点击事件。

    var ul = document.getElementById("ul");
    function  delete_li( event ){
        //具体实现
    }
    function append_li( event ){
        //具体实现
    }
    ul.addEventListener("click" , delete_li);
    ul.addEventListener("click" , append_li);

问题来了，不同的button需要触发不同的函数。如果是单纯的button那就很好办判定一下event .target的class就好。
现在为了美观 里面是一个icon button。event .target就可以使是button标签也可能是i标签。
我知道通过if的或条件可以枚举这两种情况。但是看起来太不优雅了。也许button标签里面的结构还可能会更复杂。总不可能再来枚举吧。

有没有更好的解决方案？

我说的更好方案是即便html结构从

删除

变成下面这样，甚至更复杂。我希望我尽量不用改js代码

<button class="delete">
    <i classs="fa fa-cross"></i>
    <div><span>删除</span></div>
</button>