zoukankan      html  css  js  c++  java
  • js、jq、vue中的事件委托

    1、js中的事件委托
    <ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    </ul>


    window.onload = function(){
      var oUl = document.getElementById("ul1");
      oUl.onclick = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li'){
             alert(123);
            alert(target.innerHTML);
        }
      }
    }

    2、jq中的事件委托(用on()给父级绑定委托事件 找到对应的子节点)

    <ul>
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
    </ul>

    $('ul').on('click','li',function(){ //给li的父标签绑定委托事件
    alert($(this).text());//点击时候弹出JQ获取li里文本内容的
    //alert(this.innerHTML);//JS里获取里文本内容的方法
    console.log(this);
    });
    // $('ul').off('click','li');
    $('input').bind('click',function(){
    $('li:first').before('<li>冬</li>');
    });


    3、vue中的事件委托(在子元素上面 加上 :data-index)
    eg:
    <ul class="...">
    <li class="..." v-for="(el,index) in getData" :key="index" @click="initData()" :data-index="index">
    ........
    </li>
    <ul>


  • 相关阅读:
    穷举
    菱形
    6.824 Lab 3: Fault-tolerant Key/Value Service 3A
    6.824 Lab 2: Raft 2C
    6.824 Lab 2: Raft 2B
    一文学会Rust?
    字符串相似度匹配
    解决gson解析long自动转为科学计数的问题
    commonJs requirejs amd 之间的关系
    关于package.json的理解
  • 原文地址:https://www.cnblogs.com/forward-wuyi/p/9209688.html
Copyright © 2011-2022 走看看