자바스크립트 이벤트 바인딩(js가 지원되지 않을 때 편리)

우선, 예를 들어 우리는 웹 페이지를 향상시키기 위해 JavaScript를 사용하지만, 사용자의 브라우저가 JavaScript를 지원하지 않거나 사용자가 JavaScript 기능을 비활성화한 경우 웹 페이지가 정상적으로 표시될 수 있는지 고려해야 합니다. ? 예를 들어, 다음 예시는

코드 복사 코드는 다음과 같습니다.

팝업 기능은 사용자 정의되었으며 URL의 웹 페이지를 제한하기 위해 새 창을 엽니다. 하지만 클라이언트가 이를 지원하지 않으면 웹페이지가 제대로 작동하지 않습니다. 따라서 이 방법을 사용할 때 우리도 더 많은 것을 고려해야 하며, 다음 코드를 사용하는 것이 더 적절할 것입니다.

코드 복사 코드는 다음과 같습니다.

그런 다음 저자는 CSS를 예로 들어 설명합니다. CSS를 사용하는 과정에서 CSS 파일을 로드하기 위해 를 사용한 것 외에는 웹페이지 콘텐츠에 CSS 관련 코드를 추가하지 않아 구조가 잘 통합될 수 있다는 사실을 발견했습니다. . 스타일과 분리되어 있습니다. 즉, CSS 코드가 메인 코드를 침범하지 않습니다. 이런 방식으로 클라이언트가 CSS를 모르더라도 우리의 주요 콘텐츠 고객은 이를 볼 수 있고 우리의 콘텐츠 구조도 고객에게 표시될 수 있습니다. 따라서 JavaScript는 동작 계층과 동일하고 CSS는 프리젠테이션 계층과 동일합니다. JavaScript는 CSS만큼 방해가 되지 않을 수도 있습니다. 아래는 책에 나온 예시입니다.

코드 복사 코드는 다음과 같습니다.

위 코드를 사용하면 클라이언트가 JavaScript를 지원하지 않는 경우에도 정상적으로 작동할 수 있지만 onclick과 같은 이벤트 핸들러가 위 코드에 나타납니다. 이제 우리는 CSS와 같은 방법을 사용하여 원하는 기능을 완성합니다. 다음과 같습니다:

코드 복사 코드는 다음과 같습니다.

이런 식으로 페이지가 로드되면 window.onload를 실행하여 어떤 가 클래스를 사용하는지 감지한 다음 팝업 메서드를 균일하게 사용할 수 있습니다. 다음 코드

코드 복사 코드는 다음과 같습니다.

varlinks=document.getElementsByTagName("a "); 
for (var i=0 ; i if (links[i].getAttribute("class") == "popup") {
 링크[ i].onclick = function() {
 popUp(this.getAttribute("href")); //주의하세요. 왜냐하면 이것은 onClick = "popUp(this.href)"
과 같기 때문입니다. //그래서 링크를 사용할 수 없습니다[i].
 return false;
 }
 }
}

이렇게 하면 HTML 코드에 대한 침입이 줄어듭니다.

마지막으로 저자는 이전 버전과의 호환성을 달성하고 JavaScript를 최소화해야 할 필요성에 대해 이야기했습니다. 이전 버전과의 호환성을 위해 if(document.getElementById)와 같은 것을 사용하여 이 메서드가 존재하는지 테스트할 수 있으며, 존재하는 경우에만 사용할 수 있습니다. JavaScript 코드를 최소화하는 것은 주로 JavaScript를 줄여 웹 페이지 로딩 속도를 높이는 것입니다.

다음으로, 책을 읽으면서 이해하지 못한 문제에 직면하게 되었는데, 새우들이 그 문제를 해결하는 데 도움이 되었으면 좋겠습니다.

저자별 최신 기사