이벤트 의뢰 에 대한 시도

3692 단어 JavaScript
코드
 ul.addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn() //       
     }
 })

이전에 잘 사용 되 었 으 나, 어떤 li 에 span 이 있 을 때 bug 를 발 견 했 습 니 다. 만약 사용자 가 li 안의 span 을 클릭 하면 fn 을 촉발 할 수 없습니다. 이것 은 분명 옳지 않 습 니 다.
2 코드 개량
생각 은 span 을 클릭 한 후에 span 의 조상 요 소 를 옮 겨 다 니 며 그 중 에 ul 안의 li 가 있 는 지 없 는 지 를 보 는 것 이다.
 function delegate(element, eventType, selector, fn) {
     element.addEventListener(eventType, e => {
       let el = e.target
       while (!el.matches(selector)) {
         if (element === el) {
           el = null
           break
         }
         el = el.parentNode
       }
       el && fn.call(el, e, el)
     })
     return element
}

좋은 웹페이지 즐겨찾기