가장 좋은 방법은 무엇을 추가하려는 이벤트에서 JavaScript?

StackOverflow https://stackoverflow.com/questions/34126

문제

나는 2 주 방법으로 이벤트를 설정하에서 자바스크립트:

  1. 추가 직접 이벤트 태그 안에 다음과 같다:

    <a href="" onclick="doFoo()">do foo</a>

  2. 그들을 설정 자바 스크립트로 다음과 같다:

    <a id="bar" href="">do bar</a>

및 추가에 이벤트 <script> 섹션 안에 <head> 섹션 또는 외부 자바스크립트 파일을 같이 사용하는 경우 prototypeJS:

Event.observe(window, 'load', function() {
    $('bar').observe('click', doBar);
}

내가 생각하는 첫 번째 방법은 더 쉽게 이해하고 관리할 수 있기 때문에(JavaScript 활동은 직접적인 링크)그러나 그것이 그렇게 깨끗한(기 때문에 사용할 수 있는 링크를 클릭하는 경우에도 페이지로는 원인이 될 수 있는 자바 스크립트 오류가 발생에 어떤 경우).

두 번째 방법은 청소기(동작이 추가되는 경우 페이지가 완전히드)그러나는 것이 더 어렵다는 것을 알고는 조치에 연결합니다.

는 방법은?

Killer 응답이 완전히 감사드립니다!

도움이 되었습니까?

해결책

내 경험에 의하면,거기에는 두 가지 주요 포인트이:

1)가장 중요한 일관성을 지켜야 한다는 것입니다.나는 생각하지 않는 두 가지 방법 중 하나는 반드시 읽기 쉽게 한,당신은 그것에 충실.나만을 얻을 때 혼란 두 방법은 프로젝트에서 사용(더욱 악화 또는 동일한 페이지)다음 때문에 내가 찾기 시작하는 대한 호출과하지 않는 즉시 알 수 있는 곳입니다.

2)두 번째 종류,즉 Event.observe() 는 장점 때와 동일 또는 매우 비슷한 작업에 여러 이벤트이기 때문에서 명백하게 모든 사람들 전화는 같은 장소에.또한,콘라드로 지적,일부 경우에 이것을 처리할 수 있습으로 하나의 전화입니다.

다른 팁

내가 생각하는 첫 번째 방법은 쉽게 읽을 유지

내가 찾는 반대입니다.마음에 부담하는 때때로 하나 이상의 이벤트 처리기가 될 것입니다 바인딩하여 주어진 제어합니다.

을 선언하는 모든 이벤트는 하나의 중앙 위치에 도움을 구성하는 활동은 사이트에 공지합니다.필요하신 경우에는 변화가 없을 검색에 대한 모든 장소를 만드는 함수를 호출하면,당신은 단순히 있는 그것을 변경하는 하나의 장소입니다.를 추가하는 경우 요소,같은 기능을 가지고 당신이 기억하지 않아도 추가 처리기를 그대신,그것은 충분히 그들이 선언하는 클래스 또는 이를 변경해서는 안됩니다 모든기 때문에 그들은 논리적으로 컨테이너에 속하는 요소는 모든 자식 요소를 얻는 유선하는 작업입니다.에서 실제 코드:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

이 유선 이벤트를 처리하는 모든 열 머리글에서 테이블 테이블을 정렬 할 수 있습니다.상상을 할 수있는 노력을 모두 열 헤더를 정렬이 별도로 합니다.

나는 두번째 방법은 일반적으로 선호하기 때문에 그것에 대한 정보를 유지 작업(i.eJavaScript)에서 별도의 마크업에서 동일한 방법 CSS 분리하는 프레젠테이션에서 마크업이 있습니다.

는 이것에 의하여 약간 더 어려울에서 어떤 일이 일어나고 있는 페이지만,좋은 같은 도구를 방화가 당신을 도움이 될 것입니다.당신은 또한 더 나은 IDE 지원할 수 있는 경우에 당신을 유지의 혼합 HTML Javascript 을 최소화합니다.

