자바스크립트의 DOM 이벤트 바인딩 내용 분석

이 기사의 내용은 JavaScript에서 DOM 이벤트 바인딩의 내용 분석에 관한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

DOM 레벨 2 event

element.addEventListener(type,handler,boolean)
첫 번째 값은 on이 없는 이벤트 유형을 나타냅니다.
두 번째는 실행 방법입니다. (이벤트 핸들러 기능)
세 번째 값은 Boolean 값으로 기본값은 false이며 버블링 단계에서만 실행됩니다. 캡처 단계에서 true가 실행됩니다

element.removeEventListener(type, handler, boolean)
첫 번째 값은 추가하지 않고 이벤트 유형을 나타냅니다.
두 번째는 실행 방법입니다. (이벤트 핸들러 기능)
세 번째 값은 Boolean 값으로 기본값은 false이며 버블링 단계에서만 실행됩니다. 캡처 단계 중에
removal 이벤트를 실행하려면 true입니다. 사용법은 addEventListener와 일치합니다.

element.attachEvent(type,handler) IE 이벤트 바인딩.
element.detachEvent(type, handler) IE 이벤트 제거.
첫 번째 값은 이벤트 유형에 플러스를 더한 값을 나타냅니다.
두 번째는 실행 방법입니다. (이벤트 처리 기능),
IE의 이벤트 모델에는 버블링 모델만 있으므로 두 개의 값만 전달하면 됩니다.

크로스 브라우저 이벤트 바인딩 추가

var  addEvent = function(ele,type,handler){
    if(ele.addEventListener){
        ele.addEventListener(type,handler,false)
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,handler)
    }else{
        ele["on"+type]=handler
    }
}
addEvent(btn,"click",function(){console.log("点击")})

크로스 브라우저 바인딩 제거

function removeEvent(ele,type,handler){
    if(ele.removeEventListener){
        ele.removeEventListener(type,handler,false)
    }
    else if(ele.detachEvent){
        ele.detachEvent('on'+type,handler)
    }
    else{
        ele['on'+type]=null
    }
}
removeEvent(btn,"click",function(){console.log("点击")})

DOM 0 레벨 이벤트
HTML의 on 속성

<button id="btn" onclick="console.log(1)">确定</button>
<button id="btn" onclick="fn()">确定</button>

따옴표 안의 문자는 실행 가능한 문자열입니다.
HTML의 on-method는 js와 HTML을 긴밀하게 결합시키기 때문에 추후 유지 관리에 도움이 되지 않으므로 권장하지 않습니다.

DOM 레벨 0 이벤트

var btn=document.getElementById("btn")
btn.onclick=function(){
    console.log(1);
}
btn.onclick=function(){
    console.log(2);
}//2

같은 이벤트를 추가하면 나중 이벤트가 이전 이벤트를 덮어쓰게 됩니다.

관련 추천:

js의 DOM 이벤트 바인딩에 대한 자세한 설명

DOM 이벤트에 대한 자세한 설명 JQuery의 바인딩 사용법 _jquery

위 내용은 자바스크립트의 DOM 이벤트 바인딩 내용 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!