이 기사의 내용은 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을 긴밀하게 결합시키기 때문에 추후 유지 관리에 도움이 되지 않으므로 권장하지 않습니다.
var btn=document.getElementById("btn") btn.onclick=function(){ console.log(1); } btn.onclick=function(){ console.log(2); }//2
같은 이벤트를 추가하면 나중 이벤트가 이전 이벤트를 덮어쓰게 됩니다.
관련 추천:
DOM 이벤트에 대한 자세한 설명 JQuery의 바인딩 사용법 _jquery
위 내용은 자바스크립트의 DOM 이벤트 바인딩 내용 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!