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>


  • 相关阅读:
    iOS_03_为什么选择ios开发
    iOS_02_什么是ios开发
    iOS_01_什么是ios
    Hadoop之HDFS
    hadoop组件及其作用
    数组
    Scala基础知识(二)
    hadoop安装过程
    Scala基础知识
    建造者模式
  • 原文地址:https://www.cnblogs.com/forward-wuyi/p/9209688.html
Copyright © 2011-2022 走看看