JavaScript 등록 이벤트 코드

먼저 가장 일반적인 방법 입 니 다.프로그램 코드

 
<p id="para" title="cssrain demo!" onclick="test()" >test</p> 
<script> 
function test(){ 
alert("test"); 
} 
</script> 

는 어느 날 자바 스 크 립 트 가 HTML 구조 와 분리 되 어야 한 다 는 것 을 알 게 된 후에 쓰기 방법 을 바 꾸 었 습 니 다.프로그램 코드

 
<p id="para" title="cssrain demo!">test</p> 
<script> 
function test(){ 
alert("test"); 
} 
window.onload = function(){ 
document.getElementById("para").onclick = test; 
} 
</script> 

는 우리 가 일 을 오래 한 후에 가끔 우 리 는 특정한 요소 에 똑 같은 사건 유형 을 여러 개 연결 해 야 합 니 다.프로그램 코드

 
<p id="para" title="cssrain demo!">test</p> 
<script> 
function test(){ 
alert("test"); 
} 
function pig(){ 
alert("pig"); 
} 
window.onload = function(){ 
document.getElementById("para").onclick = test; 
document.getElementById("para").onclick = pig; 
} 
</script> 

가 위의 쓰기 방법 에 따라우 리 는 두 번 째 함수 만 출력 할 수 있다.이때 우 리 는 attachEvent 방법 을 사용 해 야 합 니 다.프로그램 코드

 
<p id="para" title="cssrain demo!">test</p> 
<script> 
function test(){ 
alert("test"); 
} 
function pig(){ 
alert("pig"); 
} 
window.onload = function(){ 
document.getElementById("para").attachEvent("onclick",test); 
document.getElementById("para").attachEvent("onclick",pig); 
} 
</script> 

는 한 동안 이 코드 에 오류 가 있 는 것 을 발견 하지 못 했 습 니 다.어느 날,Firefox 라 는 브 라 우 저가 당신 의 시야 에 들 어 왔 습 니 다.이 코드 를 Firefox 에 넣 고 실행 한 후에 정상적으로 실행 되 지 않 는 것 을 발 견 했 습 니 다.문 제 는 이렇게 많아 지고 있 지만 JS 프로그래머 로 서 반드시 직면 해 야 한다.이 코드 의 플랫폼 호환성 문 제 를 해결 하기 위해 저 는 매 뉴 얼 을 뒤 져 서 fireforx 와 ie 의 차 이 를 알 게 되 었 습 니 다.fireforx 에 등 록 된 이벤트 사용:addEvent Listener 방법 과 i 를 호 환 하기 위해 서 우 리 는 if..else..프로그램 코드

 
<p id="para" title="cssrain demo!">test</p> 
<script> 
function test(){ 
alert("test"); 
} 
function pig(){ 
alert("pig"); 
} 
window.onload = function(){ 
var element = document.getElementById("para"); 
if(element.addEventListener){ // firefox , w3c 
element.addEventListener("click",test,false); 
element.addEventListener("click",pig,false); 
} else { // ie 
element.attachEvent("onclick",test); 
element.attachEvent("onclick",pig); 
} 
} 
</script> 

를 사용 해 야 합 니 다.이때 코드 는 여러 플랫폼 에서 작업 할 수 있 습 니 다.그러나 수준 이 향상 되면 서 매번 판단 하 는 것 에 만족 하지 않 습 니 다.이 판단 을 포장 하고 싶 으 면 나중에 프로그램 코드

 
<p id="para" title="cssrain demo!">test</p> 
<script> 
function test(){ 
alert("test"); 
} 
function pig(){ 
alert("pig"); 
} 
function addListener(element,e,fn){ 
if(element.addEventListener){ 
element.addEventListener(e,fn,false); 
} else { 
element.attachEvent("on" + e,fn); 
} 
} 
window.onload = function(){ 
var element = document.getElementById("para"); 
addListener(element,"click",test); 
addListener(element,"click",pig); 
} 
</script> 

를 직접 호출 할 수 있 습 니 다.이로써 프로그래머 로 서 의 일 은 끝 납 니 다.중간 에 우 리 는 가장 전통 적 이 고 기본 적 인 서법 에서 Js 와 HTML 의 분 리 를 실현 한 다음 에 같은 요소 에 여러 개의 사건 을 등록 하 는 것 을 실현 했다.그 동안 우 리 는 등록 사건 의 호환성 문 제 를 발견 했다.마지막 으로 우 리 는 등록 사건 의 방법 을 봉인 하여 나중에 사용 하기에 편리 하 다.