jquery委托（冒泡原理）

 

#categoryWeight是ul元素，点击ul，ul下li才生成

$("#categoryWeight").on("click", "li[wtid]",function () {
                $("#nLowestStockUnit").html(this.innerText);
            })

 

委托事件：事件就是onclick，onmouseover等；委托就是自己事情，让别人来做，就是这个事件本来是加在某个元素上的，然而加到别的元素上，完成这个事件。

原理：利用冒泡的原理，把事件加在父级上，触发执行结果

事件源：跟this作用一样

使用场景：1、为dom中的很多元素绑定相同事件；2、为dom中尚不存在的元素绑定事件；

 

$(function(){ 
    $('#ul1,#ul2').delegate('li','click',function(){ 
        if(!$(this).attr('s')) { 
        $(this).css('background','red'); 
        $(this).attr('s',true); 
        }else { 
            $(this).css('background','#fff'); 
            $(this).removeAttr('s'); 
        } 
    }) 
});

 

$(function(){ 
        $('#ul1,#ul2').on('click','li',function(){ 
                if(!$(this).attr('s')) { 
                $(this).css('background','red'); 
                $(this).attr('s',true); 
                }else { 
                        $(this).css('background','#fff'); 
                        $(this).removeAttr('s'); 
                } 
        }) 
});

冒泡：

js事件委托，就是冒泡的原理，从点击元素开始，递归方式向父元素传播事件，好处就是对于大量要处理的元素，不必为每个元素都绑定事件，只需要在他们的父元素上绑定一次就好，提高性能；另个好处就是可以处理动态插入dom中的元素。

事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素。

实例1、

<ul class="clearfix" data-type="cityPick">
        <li class="active_sort_opts" data-id="0">全部</li>
        <li data-id="88">纽约</li>
        <li data-id="119">洛杉矶</li>
        <li data-id="138">拉斯维加斯</li>
        <li data-id="84">夏威夷</li>
        <li data-id="120">旧金山</li>
        <li data-id="105">奥兰多</li>
        <li data-id="118">西雅图</li>
    </ul>

 

<script type="text/javascript">
        $(function () {
            $("ul[data-type='cityPick']").on('click', function () {
                alert("父元素ul被点击");
            });
            $("ul[data-type='cityPick']").on('click', 'li', function (e) {
                //e.stopPropagation();//点击li会触发li的click事件，而且通过冒泡触发ul的click事件
                alert("子元素li被点击");
            });
        })
    </script>

实例2、

<div class="button-group">
        <botton type="button" class="btn">提交1</botton>
        <botton type="button" class="btn">提交2</botton>
        <botton type="button" class="btn">提交3</botton>
        <botton type="button" class="btn">提交4</botton>
        <botton type="button" class="btn">提交5</botton>
        <botton type="button" class="btn">提交6</botton>
        <botton type="button" class="btn">提交7</botton>
        <botton type="button" class="btn">提交8</botton>
        <botton type="button" class="btn">提交9</botton>
    </div>

 

$(".button-group").on("click", ".btn", function () {
                alert(this.innerHTML);
            })