jquery的事件委托与原生的事件委托有什么区别

Question

想通过适配器模式，用原生适配jquery里的on方法。发现无法实现
html代码：

<ul id="list">
    <li><span>1</span><i>&times;</i></li>
</ul>
<button id="btn">点我添加li</button>
<script type="text/javascript" src="js/our.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/adapter.js"></script>
<script type="text/javascript">
    var list = ada.$("list");
    ada.on(list, "click", function(e){
        if(e.target.tagName.toLowerCase() === "li"){
            ada.css(e.target,{
                backgroundColor: "red"
            })
        }else if(e.target.tagName.toLowerCase() === "i"){
            list.children(ada.parent(e.target)).remove();
        }
    });
    var btn = ada.$("btn");
    ada.on(btn, "click", function(){
        var li_html = "<li><span>1</span><i>&times;</i></li>";
        ada.html(list, ada.html(list) + li_html);
    })
</script>

our.js:

var ada = {
    $: function(id){
        return document.getElementById(id);
    },
    css: function(dom, key, value){
        if(typeof key === "object" && key != null){
            for(var i in key){
                ada.css(dom, i, key[i]); 
            }
        }else{
            dom.style[key] = value;        
        }
    },
    html: function(dom, text){
        if(arguments.length === 2){
            dom.innerHTML = text;
        }else{
            return dom.innerHTML;
        }
    },
    on: function(dom, type, handler){
        dom.addEventListener(type, handler);
    },
    parent: function(dom){
        return dom.parentNode;
    }
}

adapter.js

var ada = {
    $: function(id){
        return $("#" + id);
    },
    css: function(dom, key, value){
        $(dom).css(key, value);
    },
    html: function(dom, text){
        if(arguments.length === 2){
             $(dom).html(text);
        }else{
            return $(dom).html();
        }
    },
    on: function(dom, type, handler){
        $(dom).on(type, handler);
    },
    parent: function(dom){
        return $(dom).parent();
    }
}

现在我想实现的效果是：当点击x的时候会把当前的这个li删除。但现在是点击x时，会把所有的li都删掉。那有什么方法能避免这个问题吗。是什麽问题导致这个问题的发生呢

Answer 1

大兄弟。。
jq on我要是没记错的话是 on(type,dom,callback)

Answer 2

jQuery的事件委托相比于原生的只是做了兼容性处理，也就是使用了适配器模式。jQuery的事件处理就是这个特点。