innerHTML_javascript 기술 이후 동적 바인딩이 손실되는 EVENT 문제에 대한 솔루션

innerHTML을 사용하여 콘텐츠 일부를 꺼낸 다음 다시 innerHTML을 사용하면 다음과 같이 동적으로 바인딩된 원본 이벤트가 손실됩니다.
html:

코드 복사 코드는 다음과 같습니다.

클릭

>

스크립트:

코드 복사 코드는 다음과 같습니다.

document.getElementById('d1').onclick =function(){alert(1)};
var html=document.body.innerHTML
document.body.innerHTML=html

이 코드를 실행한 후 d1을 클릭하세요. 응답이 없습니다.

해결책: onclick을 상위 요소에 바인딩하고 버블 원리를 사용하여 현재 요소가 d1인지 확인하고, d1이면

을 실행합니다. 코드 복사 코드는 다음과 같습니다.

document.body.onclick=function(e){
var e=e ||이벤트;
var current=e.target||e.srcElement
if(current.id=='d1'){alert(1)}
}

이것도 접는 방식이 효율에 확실히 영향을 미치게 됩니다.