JavaScript 등록 이벤트 code_javascript 기술

첫 번째는 가장 일반적인 방법입니다.
프로그램 코드

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

test

<script> 함수 테스트(){ <br>alert(" test"); <br>} <br></script>

언젠가 JavaScript를 HTML 구조에서 분리해야 한다는 사실을 알게 되면 작성방법 :
프로그램 코드

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

< ;p id="para" title ="cssrain 데모!">test

<script> <br>function test(){ <br>alert("test"); <br>window.onload = function (){ <br>document.getElementById("para").onclick = test <br>} <br></script>


작업 시간이 점점 길어지고 때로는 여러 개의 동일한 이벤트 유형을 하나의 요소에 바인딩해야 하는 경우도 있습니다.

프로그램 코드

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

test

<script> { <br>alert( "테스트"); <br>} <br>function pig(){ <br>alert("pig") <br>} <br>window.onload = function(){ <br>document.getElementById(" para").onclick = test; <br>document.getElementById("para").onclick = pig <br>} <br></script> >위의 작성 방법을 따르면 두 번째 함수만 출력할 수 있습니다.
이때 AttachEvent 메소드를 사용해야 합니다:
프로그램 코드

코드 복사

코드는 다음과 같습니다. :

test

<script> </a>함수 테스트(){ </span> Alert("테스트" ); </div>} <div class="codebody" id="code90081">function pig(){ <br>alert("pig") <br>} <br>window.onload = function(){ <br>document.getElementById ("para") .attachEvent("onclick",test); <br>document.getElementById("para").attachEvent("onclick",pig) <br></script> >

한동안 이 코드에서는 오류를 발견하지 못했습니다.
어느 날, Firefox라는 브라우저가 여러분의 시야에 침입했습니다. 이 코드를 Firefox에 넣고 실행해보니
제대로 실행되지 않는 것을 발견했습니다. 이와 같은 문제가 점점 더 많아지고 있지만 JS 프로그래머로서 우리가 직면해야 할 모든 것입니다.
이 코드의 플랫폼 호환성 문제를 해결하기 위해 매뉴얼을 살펴보며 Firefox와 IE의 차이점을 배웠습니다.
Firefox에 이벤트를 등록하려면 다음을 사용하세요. 동시에 addEventListener 메소드를 순서대로 사용합니다. IE와 호환되려면 if..else를 사용해야 합니다...
프로그램 코드

코드 복사


코드

< ;p id="para" title="cssrain 데모!">test

<script> 함수 테스트(){ <u>alert("테스트"); </u>} </a>function pig(){ </span>alert("pig") </div>} <div class="codebody" id="code71518">window.onload = function(){ <br> var element = document.getElementById("para"); <br>if(element.addEventListener){ // firefox, w3c <br>element.addEventListener("click",test,false) <br>element.addEventListener( "click",pig,false); <br>} else { // 즉, <br>element.attachEvent("onclick",test) <br>element.attachEvent("onclick",pig); <br>} <br></script>


이제 코드는 여러 플랫폼에서 작동할 준비가 되었습니다.
하지만 레벨이 향상됨에 따라 매번 판단을 내리는 것에 만족하지 않고 나중에 이 판단을 캡슐화하여 직접 호출하고 싶습니다.
프로그램 코드




코드 복사

코드는 다음과 같습니다.

test

<script> <span>function test(){ <a style="CURSOR: pointer" data="53764" class="copybut" id="copybut53764" onclick="doCopy('code53764')">alert("test") <u>} </u>function pig(){ </a>alert("pig"); 🎜>} </span>function addListener(element,e,fn){ </div>if(element.addEventListener){ <div class="codebody" id="code53764">element.addEventListener(e,fn,false) <br>} else { <br>element .attachEvent("on " e,fn); <br>} <br>} <br>window.onload = function(){ <br>var element = document.getElementById("para") <br>addListener( 요소,"클릭", 테스트) <br>addListener(요소,"클릭",돼지) <br></script>
이 시점에서 프로그래머로서의 일은 끝났습니다.
중간 가장 전통적이고 기본적인 작성 방법부터 시작하여 Js와 HTML의 분리를 실현하고 동일한 요소에 대한 여러 이벤트 등록을 실현했습니다. 이 기간 동안 호환성 문제를 발견했습니다. 등록된 이벤트입니다. 마지막으로 나중에 사용할 수 있도록 이벤트를 등록하는 방법을 캡슐화합니다.