JQuery:왜 겸손한 자바 스크립트/문서 준비 기능보다는 OnClick 이벤트?

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

문제

나는 단지를 찾기 시작했 JQuery.이 없어요 아약스에서 웹 응용 프로그램에서 존재합니다.

기존에 자바스크립트 내 HTML 처럼 보인:

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

이 표시 버튼[Add]와[찾].을 위해 그것을 찾을 필요한 양식을 제출하는,그리고 내가 사용하는 MyFormSubmit()유효성을 검사하는 데이터를 추가한 시각적 효과 페이지,다음 게시물이다.

추 클래스 또는 ID 를 찾을 버튼을에서 JQuery 내가 쓸 수 있는 다음과 같습니다.

$(function() {
  $(".MySearchButtonClass").click(function() {
    // validate and process form here
  });
});

에서 나자 단계의 이해 와이지 을 얻 왜 이 방법

나의 옛날 방식으로 식별하는 방법을 근처 개체입니다.위험이 있을 수 있습니다.JS 하지 않은로드되기 전에 사용자가 버튼을 누른(입니까?부하 JS 은 바로 페이지 상단의).

JQuery 문서 준비를 방지 않을 것이 활성화될 때까지 문서로드(나는 가정 보장 JS 은 모든 존재하고 실행할 준비가 완료?), 하지만 그것은 이동하는 코드를 분리되는 부분의 내 HTML 파일 그래서 내가 볼 때 MyButtonArray DIV HTML 소스에서 명확하지 않을 나는 객체는 방법,그리고는 하지 않습니다.

할 수 있는 바를 이해하는 데 도움이 되는 어떤 옵션은 장점/문제점이 내가 해야 하는가?

편집:내가 편안하는 DOM 조작과 같은 라이트 박스에 표시할 수 있는 경우 모든 축소판 클래스"LightBoxThumb"클릭-사용하는 것이 겸손한 자바 스크립트.

그러나 나는 설득하는 데 어려움을 겪고 자신을 버튼이 있는 특정 조치가 있어야의 방법을 적용하는 방법입니다.(나는 확실히지 않겠다고 코드 버튼을 이외의 함수 호출하는 무언가를"다른 곳",하지만 내 마음은 내 최고의 단서가 무엇을 하는지,그리고 계층의 눈에 거슬리지 Javascript 만들 수 있다는 훨씬 어렵게 결정합니다.)

Edit2-받아들이 대답

나는 러스 캠 대답이다.설명 눈에 거슬리지에서 자바스크립트는 방법으로 도움이되었습니다 나 이해하는 방법에 대해 자세히&때 사용해야 합니다.

에 대한 순간(변경될 수 있습할 때 나는 더 많은 경험!) 나는 OnClick 이벤트에 대한 단 하나,비 변경,작업체는 느낌이 나는 것입니다 쉽게 디버깅하고 진단하는 경우 문제가 발생합니다.에 대한 ZebraStripes 테이블에 있는 를 클릭 표제 열렬(의 상황과는 유형)나는 이득을 볼 수 있의 눈에 거슬리지 Javascript 접근법

러스의 마지막 의견 특히 도움이,반복 여기:

"@크리스틴-당신이 바로,다음과 같이 많이 프로그래밍의 주제가상 하나 이상의 접근과 사람들 격렬하게 대해서 그들의 믿음이 있음을 증명합니다.는 경우 우리가 얘기하는 하나의 방법 을 위한 버튼 하나로,저는 완전히 이해 당신은 어디에서 나오는...

만약 우리가 얘기를 많이 자바스크립트,함께 같은 함수 호출 하나 이상의 요소,다른 함수 호출에 대한 다른 방법 etc.내가 생각하는 것이 더 어려운 자기 자신을 위해 혼합하는 인라인 고 눈에 거슬리지에 접근,그리고 더 나은 것 중 하나를 채택하거나 다른 방법"

도움이 되었습니까?

해결책

눈에 거슬리지 JavaScript 메인 드라이버를 분리하기 위한 JS 코드는 태그

  • 의 분리 기능(이하"행동층")에서 웹 페이지의
    구조/콘텐츠 및 프레젠테이션
  • 모범 사례의 문제를 피하기 위해 전통적인 JavaScript 프로그래밍(와 같은 브라우저 불일치의 부족 확장성)
  • 진보적인 향상을 지원하는 사용자 에이전트를 지원하지 않을 수 있습니다
    자바스크립트 고급 기능

코드에서 문서입니다.준비하지 않습니다,실행될 때까지 DOM 가 로드되기 전에 페이지 내용을 로드

서 학습 jQuery

과$(document).준비()을 얻을 수있는,당신의 이벤트를 로드하거나 화재나 당신이 그들을 원하는지기 전에 창이 표시됩니다.

할 수 있는 살펴보 jQuery 에서 활동, 에,나는 그것을 권장합니다.할 수 있습 샘플 제 1 장 고 제 5 장 에 책의 홈페이지.내 생각에 이렇게 제공할 수 있습한 통찰력을 왜 분리 작업할 수 있습니다.

마지막으로 봐야 이 질문 는 답변 자세히 어떻게 당신이 찾을 수 있는 이벤트에 청취자 DOM 노드입니다.

편집:

일부 생각할 수 있는 설득 당신은 왜 눈에 거슬리지 JavaScript 할 수 있는 좋은 생각이 아니다.

상상이 있는 기능밖에 없으로 이벤트를 처리기한 동일한 이벤트에 올리는 각각의 번호의 요소

  • 그것은 쉽게 찾을 수 있는 요소는 전화를 처리하는 기능 이벤트 경 선언 인라인 각 요소에,또는 선언 가 한 곳에서,외부 태그?

  • 무엇을 원하는 경우 추가 는 요소화 하는 기능 때 이벤트가 발생에 그들 각각은?는 것이 더 쉽/더 추가 이벤트 처리기 인라인하는 각 요소 또는 코드에서 변경 하는가?

다른 팁

문서 준비 이벤트이기 전에 문서 부하의 이벤트입니다.문서 준비되어 발생하면 DOM 로드하는 그래서 모든 요소가 존재하기 전에 당신은 그들에 대한 작업을 시작했다.

그래서 예 JS 것이 준비되어 있으로 문서를 렌더링됩니다.다른 지점에 대한 바인딩은 그것이 유용한 변경에 대한 바인딩을 할 때 요소를 cetain 조치가 발생합니다.

당신은 여전히 선언하고 조치 요소에서 만약 당신이아보세요 하지만입니다.

시간이 나는 당신을 얻을하는 데 사용 jQuery 구문을 읽기:

class="MyFormSubmit"으로 된 유익한 읽을 거리로 onClick="return MyFormSubmit();

전원이 정말로 시작하 킥(제외하고 모든 혜택의 다른 포스터)는 쉽게 변경할 수 있습 onClick 바인딩을 통해 선택에 묶여 다른 작업에 웹 페이지에서는 방법을 결코 보이지 않는 존재 자신이 처음입니다.

질문 하나가 나 자신에게는 얼마나 깊이 내 계획에 새로운 도구와,면 나는 계획을 광범위하게 사용하는 프레임워크 또는 라이브러리의 다 쓰는 코드에서"더 네이티브"코드 스타일이 될 것이다 많은 자연적이고 다른 개발자들이 알고 있는 도구를 찾을 수 있는 코드는 많은 깨끗하고 이해할 수 있습니다.

당신이 그것을 이 방법은 별도의 UI 논리에서 실제 HTML 디자인이다.

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