이 방법은 정말 자신의 프로젝트 성장,그리고 당신은 당신을 찾을 연결하려는 동 javascript 이벤트를 다른 요소의 유형에 많은 다른 페이지입니다.이 경우에는 훨씬 쉽게 된 단일 속도로 붙이는 이벤트,보다는 오히려를 검색하는 데는 많은 다른 HTML 파일을 찾는 특별한 함수가 호출됩니다.

사용할 수도 있습니다 매개 변하지 않는(IE)/attachEvent(IE).

체크아웃: http://www.quirksmode.org/js/events_advanced.html

이러한 연결할 수 있는 함수(또는 여러 기능)을 이벤트에서 기존 DOM 개체입니다.그들은 또한할 수 있는 장점 un-첨부파일 이상.

일반적으로,당신이 사용하는 경우 심각한 금액의 자바스크립트,그것은 유용할 수 있습 h javascript 읽기 쉽고,반대로 html.그래서 당신이 할 수있는 말 onclick=X html 에서는 매우 명확하지만,이것은 모두 부족이 분리의 코드의 또 다른-구문 간의 종속성을 조각--과하는 경우가 있을 모두 읽 html javascript 을 이해하는 역동적인 동작이 있습니다.

나 개인적인 기본 설정을 사용하는 것입 jQuery 에서 외부 js 파일 그래서 js 에서 완전히 분리 html.Javascript 있어야 눈에 띄지 않게 인라인(예,첫 번째 예에서)정말 최선의 선택에 내 의견입니다.을 찾을 때에는 html,유일한 로그인을 사용하고 있는 js 해야 스크립트가 포함됩니다.

예를 들어의 연결(취급)이벤트이 같은 것이 있을 수도 있습니다

var myObject = {

    allLinkElements: null,  

    init: function()
    {
        // Set all the elements we need
        myObject.setElements();

        // Set event handlers for elements
        myObject.setEventHandlers();
    },

    clickedLink: function()
    {
        // Handle the click event
        alert('you clicked a link');
    },

    setElements: function()
    {
        // Find all <a> tags on the page
        myObject.allLinkElements = $('a');

        // Find other elements...
    },

    setEventHandlers: function()
    {
        // Loop through each link
        myObject.allLinkElements.each(function(id)
        {   
            // Assign the handler for the click event
            $(this).click(myObject.clickedLink);
        });

        // Assign handlers for other elements...
    }
}

// Wait for the DOM to be ready before initialising
$(document).ready(myObject.init);

내가 생각하는 이 방법이 유용한 유지하려면 모든 js 조직으로 사용할 수 있는 특정 개체 작업에 대한 모든 것이 잘 포함되어 있습니다.

물론,거대한의 이익을 시키는 jQuery(또는 다른 잘 알려진 라이브러리)하는 노력은 크로스 브라우저 지원(주)의 삶을 훨씬 더 쉽

같은 라이브러리 알고 jQuery 방법을 제공하여 이벤트를 추가 단 한 번 DOM 은 준비가 될 수 있는 전에 창입니다.onload.그들은 또한 확인할 수 있는 여러 이벤트 핸들러를 추가할 수 있도록 스크립트를 사용하여 서로 다른 소스에서없이 다양한 이벤트를 핸들러를 덮어쓰다.

그래서 당신의 실질적인 선택이 있다;

하나입니다.는 경우 스크립트는 간단하고 하나는 것이 이제까지 실행에 페이지를 만들이 초기화 함수를 다음과 같이

window.onload = function () {
    init();
}
function init() {
    // actual function calls go here
    doFoo();
}

두.이 있는 경우 많은 스크립트 또는 계획을 mashup 스크립트는 서로 다른 소스에서 라이브러리를 사용하고 onDOMReady 방법을 안전하게 추가 당신의 이벤트 처리기

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top