vue3手动封装一个点击切换下滑线，事件委托,实现简易选项卡

点击切换下滑线

看看效果
 

body主要代码：

把点击事件绑定到父元素身上，因为把每个li都绑定一个事件工作量太大了，也不显示；所以利用事件委托

<ul @click="disPlay">

          <li class="wy">网页端</li>

          <li class="sji">手机端</li>

        </ul>

前端性能优化：在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能

事件委托的原理：事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

在js中的代码：

封装了一个函数

//  简易版，并不是最优方法，封装了一个disPlay的函数，通过e来获取事件

const disPlay=(e)=>{

// e.target.parentNode拿到父元素

// e.target.parentNode.children拿到了两个子元素

    console.log(e.target.parentNode.children);

    if(e.target.innerText=="网页端"){  // 利用li标签中的文字来进行判断

        e.target.parentNode.children[1].style.borderBottom='0'  其他子元素设置为空

        e.target.style.borderBottom='3px solid rgb(241, 112, 53)'  给当前点击的元素设置样式

    }else{

        if(e.target.innerText=="手机端"){

            e.target.parentNode.children[0].style.borderBottom='0'

        e.target.style.borderBottom='3px solid rgb(241, 112, 53)'

    }

    }

}

改进版本

const disPlay=(e)=>{

    let node=e.target.parentNode.children

    for(let i=0;i<node.length;i++)

    node[i].style.borderBottom='0';

    // 不能是父元素，如果是父元素的话会有一条长的横线

    if(e.target.className=='ull'){

        e.target.style.borderBottom='0'

    }else{

         e.target.style.borderBottom='3px solid rgb(241, 112, 53)'

    }

}

在此基础上我们可以做一个简易的选项卡切换

看看效果

body代码

<div class="xuanxiang" @click="disPlay">
           <!-- 选项卡 -->
           <div>买房<div class="mf">买房呀</div></div>
           <div>卖房<div class="maif">卖房呀</div></div>
        </div>

js代码

// 选项卡
const disPlay=(e)=>{
  let nodes = e.target?.parentNode.children;
  for (let i = 0;i<nodes.length; i++){
    nodes[i].children[0].style.display= 'none'
  }
    e.target.children[0].style.display='block'
    console.log(2,e.target.children[0]);
}

css代码

 .maif{
          display: none;
        }