zoukankan      html  css  js  c++  java
  • js,jq.事件代理(事件委托)复习。

    <ul id = "lists">
             <li>列表1</li>
             <li>列表2</li>
             <li>列表3</li>
             <li>列表4</li>
             <li>列表5</li>
             <li>列表6</li>
     </ul>
    

      js委托:

    var lists = document.getElementById("lists");
    
            lists.addEventListener("click",function(event){
    
                var target = event.target;
                //防止父元素ul也触发事件
                if(target.nodeName == "LI"){
                   target.style.backgroundColor = "red";
                }
            })
    

      jq委托:

    $(function(){
                $("#lists").on("click","li",function(event){
                    var target = $(event.target);
                    target.css("background-color","red");
                })
            })
    

      

    $(function(){
                $("#lists").delegate("li","click",function(event){
                    var target = $(event.target);
                    target.css("background-color","red");
                })
            })
    

      

    $(function(){
                $("#lists").bind("click","li",function(event){
                    var target = $(event.target);
                    if(target.prop("nodeName")=="LI"){
                    target.css("background-color","red");}
                })
            })
    

      

    bind()方法同原生的JavaScript实现方法一样,当父元素代子元素执行事件时,父元素也会触发事件,所以我们需要判断一下触发事件的元素名。此外,用bind()方法给元素绑定事件的时候要注意,它只能给已经存在DOM元素添加事件,不能给未来存在DOM

    元素添加添加事件。如果要频繁地添加DOM元素,并且给新添加的DOM元素绑定事件的话,用live(),delegate(),on()等方法。鉴于jQuery从1.7之后就不推荐live()和delegate()方法了,所以还是使用on()方法。

  • 相关阅读:
    5860. 从双倍数组中还原原数组
    5847. 找到所有的农场组
    5846. 找到数组的中间位置
    442. 数组中重复的数据
    1987. 不同的好子序列数目
    1986. 完成任务的最少工作时间段
    1985. 找出数组中的第 K 大整数
    1984. 学生分数的最小差值
    学习内容整合
    spring-DI和spring-mybatis整合
  • 原文地址:https://www.cnblogs.com/wangEddy/p/8259630.html
Copyright © 2011-2022 走看看