자바 스크립트/HTML : 배선 요소 이벤트

Question

최근에 블로그 게시물을 읽었습니다. 그것에서, 저자는 모든 "onclick을"행사하지 인라인을 연결할 독자를 말했지만, 때이 같은 준비가 DOM의 (jQuery를 예) :

이벤트와 페이지의 모든 요소에 대한

<script type="text/javascript"> 
$(document).ready(function() { 
    $("myElement").click(... 
}); 
</script> 

이를, 그들에게 붙어있다. 그리고 그 모든 스크립트가있는 스크립트 블록은 페이지 끝 부분에 있어야합니다.

그는 인라인 (in-line)을 설정하는 것은 유지하는 것이 더 어렵다고 말했다

<span id="myElement" onclick="...">moo</span> 

그러나 그는 왜 말을하지 않았다.

다른 사람의 경험에 맞습니까? 이것을하는 것이 더 나은 방법입니까? 장점은 무엇입니까?

감사합니다.

Answer 1

지저분합니다. 마크 업과 스타일을 분리하는 것과 마찬가지로 로직을 마크 업과 분리하는 것이 가장 좋습니다. 이미지를 마우스로 가리키면 어떻게되는지 수정하기 위해 마크 업을 검색 할 필요가 없으므로 코드 분리가 쉽습니다. 당신이 이벤트 핸들러를 찾기 위해 HTML을 통해 사냥을 할 필요가 없기 때문에 한 곳에서 이벤트 핸들러를 모두 갖는

는

# index.html 
<img class="thumbnail" src="puppies.jpg" /> 

# index.js 
$("img.thumbnail").fadeTo(0, 0.5).hover(
    function() { $(this).fadeTo("fast", 1.0); }, 
    function() { $(this).fadeTo("slow", 0.5); } 
); 

# index.css 
img.thumbnail { border:1px dotted red; } 

Answer 2

, 유지 보수 코드를 훨씬 쉬워집니다. 또한 핸들러에서 작은 따옴표와 큰 따옴표를 모두 사용할 수 있으며 이벤트가 처음 시작될 때 대신 스크립트 블록이 구문 분석 될 때 구문 오류가 발생합니다.

또한 모든 인라인 이벤트 처리기는 브라우저가 별도의 표현식 (eval 호출과 동일)을 구문 분석해야 성능이 저하됩니다.

Answer 3

글쎄, 일반적으로 코드와 콘텐츠를 가능한 한 많이 분리하는 것이 좋은 스타일로 간주됩니다.

<span id="myElement">moo</span> 

당신이 한 장소에 보관 할 수 있으며, 심지어 외부 자바 스크립트 파일에 넣을 수있는 별도의 중앙 코드 저장소 : 당신이 방법을 사용하는 경우, 당신은 멋지고 깨끗한 HTML이있다.

HTML 레이아웃을 편집하는 것은 정말 재미 있고, 멋지게 보입니다.

나는 항상이 규칙을 편지에 따르는 것은 아니며, 나는 다른 사람들과 마찬가지로 열렬하지 않다. 하지만 물건을 인라인 할 때 최대의 기능 호출 onclick='do_stuff()'을 허용합니다. 더 복잡한 것은 코드 스프를 정말 빠르게 만듭니다.

Answer 4

behavioral separation에서이 기사를 읽으면 JavaScript가 비활성화되었을 때의 성능 저하가 설명되어 있습니다. 눈에 잘 띄지 않는 JavaScript에 대한 기사를 찾아 jQuery의 정신을 이해할 수도 있습니다.

Answer 5

장점 여러 컨트롤 (ASCX)이 포함 된 페이지의 경우 다른 컨트롤 (ASCX) 또는 페이지의 HTML 컨트롤에서 생성 된 이벤트를 검색 할 필요가 없습니다.

Firebug 또는 다른 디버거를 사용하여 이벤트를 등록하면 디버깅 할 수도 있습니다.

Answer 6

또한 이벤트 버블 링을 사용하면 많은 수의 이벤트 처리기를 피할 수 있습니다.

Answer 7

인라인 이벤트의 장점은 요소를 검사하여 조치를 수행 할 때 발생하는 상황을 직접 볼 수 있다는 것입니다.

이전 코드를 유지하거나 다른 사람이 수행하는 경우 특히 빠릅니다.

또 다른 장점은 속도에 관한 것입니다. 나중에 이벤트를 첨부하면 DOM이 사용되며 인라인 생성만큼 빠르지 않을 수 있습니다.

그리고 PURE 같은 눈에 거슬리지 템플릿 엔진을 사용하여

당신에 유래에 오신 것을 환영합니다 어떤 JS 논리