집 >
기사 > 웹 프론트엔드 > HTML file_javascript 기술에서 Js가 배치되는 위치의 차이점은 무엇입니까
HTML file_javascript 기술에서 Js가 배치되는 위치의 차이점은 무엇입니까
- WBOY원래의
- 2016-05-16 17:24:531725검색
이 질문은 항상 초보자들을 당황하게 했습니다. 먼저 HTML에서 js가 어디에 배치될 수 있는지, 즉 헤드와 바디에 배치되는지 이해하세요. 대부분의 사람들은 그것을 머리에 넣습니다. 배울때 헷갈리게 따라하고 머리속에 집어넣었는데 왜일까요? 오늘은 이 두 곳의 차이점에 대해 이야기해 보겠습니다.
먼저 HTML 코드를 살펴보세요.
;meta http-equiv="content-type" content="text/html;charset=utf-8"> <br><br><script type="text/javascript" src="test.js"> ;</ script> <br><br></head> <br><br><body> <br><div id="target"> ; <br> <button id="btn">버튼</button> <br><br></body> <br><br> <br><br> <br> <br><br>코드 복사<br><br> 코드는 다음과 같습니다.<div class="codetitle"><span> <a style="CURSOR: pointer" data="65882" class="copybut" id="copybut65882" onclick="doCopy('code65882')">var test = function(){ <u>varspan = document. createElement("span") ; </u>span.innerHTML="추가"; </a>document.getElementById("target").appendChild(span) </span></div>document.getElementById(" btn").onclick= test; <div class="codebody" id="code65882">
<br> <br>이 코드를 헤드에 넣으면 실행되지 않습니다. 왜? <br>HTML의 실행순서에 관한 내용입니다. 좀 더 정확하게 말하면 HTML의 실행순서가 아니라 js의 실행순서입니다. 위에서 <script type="text/html" src="test.js"></script>까지 HTML을 실행하면 test.js 파일이 들어갑니다. 이전 문장은 실행되지 않습니다. 즉, 함수로 래핑된 문장은 실행되지 않습니다. 페이지로 이동하여 요소 ID가 btn인 요소를 가져옵니다. 하지만 현재 HTML 페이지가 로드되지 않았습니다. ID가 btn인 요소를 가져오는 것은 확실히 불가능합니다. 오류가 보고됩니다. 이때 어떤 분이 다음과 같은 코드로 변경할 수 있다고 하더군요. <br><br><br><br><br> 코드를 복사하세요</div>
<br><br> 코드는 다음과 같습니다. 🎜><br> <div class="codetitle">document .body.onload = function(){ <span>document.getElementById("btn").onclick=test; <a style="CURSOR: pointer" data="43855" class="copybut" id="copybut43855" onclick="doCopy('code43855')"><u> </u>하지만 쓰기 이렇게 쓰는 것은 </ The front of body>를 쓰는 것만큼 좋지 않습니다. </a>위의 test [document.getElementById("btn").onclick=test;]에 괄호가 없다는 것을 눈치채셨나요? 그렇다면 [test()]로 변경하면 어떻게 될까요?</span>
</div> <div class="codebody" id="code43855">결과는 그림과 같이 페이지가 로딩되고, 버튼을 눌러도 아무런 반응이 없습니다. js 코드를 다음과 같이 변경합니다. <br><br><br><br>
</div>코드를 복사합니다. <br><br><br> 코드는 다음과 같습니다. <img src="http://files.jb51.net/file_images/article/201308/201382193545206.png?201372193634" alt="HTML file_javascript 기술에서 Js가 배치되는 위치의 차이점은 무엇입니까" ><br> <br> var test=function( ){ <div class="codetitle">varspan = document.createElement("span"); <span>span.innerHTML="add" <a style="max-width:90%" data="83376" class="copybut" id="copybut83376" onclick="doCopy('code83376')">document.getElementById("target").appendChild(span); <u>반환 함수(){ </u>alert("aaaa"); </a>} </span>} </div>
<div class="codebody" id="code83376">document.getElementById("btn").onclick=test() <br><br> <br>페이지가 로드되면 여전히 위와 같습니다. 버튼을 클릭하면 버튼을 눌렀을 때 함수의 반환 값이 실행되었음을 나타내는 "aaaa" 내용의 상자가 나타납니다. 클릭됩니다. 즉, 괄호를 추가하면 이벤트가 발생하지 않아도 함수가 실행됩니다. 이벤트가 트리거될 때 실행되는 함수의 반환 값입니다. 괄호를 포함하지 않으면 이벤트가 발생한 경우에만 함수가 실행됩니다. <br><br><br>Html 이벤트 트리거, 어떤 내용을 쓸 수 있나요? <br> <br>•예를 들어 onclick="";큰따옴표 안에 쓸 수 있는 것은 무엇인가요? 일반적으로 onclick="test();"와 같은 함수를 작성할 수 있습니다. 이 외에 또 무엇을 쓸 수 있나요? 이 세미콜론을 생략할 수 있나요? <br>•위의 js 코드를 보면 모든 줄에 세미콜론이 있습니다. 세미콜론의 목적은 명령문을 난독화하는 것입니다. 이는 onclick에서 js 코드를 작성할 수 있음을 의미합니다. 다음과 같이 시도해 보세요. <br><br>
</div>
<br><br>코드 복사<br><strong></strong> 코드는 다음과 같습니다.<br><div class="codebody" id="code64813"> <br> <br> <br><title> <br><meta http-equiv="content-type" content="text /html;charset=utf-8">
<br><br></head> <br><br><body> <br><div id="target"> <br><br></div> <br><button id="btn" onclick="var espan = document.createElement('span');esspan.innerHTML='Add';document.getElementById('target' ).appendChild(esspan);">Button</button> <br><br></body> <br></html> <br>
•실행 결과는 다음과 같습니다. :
•지침이 작동됩니다. 이는 단지 함수 이름 이상의 것을 입력할 수 있음을 보여줍니다.
이벤트 바인딩 방식?
•이벤트 바인딩에는 일반적으로 사용되는 두 가지 방법이 있습니다. 하나는 앞서 소개한 것처럼 이벤트에 js 코드를 추가하는 것입니다. 예: onclick="test();". 이 바인딩 방식의 단점은 아티스트가 이미 작성한 코드를 수정해야 한다는 것입니다.
• 또 다른 방법은 코드 작성을 시작할 때 ID를 사용하는 것입니다. 아티스트는 각 요소에 ID를 추가하기만 하면 됩니다. HTML 코드를 수정할 필요가 없습니다.
성명：본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
