DOM中this与e.target的区别

本文深入探讨JavaScript中事件处理机制,解析e.target与this的区别,通过实例演示如何在DOM元素上绑定事件监听器,并理解事件触发时的目标元素与绑定元素之间的差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 1. e.target 返回的是触发事件的对象(元素)  this 返回的是绑定事件的对象(元素)
        // 区别 : e.target 点击了那个元素,就返回那个元素 。this 那个元素绑定了这个点击事件,那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);		
            console.log(this);   //这两个都是<div>123</div>
        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this); 
                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);
            })
    </script>
class SidebarAccordion { constructor(selector = '#sidebar') { this.sidebar = document.querySelector(selector); this.collapseSelector = '.collapse'; this.initCollapseEvents(); } initCollapseEvents() { this.sidebar?.querySelectorAll(this.collapseSelector).forEach(collapse => { collapse.addEventListener('show.bs.collapse', (e) => { if (!this.isCollapseOpen(e.target)) { this.closeOthers(e.target); const icon = e.target.previousElementSibling.querySelector('.collapse-icon'); icon.classList.add('rotate-90'); } }); collapse.addEventListener('hide.bs.collapse', (e) => { const icon = e.target.previousElementSibling.querySelector('.collapse-icon'); icon.classList.remove('rotate-90'); }); }); } closeOthers(currentCollapse) { const allCollapses = [...this.sidebar.querySelectorAll(this.collapseSelector)]; allCollapses.forEach(collapse => { if (collapse !== currentCollapse && this.isCollapseOpen(collapse)) { bootstrap.Collapse.getInstance(collapse)?.hide(); } }); } isCollapseOpen(collapseElement) { return collapseElement.classList.contains('show'); } } document.addEventListener('DOMContentLoaded', () => { new SidebarAccordion(); }); 上方是我的側邊欄設計代碼,其中js部分可以看到,我有個if判斷,判斷是否已經展開,如果已經展開則跳過這個步驟,然而實際情況是,當我點擊點擊已經展開的節點後,先觸發collapse.addEventListener('hide.bs.collapse', (e),然後會再次觸發collapse.addEventListener('show.bs.collapse', (e) 導致了點擊已展開的節點無法關閉的現象 並且頁面初始化後,會觸發兩次collapse.addEventListener('show.bs.collapse', (e),並且每次if (!this.isCollapseOpen(e.target))返回的結果都是false,因為在判斷前節點已經被關閉了 請給出解決方案,要求代碼簡潔高效,代碼極簡化風格
06-13
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值