2023-06-22 使用事件委托来为所有子节点绑定事件,e.target和this的区别,vue获取DOM节点的常见方法

本文链接：https://blog.csdn.net/rowlet/article/details/131339426

文章目录

1.使用事件委托为子节点绑定事件

<body>
  <ul onclick="func(event)">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>
<script>
    function func(e){
      console.log(e.target)
      e.target.style.background="yellow"
    }
</script>

2.e.target和this的区别

形参e是指事件对象,

它是事件的一系列相关数据的集合,由系统自动创建,无需传参,
事件对象只有在事件(比如onclick)存在时在存在

e.target是返回触发事件的对象
e.target与this的区别

e.target返回的是 触发 事件的对象或元素,
而this返回的是 绑定/调用 事件的对象或元素

比如:
在事件委托中,把点击事件绑定给父节点(ul)时,
this返回的是绑定点击事件的元素,也就是ul
而e.target返回的是被点击的某个子节点,也就是li

3.vue中如何获取DOM节点?

注:vue无需通过操作DOM节点来更新界面,也不推荐开发者直接操作DOM

方法一:通过事件源来获取当前点击的节点

不传参

//html
 <input type="button" value="点击" v-on:click='fun'/>
//js
methods:{
             fun:function(event){
                 console.log(event.target);
             }
         }

传参

//html
 <input type="button" value="点击" v-on:click='fun($event.target)'/>
//js
methods:{
             fun:function(e){
                 console.log(e);
             }
         }

方法二:通过ref来获取当前点击的节点

//html
 <input ref='name' type="button" value="点击" v-on:click='fun'/>
//js
methods:{
           fun(){
               console.log(this.$refs.name);
           }
         }

方法三:使用自定义指令来获取当前点击的节点

//html
 <input type="button" value="点击" v-get/>
//js(无需点击就能获取)
   Vue.directive("get",{
       bind:function(el){
           console.log(el);
       }
   })