$.on()事件处理程序

<!--语法:$(selector).on(event,childSelector,data,function,map);  -->
<!--event 必需。规定要从被选元素移除的一个或多个事件或命名空间。必需是有效的事件。由空格分隔多个事件值。例如：$("p").on("mouseover mouseout",function(){});-->
<!--childSelector 可选。规定只能添加到指定子元素上的事件处理程序。例如:$("#demo").on("click","p",function(){});-->
<!--data 可选。规定传递到函数的额外数据。$("p").on("click", {msg: "点击我!"}, function(event){alert(event.data.msg)});-->
<!--funttion 可选。规定当事件发生时运行的函数。  -->
<!--map 规定事件映射（{event:function,event:function,...}）,包含要添加到元素的的一个或多个事件，以及当事件发生时运行的函数。$("p").on({mouseover:function(){$("body").css("background-color","red");},mouseout:function(){$("body").css("background-color","blue");},click:function(){$("body").css("background-color","gray");}});-->
<!--注意：1-自 jQuery 版本 1.7 起，on()方法是bind()、live()和deletage()方法的新的替代品-->   
<!--注意：2-使用on()方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）-->
<!--注意：3-如需移除某事件处理程序，请使用off()方法。-->
<!--注意：4-如需添加只运行一次的事件然后移除，请使用one()方法-->

    <h3>一、如何使用 on() 来达到与 bind() 相同的效果。</h3>
    <div id="div1">英特尔超级品牌日</div><br />
    <div id="div2">所有商品大减价</div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#div1").on("click",function(){
                $(this).css("background-color","pink");
            })
        });
        $(document).ready(function(){
            $("#div2").bind("click",function(){
                $(this).css("background-color","pink");
            });
        });
    </script>
    <h3>二、如何使用 on() 来达到与 delegate() 相同的效果。</h3>
    <div id="div3">天猫精选天猫精选</div>
    <div id="div4"><p>天猫精选天猫精选</p></div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#div3").on("click",function(){
                $(this).css("background-color","gold");
            })
        });
        $(document).ready(function(){
            $("#div4").delegate("p","click",function(){
                $(this).css("background-color","gold");
            });
        });
    </script>   
    <h3>三、如何使用 on() 来达到与 delegate() 相同的效果。</h3>
    <div id="div5">京东商城京东商城</div>
    <div id="div6">京东商城京东商城</div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#div5").on("click",function(){
                $(this).css("background-color","gray");
            })
        });
        $(document).ready(function(){
            $("#div6").live("click",function(){
                $(this).css("background-color","gray");
            });
        });
    </script>
    <h3>四、如何向元素添加多个事件处理程序。</h3>
    <p id="append">添加多个事件处理程序</p>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#append").on("mouseover mouseout",function(){
                $("#append").toggleClass("intro");
            });
        });
    </script>
    <h3>五、如何使用 map 参数向被选元素添加多个事件处理程序。。</h3>
    <div id="news">会议认为，今年以来，面对复杂多变的国内外形势，各地区各部门按照中央经济工作会议部署，坚持稳中求进工作总基调，贯彻落实新发展理念，以推进供给侧结构性改革为主线，有效推进各项工作，保持了经济发展稳中向好态势。上半年经济运行在合理区间，主要指标好于预期，城镇就业平稳增加，财政收入、企业利润和居民收入较快增长，质量效益回升。物价总体稳定。经济结构调整不断深化，消费需求对经济增长的拉动作用保持强劲，产业结构调整加快，过剩产能继续化解，适应消费升级的行业和战略性新兴产业快速发展，各产业内部组织结构改善。区域协同联动效应初步显现，“一带一路”建设、京津冀协同发展、长江经济带发展三大战略深入实施，脱贫攻坚战成效明显，生态保护、环境治理取得新进展。新发展理念和供给侧结构性改革决策部署日益深入人心，政府和企业行为正在发生积极变化，促进供求关系发生变化，推动了市场信心逐步好转。</div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#news").on({
                mouseover:function(){$(this).css("background-color","#00B8EC");},
                mouseout:function(){$(this).css("background-color","#134B86");},
                click:function(){$(this).css("background-color","#139E10");}
            })
        })

    </script>
    <h3>六、如何在元素上添加自定义命名空间事件。</h3>
    <button id="tribtn">triggle()方法事件</button>
    <p class="triggle">点击button按钮改变文本内容</p>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p.triggle").on("myOwnEvent",function(event,showName){
                $(this).text(showName+"!多么好听的名字啊！").show();
            })
            $("#tribtn").click(function(){
                $("p.triggle").trigger("myOwnEvent",["胡歌"])
            })
        })
    </script>
    <h3>七、如何向函数传递数据。</h3>
    <button id="postDataBtn">传递数据按钮</button>
    <script type="text/javascript">
        function handerName(event){
            alert(event.data.msg);
        }
        $(document).ready(function(){
            $("#postDataBtn").on("click",{msg:"我是被传递的数据"},handerName)
        })      
    </script>
    <h3>八、向未来的元素添加事件处理程序：on()方法也适用于尚未创建的元素</h3>
    <p class="adds">向未来的元素添加事件处理程序</p>
    <p class="adds">on()方法也适用于尚未创建的元素</p>
    <button id="addBtn">点击添加一段文本</button>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p.adds").on("click",function(){
                $(this).slideToggle();
            })
            $("#addBtn").on("click",function(){
                $("<p>我是被添加的文本</p>").insertAfter("button");
            })
        })
    </script>
    <h3>九、移除事件处理程序：如何使用off()方法移除事件处理程序</h3>
    <p class="removeon">点击这个段落修改它的背景颜色。</p>
    <p class="removeon">点击一下按钮再点击这个段落( click 事件被移除 )。</p>
    <button id="removeBtn">点我，移除on()事件</button>
    <script type="text/javascript">
        $(function(){
            $("p.removeon").on("click",function(){
                $(this).css("background-color","royalblue")
            })

            $("#removeBtn").click(function(){
                $("p.removeon").off("click");
            });
        })
    </script>