2016-12-07 4 views
0

index.html 파일이 click-me 클래스 속성이있는 모든 요소가있는 경우 index.html가있는 경우
내가 점검처럼 재사용 가능한 플러그인으로 plugin.js을 만들고 싶어, (주는 플러그인 후 포함) 이러한 종류의 요소를 설정 한 다음 모든 종류의 요소를 eventListener로 설정하십시오.Javascript : eventListener를 window.onload가없는 DOM 객체로 설정 하시겠습니까? <code>index.html</code>이 <code>plugin.js</code> 및 <code>main.js</code> 두 개의 자바 스크립트 코드를 포함 내

내가 main.js보다는 plugin.js에 항상 내 window.onload 기능을 원하지만 내가 캔트이 경우 'plugin.js에서 클래스 이름으로 DOM 개체를 얻을, 또한 main.jsplugin.js의 함수를 호출하고 싶지 않아요.

누구나 아는 사람이 있습니까?

+1

이러한 이벤트를 위임하는 방법은 무엇입니까? https://learn.jquery.com/events/event-delegation/? –

+1

jQuery를 사용하고 있다면 왜 세계에서'window.onload'를 사용해야할까요?'$ (document) .ready (...')는 충분하지 않습니다. – zer00ne

+0

'$ (document)를 쓰는 것처럼 보입니다. 준비 (...'다른 자바 스크립트 파일에 서로 ~를 덮어 쓰지 않습니다!) 나는 Jquery에 익숙해 져야 할 것 같아요. 감사합니다! – FlyC

답변

1

글쎄, 당신은 제대로 이벤트 리스너로 onload를 사용한다 : 당신이 원하는대로이 main.jsplugin.js 모두에서 여러 번 추가 할 수 있습니다

window.addEventListener("load", function() { 

}); 

.

또한 이미지로드시 대기하지 않으므로 DOMContentLoaded 이벤트를 사용하는 것이 좋습니다. 중요한 것은, 당신이 window.onload에 의존하는 경우, 보류중인 이미지 하나만 방문의 처음 10 초 동안 페이지를 쓸모 없게 만들 수 있습니다. 다음과 같이 사용됩니다 :

document.addEventListener("DOMContentLoaded", function(event) { 
    console.log("DOM fully loaded and parsed"); 
    }); 

그러나 호환성 문제가 있으므로 일부 라이브러리를 사용하는 것이 좋습니다.

오, 마지막으로 - 필요한 경우가 아니라면 본문 앞에 스크립트를 연결하지 마십시오. 페이지 구문 분석을 차단합니다.

+0

'addEventListener()'는 덮어 쓰지 않는 것 같습니다 서로 있지만, 여전히 내 '

2

본문 뒤에 스크립트를 포함 할 수 있습니다. 문서가 더 이상 준비가되었는지

<body> 
</body> 
<!-- add your scripts here --> 

그런 다음이 페이지가 완전히 렌더링 된 후에 만 ​​다운로드를 시작하는 단점이있다, 확인 할 필요가 없습니다.

또 다른 가능성은 defer

<script type="text/javascript" src="plugin.js" defer></script> 
<script type="text/javascript" src="main.js" defer></script> 

스크립트를 가능한 한 빨리 다운로드하지만 페이지가 준비하고 순서 후에 만 ​​실행되는이 방법을 사용하고 있습니다.

더 자세한 답변을 클릭 된 요소는 루트에서 클릭 나 클래스가있는 경우here

+0

좋은 답변 :) 나는 당신의 포스트에서'before'를'after'로 바 꾸었습니다. –

+0

예, 왜 내가'전에'쓴지 모르겠다. 나는 커피가 필요하다고 생각한다. :). 덕분에 –

+0

고마워,하지만 모든 사람들이 내'plugin.js '를 사용하여'body' 아래에'