첫 번째는 가장 일반적인 방법입니다.
프로그램 코드
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> <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의 분리를 실현하고 동일한 요소에 대한 여러 이벤트 등록을 실현했습니다. 이 기간 동안 호환성 문제를 발견했습니다. 등록된 이벤트입니다. 마지막으로 나중에 사용할 수 있도록 이벤트를 등록하는 방법을 캡슐화합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
