자바스크립트 클릭 이벤트. 자바스크립트의 간단한 onclick 예제

현재 위치: 3-NDFL

일부 JavaScript 이벤트 프로그램은 사용자 입력으로 직접 작동합니다. 이러한 상호작용의 발생 순간과 순서는 미리 예측할 수 없습니다.

이벤트 핸들러

키를 다시 놓기 전에 키를 누르는 순간을 파악하기 위해 계속해서 상태를 읽어 키 누름에 반응할 수 있습니다.

이것이 원시 기계에서 데이터 입력이 처리되는 방식입니다. 더 발전된 방법은 키 입력을 감지하고 이를 대기열에 추가하는 것입니다. 그런 다음 프로그램은 주기적으로 새 이벤트의 대기열을 확인하고 거기에서 발견된 내용에 반응할 수 있습니다. 이 경우 프로그램은 대기열을 스캔하는 것을 기억하고 자주 스캔해야 합니다.

프로그램이 이 이벤트를 감지할 때까지 키를 누르는 동안에는 실제로 요청에 응답하지 않습니다. 이 접근법을 폴링(설문조사)이라고 합니다.

대부분의 프로그래머는 가능하면 이를 피하려고 합니다.

가장 좋은 방법은 이벤트가 발생할 때 코드에 반응할 수 있는 기능을 제공하는 시스템을 구현하는 것입니다. 브라우저는 특정 JavaScript 이벤트에 대한 핸들러 함수를 등록하는 기능을 제공하여 이를 구현합니다.

핸들러를 활성화하려면 이 문서를 클릭하세요.

addEventListener("click", function() ( console.log("클릭했습니다!"); ));

addEventListener 함수는 첫 번째 인수에서 설명하는 이벤트가 발생할 때마다 두 번째 인수가 호출되도록 등록됩니다.

이벤트 및 DOM 노드

각 브라우저 이벤트 핸들러는 컨텍스트에 등록됩니다. addEventListener 함수가 호출되면 전체 창에 대한 메서드로 호출됩니다. 브라우저에서 전역 범위는 창 개체와 동일하기 때문입니다. 각 DOM 요소에는 고유한 addEventListener 메소드가 있으며, 이를 통해 해당 요소에 대한 이벤트를 구체적으로 수신할 수 있습니다.

나를 클릭하세요

여기에는 핸들러가 없습니다.

var 버튼 = document.querySelector("버튼"); Button.addEventListener("click", function() ( console.log("버튼이 클릭되었습니다."); ));

이 예에서 핸들러는 버튼 노드에 연결됩니다. JavaScript 마우스 이벤트는 핸들러를 실행하지만 문서의 나머지 부분을 클릭하면 핸들러가 실행되지 않습니다.

노드의 onclick 속성을 설정하면 동일한 결과를 얻을 수 있습니다. 하지만 노드에는 onclick 속성이 하나만 있으므로 노드당 하나의 핸들러만 등록할 수 있습니다. addEventListener 메소드를 사용하면 핸들러를 원하는 만큼 추가할 수 있습니다. 이렇게 하면 이미 등록된 프로세서를 실수로 교체하는 일이 발생하지 않도록 보장됩니다.

RemoveEventListener 메소드는 addEventListener와 유사한 인수를 사용하여 호출됩니다. 핸들러를 제거합니다.

일회용 버튼 var 버튼 = document.querySelector("button"); function Once() ( console.log("완료."); 버튼.removeEventListener("클릭", 한 번); ) 버튼.addEventListener("클릭", 한 번);

핸들러 함수를 취소하려면 이름을 지정합니다(예: Once ). 따라서 이를 addEventListener와 RemoveEventListener 모두에 전달합니다.

이벤트 객체

위의 예에서는 언급하지 않았지만 JavaScript 이벤트 핸들러 함수에는 이벤트 객체라는 인수가 전달됩니다. 이벤트에 대한 추가 정보를 제공합니다. 예를 들어, 어떤 마우스 키가 눌렸는지 알고 싶다면 which 이벤트 객체 속성의 값을 가져와야 합니다.

마우스 키로 나를 클릭하십시오. var Button = document.querySelector("button"); Button.addEventListener("mousedown", function(event) ( if (event.which == 1) console.log("왼쪽 버튼"); else if (event.which == 2) console.log("가운데 버튼" ); else if (event.which == 3) console.log("오른쪽 버튼"); ));

객체에 저장되는 정보는 이벤트 유형에 따라 달라집니다. 객체의 유형 속성에는 항상 이벤트를 식별하는 문자열(예: "click" 또는 "mousedown")이 포함됩니다.

확산

상위 노드에 등록된 이벤트 핸들러(예: JavaScript 터치 이벤트)는 하위 요소에서 발생하는 이벤트도 수신합니다. 단락 내의 버튼을 클릭하면 단락의 이벤트 핸들러도 클릭 이벤트를 수신합니다.

이벤트는 발생한 노드에서 상위 노드, 문서 루트로 전파됩니다. 특정 노드에 등록된 모든 핸들러가 차례로 작업을 수행한 후 전체 창에 등록된 핸들러가 해당 이벤트에 응답할 수 있습니다.

언제든지 이벤트 핸들러는 이벤트 객체에서 stopPropagation 메서드를 호출하여 이벤트가 더 이상 전파되는 것을 방지할 수 있습니다. 이는 다른 대화형 요소 내부에 버튼이 있고 버튼을 클릭하여 외부 요소를 클릭하도록 정의된 동작을 트리거하고 싶지 않을 때 유용할 수 있습니다.

다음 예제에서는 버튼과 단락 모두에 대해 "MouseDown" 핸들러를 등록합니다. 마우스 오른쪽 버튼을 클릭하면(JavaScript 마우스 이벤트) 핸들러가 stopPropagation 메서드를 호출하여 단락 핸들러가 실행되지 않도록 합니다. 다른 마우스 키로 버튼을 클릭하면 두 핸들러가 모두 실행됩니다.

그 안에 단락과 버튼이 있습니다.

var para = document.querySelector("p"); var 버튼 = document.querySelector("버튼"); para.addEventListener("mousedown", function() ( console.log("단락 처리기."); )); 버튼.addEventListener("mousedown", function(event) ( console.log("버튼 처리기."); if (event.which == 3) event.stopPropagation(); ));

대부분의 이벤트 객체에는 이벤트가 발생한 노드를 가리키는 대상 속성이 있습니다. 이 속성을 사용하면 노드에서 전파되는 일부 이벤트를 실수로 처리하는 것을 방지할 수 있습니다.

JavaScript 이벤트 대상을 사용하여 특정 유형의 이벤트 범위를 확장할 수도 있습니다. 예를 들어, 긴 버튼 목록이 포함된 노드가 있는 경우 모든 버튼에 대한 핸들러 인스턴스를 등록하는 것보다 외부 노드에 대해 하나의 클릭 핸들러를 등록하고 대상 속성을 사용하여 버튼이 클릭되었는지 추적하는 것이 더 편리합니다.

A B C document.body.addEventListener("click", function(event) ( if (event.target.nodeName == "BUTTON") console.log("Clicked", event.target.textContent); ));

기본 작업

많은 이벤트에는 이와 관련된 기본 작업이 있습니다. 링크를 클릭하면 링크의 대상 요소로 이동합니다. 아래쪽 화살표를 클릭하면 브라우저가 페이지를 아래로 스크롤합니다. 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴가 열립니다.

대부분의 이벤트 유형의 경우 기본 작업이 수행되기 전에 JavaScript 이벤트 핸들러가 호출됩니다. 기본 동작이 발생하지 않도록 하려면 이벤트 객체에서 PreventDefault 메서드를 호출해야 합니다.

이를 사용하여 사용자 정의 키보드 단축키 또는 상황에 맞는 메뉴를 구현합니다. 또는 사용자가 기대하는 동작을 재정의합니다. 아래는 따라갈 수 없는 링크입니다.

MDN var link = document.querySelector("a"); link.addEventListener("클릭", function(event) ( console.log("아니요."); event.preventDefault(); ));

그렇게 할 타당한 이유가 없는 한 이렇게 하지 마십시오.

브라우저에 따라 일부 이벤트를 가로채지 못할 수도 있습니다. 예를 들어 Google Chrome에서는 현재 탭을 닫는 키보드 단축키(JavaScript 이벤트 키코드)(Ctrl-W 또는 Command-W)를 JavaScript를 사용하여 처리할 수 없습니다.

중요 행사들

사용자가 키보드의 키를 누르면 브라우저는 "keydown" 이벤트를 발생시킵니다. 그가 키를 놓으면 "keyup" 이벤트가 발생합니다:

V 키를 누르면 이 페이지가 보라색으로 변합니다.

addEventListener("keydown", function(event) ( if (event.keyCode == 86) document.body.style.Background = "violet"; )); addEventListener("keyup", function(event) ( if (event.keyCode == 86) document.body.style.Background = ""; ));

이 이벤트는 사용자가 키를 길게 누르거나 키를 누르고 있는 경우에도 발생합니다. 예를 들어, 게임 내 캐릭터의 화살표 키를 눌러 속도를 높이고, 키를 놓으면 다시 속도를 낮추고 싶다면, 키를 누를 때마다 속도가 빨라지지 않도록 주의해야 합니다.

이전 예에서는 이벤트 객체의 키코드 JavaScript 속성을 사용했습니다. 이를 통해 어떤 키를 누르거나 놓았는지 확인됩니다. 키의 숫자 코드를 실제 키로 변환하는 방법이 항상 명확한 것은 아닙니다.

유니코드 문자 코드는 문자 및 숫자 키 값을 읽는 데 사용됩니다. 키에 표시된 문자(대문자) 또는 숫자와 연결됩니다. 문자열에 대한 charCodeAt 메서드를 사용하면 다음 값을 얻을 수 있습니다.

console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

다른 키에는 예측하기 어려운 키 코드가 연결되어 있습니다. 필요한 코드를 결정하는 가장 좋은 방법은 실험해 보는 것입니다. 수신한 키코드를 캡처하고 원하는 키를 누르는 키 누르기 이벤트 핸들러를 등록합니다.

Shift , Ctrl , Alt 와 같은 키는 일반 키와 같은 이벤트를 생성합니다. 그러나 키 조합을 추적할 때 키보드 이벤트 및 JavaScript 마우스 이벤트(shiftKey , ctrlKey , altKey 및 MetaKey )의 속성에 의해 해당 키가 눌렸는지 여부도 확인할 수 있습니다.

계속하려면 Ctrl-Space를 누르세요.

addEventListener("keydown", function(event) ( if (event.keyCode == 32 && event.ctrlKey) console.log("계속!"); ));

"keydown" 및 "keyup" 이벤트는 실제 키 누르기에 대한 정보를 제공합니다. 하지만 입력 텍스트 자체가 필요한 경우에는 어떻게 해야 할까요? 키코드에서 텍스트를 검색하는 것은 불편합니다. "keydown" 직후에 실행되는 "keypress"라는 이벤트가 있습니다. 키를 누르고 있는 동안 "keydown"과 함께 반복됩니다. 그러나 문자를 입력하는 키에만 해당됩니다.

이벤트 객체의 charCode 속성에는 유니코드 문자 코드로 해석될 수 있는 코드가 포함되어 있습니다. String.fromCharCode 함수를 사용하여 이 코드를 단일 문자열로 변환할 수 있습니다.

입력 포커스를 이 페이지로 설정하고 무언가를 입력하세요.

addEventListener("keypress", function(event) ( console.log(String.fromCharCode(event.charCode)); ));

이벤트가 발생하는 DOM 노드는 키를 눌렀을 때 입력 포커스가 있었던 요소에 따라 다릅니다. 일반 노드는 입력 포커스를 가질 수 없지만(tabindex 속성을 설정하지 않는 한) 링크, 버튼, 양식 필드와 같은 요소는 가능합니다.

특정 요소에 입력 포커스가 없으면 키 이벤트 및 JavaScript 터치 이벤트의 대상 노드는 document.body 입니다.

마우스 클릭

마우스 버튼을 누르면 일련의 이벤트도 트리거됩니다. "mousedown" 및 "mouseup" 이벤트는 "keydown" 및 "keyup" 이벤트와 유사합니다. 마우스 버튼을 눌렀다 놓을 때 트리거됩니다. 이러한 이벤트는 이벤트가 발생할 때 마우스를 올려놓은 DOM 노드에서 발생합니다.

마우스 누르기와 놓기가 모두 있는 공유 노드의 경우 click 이벤트는 mouseup 이벤트 후에 발생합니다. 예를 들어, 한 항목에서 마우스 버튼을 누른 다음 커서를 다른 항목으로 이동하고 버튼을 놓으면 두 항목이 모두 포함된 요소에서 클릭 이벤트가 발생합니다.

두 번의 클릭이 서로 가깝게 발생하면 "dblclick"(더블 클릭) 이벤트도 시작됩니다. 두 번째 클릭 후에 나타납니다. 마우스 이벤트가 발생한 위치에 대한 정확한 정보를 얻으려면 문서의 왼쪽 상단을 기준으로 한 이벤트 좌표(픽셀 단위)가 포함된 pageX 및 pageY 속성의 값을 가져와야 합니다.

다음은 기본 그리기 프로그램의 구현입니다. 문서(커서 아래)에서 마우스를 클릭할 때마다 점이 추가됩니다.

body( 높이: 200px; 배경: 베이지색; ) .dot( 높이: 8px; 너비: 8px; border-radius: 4px; /* 둥근 모서리 */ 배경: 파란색; 위치: 절대; ) addEventListener("클릭", 함수 (이벤트) ( var dot = document.createElement("div"); dot.className = "dot"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (이벤트 .pageY - 4) + "px"; document.body.appendChild(dot); ));

clientX 및 clientY 속성은 pageX 및 pageY와 유사하지만 문서의 표시되는 부분과 관련됩니다. 마우스 좌표를 getBoundingClientRect 함수에서 반환된 좌표와 비교하는 데 사용할 수 있습니다.

마우스 움직임

마우스가 움직일 때마다 JavaScript 마우스 이벤트 세트의 "mousemove" 이벤트가 실행됩니다. 마우스 위치를 추적하는 데 사용할 수 있습니다. 이는 마우스로 요소를 드래그하는 기능을 구현할 때 사용됩니다.

다음 예에서 프로그램은 패널을 표시하고 드래그할 때 패널이 더 좁아지거나 넓어지도록 이벤트 핸들러를 설정합니다.

패널의 가장자리를 드래그하여 너비를 변경합니다.

var lastX; // 마우스의 마지막 X 위치를 추적합니다. var ect = document.querySelector("div"); ract.addEventListener("mousedown", function(event) ( if (event.which == 1) ( lastX = event.pageX; addEventListener("mousemove", Moved); event.preventDefault(); // 선택 방지 ) ) ); function buttonPressed(event) ( if (event.buttons == null) return event.which != 0; else return event.buttons != 0; ) function move(event) ( if (!buttonPressed(event)) ( RemoveEventListener( "mousemove", 이동됨); ) else ( var dist = event.pageX - lastX; var newWidth = Math.max(10, ret.offsetWidth + dist); ret.style.width = newWidth + "px"; lastX = 이벤트 .pageX; ) )

"mousemove" 핸들러는 전체 창에 대해 등록됩니다. 크기를 조정하는 동안 마우스가 패널 밖으로 이동하더라도 우리는 여전히 패널의 너비를 업데이트하고 마우스 키를 놓으면 JavaScript 터치 이벤트를 종료합니다.

사용자가 마우스 버튼을 놓으면 패널 크기 조정을 중지해야 합니다. 불행하게도 모든 브라우저가 mousemove 이벤트에 대해 which 속성을 설정하는 것은 아닙니다. 유사한 정보를 제공하는 표준 버튼 속성이 있지만 일부 브라우저에서도 지원되지 않습니다. 운 좋게도 모든 주요 브라우저는 버튼 또는 which 중 하나를 지원합니다. 위 예제의 ButtonPressed 함수는 먼저 버튼 속성을 사용하려고 시도하고, 사용할 수 없는 경우 which 로 이동합니다.

마우스 커서가 노드 위로 이동하거나 노드를 떠나면 "mouseover" 또는 "mouseout" 이벤트가 시작됩니다. 호버 효과를 생성하거나 캡션을 표시하거나 요소의 스타일을 변경하는 데 사용할 수 있습니다.

이러한 효과를 생성하려면 단순히 mouseover 이벤트가 발생할 때 표시를 시작하고 mouseout 이벤트 후에 종료하는 것만으로는 충분하지 않습니다. 마우스가 노드에서 하위 노드 중 하나로 이동하면 상위 노드에 대해 "mouseout" 이벤트가 발생합니다. 마우스 포인터가 노드의 확산 범위를 벗어나지 않았지만.

설상가상으로 이러한 JavaScript 이벤트는 다른 이벤트와 마찬가지로 전파됩니다. 마우스가 핸들러가 등록된 하위 노드 중 하나를 떠나면 "mouseout" 이벤트가 발생합니다.

이 문제를 해결하려면 관련 타겟 이벤트 개체 속성을 사용하면 됩니다. "mouseover" 이벤트가 발생하면 이전에 어떤 요소 위에 마우스를 올렸는지 나타냅니다. 그리고 "마우스아웃"이 발생하는 경우 포인터가 어느 요소로 이동되나요? 관련 타겟이 타겟 노드 밖에 있을 때만 마우스오버 효과를 변경하겠습니다.

이 경우 마우스가 노드 외부에서 노드 위로 이동했기 때문에(또는 그 반대) 동작을 변경합니다.

이 단락 위에 마우스를 올려보세요.

var para = document.querySelector("p"); function isInside(node, target) ( for (; node != null; node = node.parentNode) if (node == target) return true; ) para.addEventListener("mouseover", function(event) ( if ( !isInside (event.관련Target, para)) para.style.color = "red"; )); para.addEventListener("mouseout", function(event) ( if (!isInside(event.관련Target, para)) para.style.color = ""; ));

isInside 함수는 특정 노드의 상위 링크를 추적하거나 문서 상단에 도달할 때까지(노드가 null인 경우) 추적합니다. 아니면 필요한 상위 요소를 찾을 수 없습니다.

다음 예제와 같이 CSS:hover 의사 선택기를 사용하면 호버 효과를 훨씬 쉽게 만들 수 있습니다. 그러나 호버 효과가 대상 노드의 스타일을 변경하는 것보다 더 복잡한 것과 관련된 경우에는 mouseover 및 mouseout 이벤트(JavaScript 마우스 이벤트)를 사용하는 트릭을 사용해야 합니다.

스크롤 이벤트

요소가 스크롤될 때마다 JavaScript 스크롤 이벤트가 해당 요소에서 시작됩니다. 사용자가 현재 보고 있는 내용을 추적하는 데 사용할 수 있습니다. 뷰포트 외부에 있는 애니메이션을 비활성화합니다.

다음 예에서는 문서의 오른쪽 상단에 진행률 표시줄을 표시하고 페이지를 아래로 스크롤할 때마다 다른 색상으로 채워지도록 업데이트합니다.

.progress ( 테두리: 1px 단색 파란색; 너비: 100px; 위치: 고정; 위쪽: 10px; 오른쪽: 10px; ) .progress > div ( 높이: 12px; 배경: 파란색; 너비: 0%; ) 본문 ( 높이: 2000px ; )

스크롤해주세요...

var bar = document.querySelector(".progress div"); addEventListener("scroll", function() ( var max = document.body.scrollHeight - innerHeight; var 퍼센트 = (pageYOffset / max) * 100; bar.style.width = 퍼센트 + "%"; ));

요소의 위치나 고정 속성을 설정하면 position:absolute 를 설정한 것과 동일한 결과를 얻습니다. 그러나 이렇게 하면 요소가 문서의 나머지 부분과 함께 스크롤되지 않도록 잠깁니다. 결과적으로 진행률 표시기가 상단 모서리에 정적으로 고정됩니다. 그 안에는 현재 진행 상황에 따라 크기가 변경되는 또 다른 요소가 있습니다.

너비를 설정할 때 측정 단위로 px가 아닌 %를 사용하므로 요소의 크기는 진행률 표시줄의 크기에 비례하여 변경됩니다.

전역 변수 innerHeight에는 창의 높이가 포함되어 있으며, 문서의 스크롤 가능한 전체 높이에서 이 높이를 빼야 합니다. 문서 맨 아래에 도달하면 창을 아래로 스크롤할 수 없습니다. innerHeight를 사용하면 innerWidth도 사용할 수 있습니다. pageYOffset(현재 스크롤 상자 위치)을 최대 허용 스크롤 위치로 나누고 100을 곱하면 진행률 표시줄의 백분율이 제공됩니다.

JavaScript 스크롤 이벤트에서 PreventDefault를 호출해도 스크롤이 방지되지 않습니다. 이벤트 핸들러는 스크롤이 발생한 후에만 호출됩니다.

입력 포커스 이벤트

요소에 입력 포커스가 있으면 브라우저는 해당 요소에 대해 "포커스" 이벤트를 발생시킵니다. 입력 포커스가 제거되면 "blur" 이벤트가 시작됩니다.

이 두 가지 사건은 확산되지 않습니다. 하위 요소에 입력 포커스가 있을 때 상위 요소 핸들러는 알림을 받지 않습니다.

다음 예에서는 현재 입력 포커스가 있는 텍스트 필드에 대한 도구 설명을 표시합니다.

이름:

나이:

창 개체는 사용자가 문서가 표시되는 브라우저 창인 탭을 탐색하거나 탭을 떠날 때 "포커스" 및 "흐림" 이벤트를 수신합니다.

이벤트 로드

페이지 로드가 완료되면 문서 본문 및 창 개체에 대해 JavaScript 이벤트 "load"가 발생합니다. 전체 문서를 로드해야 하는 작업의 초기화를 예약하는 데 사용됩니다. 이 태그가 발견되면 콘텐츠가 즉시 실행된다는 점을 잊지 마세요. 때로는 너무 이르다. 예를 들어 스크립트가 .

외부 파일을 로드하는 스크립트 태그에도 "load" 이벤트가 포함되어 있습니다. 이는 해당 파일과 관련된 파일이 다운로드되었음을 나타냅니다. 입력 포커스 이벤트와 마찬가지로 로드 이벤트도 전파되지 않습니다.

페이지를 닫거나 다른 페이지로 이동할 때(예: 링크 클릭) “beforeunload” 이벤트가 시작됩니다. 사용자가 문서를 닫은 후 작업 중이던 내용을 실수로 잃어버리는 것을 방지하는 데 사용됩니다.

페이지 언로드 방지는 PreventDefault 메소드를 사용하여 수행되지 않습니다. 대신 처리기에서 문자열이 반환됩니다. 사용자에게 페이지에 머물 것인지 아니면 떠날 것인지 묻는 대화 상자에서 사용됩니다. 이 메커니즘은 악성 스크립트가 실행 중이더라도 사용자가 페이지를 떠날 수 있는 기회를 보장합니다. 그 목적은 방문자를 페이지에 머물게 하는 것입니다.

스크립트 실행 순서

태그 읽기, 이벤트 발생 등 다양한 요인이 스크립트 실행을 트리거할 수 있습니다. requestAnimationFrame 메서드는 다음 페이지가 다시 렌더링되기 전에 함수 호출을 지정합니다. 이는 스크립트를 실행할 수 있는 또 다른 방법입니다.

JavaScript 선택 이벤트 및 기타 모든 이벤트는 언제든지 실행될 수 있지만 두 스크립트는 동일한 문서에서 동시에 실행되지 않습니다. 스크립트가 이미 실행 중인 경우 다른 스크립트에 의해 예약된 이벤트 핸들러와 코드 조각은 차례를 기다려야 합니다. 스크립트를 오랫동안 실행하면 문서가 멈추는 이유도 바로 여기에 있습니다. 브라우저는 현재 스크립트 실행이 완료될 때까지 이벤트 핸들러를 실행할 수 없기 때문에 클릭 및 기타 이벤트에 응답하지 않습니다.

일부 프로그래밍 환경에서는 동시에 실행되는 여러 실행 스레드를 생성할 수 있습니다. 여러 작업을 동시에 수행할 수 있는 기능을 제공함으로써 프로그램 실행 속도를 높일 수 있습니다. 그러나 시스템의 동일한 부분에 동시에 영향을 미치는 여러 작업이 있으면 프로그램이 해당 작업을 수행하기가 더 어려워집니다.

페이지를 정지하지 않고 백그라운드에서 프로세스를 실행해야 하는 경우 브라우저는 웹 작업자라는 기능을 제공합니다. 이는 기본 프로그램과 함께 문서에서 실행되며 메시지를 주고받는 방식으로만 통신할 수 있는 JavaScript 샌드박스입니다.

code/squareworker.js라는 파일에 다음 코드가 있다고 가정해 보겠습니다.

addEventListener("message", function(event) ( postMessage(event.data * event.data); ));

제곱하려는 숫자가 매우 크고 계산하는 데 시간이 오래 걸리며 백그라운드 스레드에서 계산을 수행해야 한다고 상상해 보십시오. 이 코드는 웹 작업자를 시작하고 일부 메시지를 보내고 응답을 인쇄합니다.

var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) ( console.log("작업자가 응답했습니다:", event.data); )); squareWorker.postMessage(10); squareWorker.postMessage(24);

postMessage 함수는 수신자에서 메시지 이벤트를 트리거하는 메시지를 보냅니다. 웹 작업자를 생성한 스크립트는 Worker 개체를 통해 메시지를 보내고 받습니다. 이 객체를 사용하여 환경은 이를 생성한 스크립트와 상호 작용하여 원본 스크립트를 사용하여 전역적으로 정보를 보내고 듣습니다.

타이머 설정

setTimeout 함수는 requestAnimationFrame과 유사합니다. 나중에 호출될 다른 함수를 호출합니다. 그러나 다음에 페이지가 렌더링될 때 함수를 호출하는 대신 특정 시간(밀리초)을 기다립니다. 이 JavaScript 이벤트 예제에서는 페이지 배경이 2초 후에 파란색에서 노란색으로 변합니다.

document.body.style.Background = "파란색"; setTimeout(function() ( document.body.style.Background = "yellow"; ), 2000);

때때로 우리는 계획했던 기능을 취소해야 할 때가 있습니다. 이는 setTimeout의 반환 값을 저장하고 이에 대해clearTimeout을 호출하여 수행됩니다.

var BombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); if (Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

cancelAnimationFrame 함수는clearTimeout과 동일하게 작동합니다. 프레임을 취소하기 위해 requestAnimationFrame에서 반환된 값에 의해 호출됩니다(아직 호출되지 않은 경우).

유사한 함수 세트인 setInterval 및clearInterval은 X밀리초마다 작업을 반복해야 하는 타이머를 설정하는 데 사용됩니다.

var 틱 = 0; var clock = setInterval(function() ( console.log("tick", 진드기++); if (ticks == 10) (clearInterval(clock); console.log("stop."); ) ), 200);

헤어지는 중

일부 이벤트 유형은 짧은 시간 내에 여러 번 실행될 수 있습니다(예: "mousemove" 및 javascript 스크롤 이벤트). 이러한 이벤트를 처리할 때 시간이 너무 오래 걸리지 않도록 주의해야 합니다. 그렇지 않으면 핸들러가 작업을 수행하는 데 너무 오랜 시간이 걸려 문서와의 상호 작용이 느리고 고르지 않게 됩니다.

그러한 핸들러에서 비표준적인 작업을 수행해야 하는 경우 setTimeout을 사용하여 너무 오래 걸리지 않도록 할 수 있습니다. 이를 일반적으로 이벤트 분할이라고 합니다. 분쇄에는 여러 가지 접근 방식이 있습니다.

첫 번째 예에서는 사용자가 입력하는 동안 작업을 수행하려고 합니다. 하지만 우리는 모든 키 누르기 이벤트 후에 이 작업을 수행하고 싶지 않습니다. 사용자가 빠르게 입력하는 경우 일시 중지될 때까지 기다려야 합니다. 이벤트 핸들러에서 작업을 즉시 실행하는 대신 지연을 설정합니다. 또한 이전 지연(있는 경우)을 지웁니다. 이벤트가 짧은 간격(설정한 지연보다 짧은)으로 발생하면 이전 이벤트의 지연이 취소됩니다.

여기에 뭔가를 입력하세요... var textarea = document.querySelector("textarea"); var 시간 초과; textarea.addEventListener("keydown", function() (clearTimeout(timeout); timeout = setTimeout(function() ( console.log("입력을 중지했습니다."); ), 500); ));

ClearTimeout에 대해 정의되지 않은 값을 전달하거나 이미 실행 중인 지연에 대해 호출하면 아무런 효과가 없습니다. 더 이상 언제 호출할지 신중할 필요가 없으며 모든 이벤트에 대해 호출하면 됩니다.

짧은 시간 동안 답변을 분리해야 하는 경우 다른 스크립트를 사용할 수 있습니다. 그러나 동시에 일련의 이벤트가 진행되는 동안 출시되어야 하며 이벤트 직후가 아닙니다. 예를 들어, mousemove 이벤트(JavaScript 마우스 이벤트)에 대한 응답으로 현재 마우스 좌표를 보낼 수 있지만 매 250밀리초마다만 가능합니다.

function displayCoords(event) ( document.body.textContent = "마우스는 " + event.pageX + ", " + event.pageY; ) var Scheduled = false, lastEvent; addEventListener("mousemove", function(event) ( lastEvent = event; if (!scheduled) ( Scheduled = true; setTimeout(function() ( Scheduled = false; displayCoords(lastEvent); ), 250); ) ));

결론

이벤트 핸들러를 사용하면 직접 제어할 수 없는 이벤트를 감지하고 이에 응답할 수 있습니다. 이러한 핸들러를 등록하려면 addEventListener 메소드를 사용하십시오.

각 이벤트에는 이를 식별하는 특정 유형('keydown', 'focus' 등)이 있습니다. 대부분의 이벤트는 특정 DOM 요소에서 발생한 다음 해당 요소의 상위 노드로 전파됩니다. 이를 통해 이러한 요소와 연결된 핸들러가 해당 요소를 처리할 수 있습니다.

핸들러가 호출되면 작업에 대한 추가 정보가 포함된 이벤트 개체가 전달됩니다. 이 객체에는 이벤트의 추가 전파를 중지하거나(stopPropagation) 기본 브라우저가 이벤트를 처리하지 못하도록 방지하는(preventDefault) 메서드도 포함되어 있습니다.

키 누르기는 "keydown", "keypress" 및 "keyup" 이벤트를 생성합니다. 마우스를 클릭하면 "mousedown", "mouseup" 및 "click" 이벤트가 생성됩니다. 마우스 이동 - "mousemove", "mouseenter" 및 "mouseout".

JavaScript 스크롤 이벤트는 "scroll" 이벤트를 사용하여 정의할 수 있으며, 포커스 변경은 "focus" 및 "blur"를 사용하여 정의할 수 있습니다. 문서 로드가 완료되면 창에 대해 "load" 이벤트가 발생합니다.

JavaScript 프로그램의 한 부분만 한 번에 실행할 수 있습니다. 이벤트 핸들러와 기타 예약된 스크립트는 대기열에 있는 다른 스크립트의 실행이 완료될 때까지 기다려야 합니다.

이 간행물은 친절한 프로젝트 팀이 작성한 "이벤트 처리" 기사를 번역한 것입니다.

마우스 클릭 이벤트 - onclick 속성 및 onclick 속성 - JavaScript의 이벤트 처리

브라우저에서는 어떤 일이 일어나고, 어떤 이벤트가 발생하나요?

또는 "왼쪽 클릭" 및 기타.

Javascript 코드는 이러한 이벤트나 다른 이벤트가 발생할 때 브라우저 창에 특정 변경 사항이 발생하는 방식으로 구성될 수 있습니다.

즉, Javascript의 이벤트를 처리할 수 있습니다. (프로그램)우리에게 맞는 방식.

특정 작업을 수행하는 모든 함수는 이벤트 핸들러로 사용됩니다. (이벤트를 처리합니다), 하나 또는 다른 개체 또는 속성으로 전송됩니다.

예를 들어, 특정 기능( 이벤트 핸들러)는 "페이지가 완전히 로드된" 후에 트리거되므로 onload 속성을 통해 창 개체에 전달되어야 합니다. 창 개체는 페이지가 로드되었음을 알고 있습니다. 이것은 이미 논의되었습니다 ...

또는 필요한 개체를 "마우스 왼쪽 버튼으로 클릭"한 후 모든 기능이 실행되도록 ( 예를 들어 이미지), onclick 속성을 사용하여 이 함수를 이 개체와 연결해야 합니다. 이에 대해서는 주로 추가로 설명하겠습니다...

window.onload = back_gr;

back_gr()() ;

back_gr() 함수를 사용하려면 (이벤트 핸들러)페이지가 완전히 로드된 후에 실행되면 onload 속성을 통해 window 객체에 전달되어야 합니다.

image.onclick = 변경;

변화 ()() ;

함수를 변경하려면() (이벤트 핸들러)이미지 객체( 예를 들어 이미지), onclick 속성을 사용해야 합니다.

예를 살펴보겠습니다:

페이지에 반투명 이미지가 있습니다.

마우스 왼쪽 버튼으로 클릭하면 본격적으로 작동하는지 확인해야합니다.

기본적으로 이미지에서 "마우스 클릭" 이벤트가 발생하면 다른 이미지로 대체되어야 합니다.

onclick - 객체 속성으로 - 이벤트 처리

먼저 이벤트가 발생할 객체의 속성으로 onclick을 사용해 보겠습니다. 우리의 경우 객체는 이미지입니다.

이미지에 객체로 접근하기 위해 getElementById 메소드를 사용하겠습니다.

/* 1. 페이지가 완전히 로드된 후 back_gr 함수가 호출됩니다 */
window.onload = back_gr;

/* 2. 이미지를 마우스로 클릭하면 변경 함수가 호출됩니다 */
함수 back_gr())(

image.onclick = 변경;
}

/* 3. 변경 기능은 한 이미지를 다른 이미지로 변경합니다 */
함수변경()
var image = document.getElementById("img");
image.setAttribute("src" ,"img/peng.gif" );
}

참고: 이전 예제의 코드로 돌아가 보겠습니다.

getElementById 메소드를 사용하면 img 태그가 이미지 객체로 액세스됩니다.

다음으로 setAttribute 메소드를 사용하여 img 태그(이미지 객체)의 src 속성 값이 변경됩니다.

back_gr() 함수는 마우스 왼쪽 버튼으로 이미지를 클릭하면 실행됩니다.

A. Paranichev와 협력.

거의 모든 JavaScript 응용 프로그램은 다양한 응답에 따라 특정 작업을 수행합니다. 이벤트.

이벤트는 어떤 일이 발생했음을 알리는 브라우저의 신호입니다.

다양한 이벤트가 있습니다.

DOM 요소에 의해 트리거되는 DOM 이벤트입니다. 예를 들어 click 이벤트는 요소를 클릭할 때 발생하고, mouseover 이벤트는 마우스 포인터가 요소 위에 나타날 때 발생합니다.
창 이벤트. 예를 들어 크기 조정 이벤트 - 브라우저 창 크기가 변경되면
load , Readystatechange 와 같은 기타 이벤트. 예를 들어 AJAX 기술에 사용됩니다.

문서에서 발생하는 액션을 자바스크립트 코드와 연결하여 동적인 웹 인터페이스를 제공하는 DOM 이벤트입니다.

핸들러 할당

스크립트가 이벤트에 반응하려면 최소한 하나의 핸들러 함수를 할당해야 합니다. 일반적으로 핸들러의 이름은 "on+event name" 으로 지정됩니다(예: onclick ).

JavaScript는 단일 스레드 언어이므로 핸들러는 항상 공통 스레드에서 순차적으로 실행됩니다. 이는 예를 들어 mouseover(마우스가 요소 위에 나타남) 및 mousemove(마우스가 요소 위로 이동)와 같이 요소에서 동시에 발생하는 두 가지 이벤트에 대한 핸들러를 설정할 때 해당 핸들러가 순차적으로 실행된다는 것을 의미합니다.

특정 요소 이벤트에 핸들러를 할당하는 방법에는 여러 가지가 있습니다. 그들 모두는 아래에 제시되어 있습니다.

이벤트 핸들러는 on 속성에서 직접 인라인 레코드로 지정될 수 있습니다. 이벤트 .

예를 들어 입력 버튼의 클릭 이벤트를 처리하려면 다음과 같이 onclick 핸들러를 할당할 수 있습니다.

이 코드는 다음과 같이 작동합니다.

기능을 할당할 수도 있습니다.

예를 들어 입력 버튼을 클릭하면 count_rabbits() 함수가 실행된다고 가정해 보겠습니다. 이렇게 하려면 onclick 속성에 함수 호출을 작성하세요.

*!* 함수 count_rabbits() ( for(var i=1; i

각각에 자체 이벤트 핸들러가 있는 경우(예: onclick ) 예를 들어 d3?를 클릭할 때 요소에 대한 핸들러가 먼저 호출됩니다.

전체적으로 두 가지 행동 모델이 있으며 서로에 대한 이점은 없지만 근본적으로 다른 접근 방식을 사용합니다. W3C 표준은 두 가지 모델을 하나의 범용 모델로 결합합니다.

버블링 이벤트

이 모델에서는 요소 3의 핸들러가 먼저 실행된 다음 요소 2에서, 요소 1의 핸들러가 마지막으로 실행됩니다.

이 순서를 "부동"이라고 부르는 이유는 이벤트가 물 속의 기포처럼 DOM 표현의 "가장 깊은" 요소에서 "최상위" 요소까지 발생하기 때문입니다.

시각적으로 다음과 같습니다(이벤트 처리 순서를 보려면 중첩된 요소를 클릭하세요).

상승 중지

당신은 "신생"이 항상 일어난다는 것을 이해해야 합니다. 요소에서 이벤트가 발생하면 신호가 가장 높은 요소로 올라가 필요한 핸들러를 실행합니다.

일부 핸들러가 버블링을 중지하고 이벤트를 더 이상 발생시키지 않으려는 경우 다음 코드가 이를 수행합니다.

Element.onclick = function(event) ( event = event || window.event // 크로스 브라우저 if (event.stopPropagation) ( // W3C 표준 옵션: event.stopPropagation() ) else ( // Internet Explorer 옵션: event .cancelBubble = true ) )

if/else 블록을 한 줄에 넣을 수 있습니다.

Event.stop전파? event.stopPropagation() : (event.cancelBubble=true)

이벤트 차단(캡처)

차단은 버블링을 대체하는 두 번째 이벤트 실행 순서 모델입니다.

이 모델에서는 요소 1의 핸들러가 먼저 실행되고, 요소 2의 핸들러가 실행되고, 요소 3의 핸들러가 마지막에 실행됩니다. 부모 요소가 이벤트보다 먼저 이벤트를 처리할 수 있기 때문에 "가로채기"라고 합니다. 마치 "가로채기" 처리를 하는 것처럼 이벤트의 즉각적인 대상입니다.

시각적으로 다음과 같습니다(IE에서는 지원되지 않는 이벤트 처리 순서를 보려면 중첩된 요소를 클릭하세요).

이 순서는 Netscape에서 제안되었으며 Internet Explorer에서는 지원되지 않았으므로 IE에서는 이 예가 실제로 작동하는 것을 볼 수 없습니다.

다른 브라우저에서는 이 순서와 팝업 순서를 모두 지원하지만, Internet Explorer의 문제로 인해 실제로 사용하는 사람은 거의 없습니다.

W3C 표준의 처리 순서

W3C 솔루션은 차단 모델과 버블링 모델을 모두 하나의 범용 모델로 결합합니다.

작업이 수행되면 이벤트는 끝 요소에 도달할 때까지 먼저 차단된 다음 버블링됩니다.

따라서 개발자는 이벤트 핸들러가 언제 실행되어야 하는지(도청할 때 또는 버블링할 때) 스스로 결정합니다.

시각적으로 다음과 같습니다(IE가 아닌 이벤트 처리 순서를 보려면 중첩된 요소를 클릭하세요).

document.getElementById("capt1").addEventListener("click", function() ( 경고(1) ), true); document.getElementById("capt2").addEventListener("click", function() ( 경고(2) ), true); document.getElementById("capt3").addEventListener("click", function() ( 경고(3) ), true); document.getElementById("capt1").addEventListener("click", function() ( 경고(1) ), false); document.getElementById("capt2").addEventListener("click", function() ( 경고(2) ), false); document.getElementById("capt3").addEventListener("click", function() ( 경고(3) ), false);

addEventListener 함수의 세 번째 매개변수로 true 값을 전달하면 캡처 단계 중에 이벤트가 트리거되고, false이면 캡처가 끝난 후 버블링 단계 중에 이벤트가 트리거됩니다.

(요소 속성이나 HTML 태그 속성을 통해) 전통적인 방법을 사용하여 핸들러를 설정할 때 이벤트는 항상 버블링 단계에서 발생합니다.

기본 브라우저 동작

브라우저에는 다양한 이벤트에 대한 자체 기본 동작이 있습니다.

어떤 경우에는 이벤트에 대한 브라우저의 응답이 핸들러에서 제거될 수 있습니다. 이를 위해 IE와 W3C는 이전과 마찬가지로 본질적으로 유사하지만 겉보기에는 다른 두 가지 방법을 사용합니다.

Element.onclick = function(event) ( event = event || window.event if (event.preventDefault) ( // W3C 표준 옵션: event.preventDefault() ) else ( // Internet Explorer 옵션: event.returnValue = false ) )

if/else 대신 다음 한 줄을 작성할 수 있습니다.

Event.preventDefault ? event.preventDefault() : (event.returnValue=false) ...

일부 기본 동작이 발생합니다. ~ 전에이벤트 핸들러를 호출합니다. 이 경우 당연히 취소가 불가능합니다.

클릭하면 전환이 발생하지 않지만 링크 주위에 프레임이 나타납니다.

예제 코드:

Var a = document.getElementById("my-focus-a") a.onfocus = a.onclick = function(e) ( e = e || window.event // 또 다른 크로스 브라우저 이벤트 기록 중지 e.preventDefault ? e .preventDefault () : (e.returnValue=false) )

핸들러에서 false를 반환하는 의미

이벤트 핸들러에서 return false를 반환하면 브라우저의 기본 동작이 방지되지만 버블링이 중지되지는 않습니다. 이러한 의미에서 다음 두 코드는 동일합니다.

함수 handler(event) ( ... return false ) function handler(event) ( ... if (event.preventDefault) ( event.preventDefault() ) else ( event.returnValue = false ) )

버블링과 기본 동작이 중지되더라도 다른 핸들러는 켜져 있습니다. 현재의요소는 계속 작동합니다.

Elem = document.getElementById("TestStop") function handler(e) ( e.preventDefault() // 브라우저 - 스탠드 e.stopPropagation() // 이벤트 - 팝업하지 않음 return false // 일반적으로 나는 팝업하지 않음 다른 것은 필요하지 않습니다) elem.addEventListener("click", handler, false) // 다음 핸들러는 계속 작동합니다 elem.addEventListener("click", function() ( Alert("And I works.."), false) ;

확인하다:

실제로 브라우저는 동일한 요소의 핸들러가 실행되는 순서조차 보장하지 않습니다. 한 순서로 할당할 수 있지만 다른 순서로 작동합니다.

따라서 더욱이 하나의 핸들러는 동일한 요소에 대한 동일한 유형의 다른 핸들러에 어떠한 방식으로도 영향을 미칠 수 없습니다.

요약

알아냈나요...

이벤트란 무엇이며 어떻게 작동하나요?
핸들러를 할당하는 방법 - HTML에서 특수 메소드까지.
이벤트 객체가 필요한 이유와 이를 얻는 방법.
DOM 문서에서 이벤트가 떠다니는 방식. 어디서 잡아야 하는지, 어떻게 막아야 하는지.
그것은 무엇이며 기본 브라우저 동작을 방지하는 방법입니다.
false 반환은 이것과 어떤 관련이 있습니까?

다음 기사에서는 이벤트 객체가 갖는 속성, 브라우저 간 처리 방법 및 핸들러 할당 방법을 살펴보겠습니다.

가장 표준적이고 자주 사용되는 JavaScript 이벤트를 살펴보겠습니다.

매니저
이벤트

HTML 요소 및 객체 지원

설명

요소에 집중하기

	a, 영역, 버튼, 입력, 라벨, 선택, 텍스트 영역	현재 요소가 포커스를 잃습니다. 다음과 같은 경우에 발생합니다. 요소 외부를 클릭하거나 탭 키를 누르기
	입력, 선택, 텍스트 영역	양식 요소의 값을 변경합니다. 요소가 포커스를 잃은 후에 발생합니다. 즉, 블러 이벤트 이후
	거의 모든 것	한 번 클릭(마우스 버튼을 눌렀다 놓음)
	a, 영역, 버튼, 입력, 라벨, 선택, 텍스트 영역

	거의 모든 것	현재 요소 내에서 마우스 버튼을 눌렀습니다.
	거의 모두	마우스 커서가 범위를 벗어났습니다. 현재 요소
	거의 모든 것	마우스 커서가 현재 요소 위에 있습니다.
	거의 모든 것	현재 요소 내에서 마우스 버튼이 해제되었습니다.
		창 이동
		창 크기 조정
		현재 요소에서 텍스트 선택
		양식 데이터 제출
		브라우저 창을 닫고 문서를 언로드하려고 합니다.

onLoad 이벤트. JavaScript의 객체 높이 및 너비 속성

다음 예를 완성하려면 이벤트라는 새로운 개념이 필요합니다.

우리의 경우 이벤트는 사용자 작업(마우스로 버튼 클릭, 마우스로 브라우저 창 축소, 키보드에서 텍스트 입력 등)에 대한 프로그램의 반응입니다. 프로그램을 사용하면 사용자의 모든 작업에 대응할 수 있습니다.

문서가 로드될 때(사용자가 자신의 작업을 통해 웹 페이지를 로드할 때) 발생하는 가장 일반적인 이벤트 중 하나인 onload를 고려해 보겠습니다.

javascript onload 이벤트를 사용하여 요소의 너비와 높이를 변경하는 예를 살펴보겠습니다.

예: 페이지에 이미지를 추가하고 자바스크립트를 사용하여 페이지 로드 이벤트가 발생하면 이미지의 너비를 브라우저 창의 너비와 일치하게 만듭니다.

✍ 해결책:

함수 resizeImg() ( var myImg= document.getElementById ("img1" ) ; myImg.style .width = document.body .clientWidth ; ) ...

함수 resizeImg())( var myImg=document.getElementById("img1"); myImg.style.width=document.body.clientWidth; ) ...

예제에서 기본 작업은 resizeImg() 함수에서 발생합니다.

myImg 변수는 img 태그(이미지의 너비 속성이 함수 자체에서 변경됨)와 연결됩니다.

문서 본문의 onload 이벤트에서 페이지가 로드될 때 함수가 호출됩니다(body가 주 요소이므로 페이지 로딩은 본문과 관련된 이벤트입니다).

작업 Js8_4. HTML 코드에 여러 이미지(img 태그)를 배치합니다. 방법 변경을 사용하여:
— 모든 페이지 이미지의 크기(너비 및 높이 속성)
— 모든 이미지의 테두리 크기(테두리 속성).

코드를 완성하세요:

var allImg=문서...; // (var i=0; i에 대한 이미지 배열을 얻습니다.< allImg.length; i++){ allImg[i].....; // меняем свойство width ...; // меняем свойство height ...; // меняем border }

JavaScript onclick 이벤트 및 이벤트를 처리하는 세 가지 방법

onClick 이벤트는 마우스 버튼을 한 번 클릭할 때 발생합니다. 일반적으로 핸들러는 이벤트, 즉 이벤트가 발생하자마자 실행되는 함수에 할당됩니다. 이벤트를 처리합니다. 스크립트를 사용하여 세 가지 방법으로 대응할 수 있습니다. 그것들을 살펴보자:

예: 버튼을 클릭하면 메시지가 포함된 대화 상자가 표시됩니다. "만세!"

사용자 정의 함수를 사용하여 객체 속성을 통해:

스크립트:

이 예에서는 html 코드에 버튼이 있습니다. 버튼에는 onclick 속성( "클릭 시"), 그 값은 message() 라는 함수에 대한 호출입니다. 이는 위의 스크립트에 설명된 사용자 정의 함수입니다. 함수 자체에는 작업에 따라 지정된 대화 상자가 표시됩니다.

이러한 이벤트 처리를 위한 스크립트는 일반적으로 문서의 헤드 영역에 위치합니다.

태그 속성을 통해:

이는 이벤트 처리의 단순화된 버전으로, 하나 또는 두 개의 문을 실행해야 하는 작은 코드에만 적합합니다. 그렇지 않으면 코드를 읽기 어려울 것입니다.
버튼 속성은 onclick( "클릭 시"), 값으로 스크립트는 작성된 언어(javascript:)를 나타내는 연산자로부터 작성됩니다. 우리의 경우, 단어가 포함된 모달 창을 표시하는 연산자는 "만세!"

핸들러 함수를 요소 속성으로 등록하면 다음과 같습니다.

HTML 코드:

스크립트:

document.myForm .myButton .onclick = 메시지; 함수 메시지() ( Alert("만세!" ) ; )

document.myForm.myButton.onclick = 메시지; 함수 메시지() ( Alert("만세!"); )

html 코드에는 스크립트를 통해 버튼에 액세스하는 데 필요한 id 속성이 있는 버튼이 있습니다.

요소 트리 아래(아마도 body 태그를 닫기 전)에 위치해야 하는 스크립트에는 버튼(document.myForm.myButton)에 대한 호출이 있으며, 이에 대한 onclick 이벤트 핸들러에는 a 값이 할당됩니다. 기능 링크. 버튼은 id 속성(document.getElementById("myButton").onclick = message;)을 통해 액세스할 수 있습니다.

함수 이름 메시지 뒤에 괄호가 없습니다. 이 경우 이는 정확히 함수에 대한 참조입니다. 그렇지 않으면 괄호를 사용할 때 함수가 호출되고 이벤트 핸들러로 할당되지 않습니다.

예를 들어 Windows OS에서 발생하는 상황에 최대한 가까운 이벤트를 처리하는 방법입니다.

예제 결과를 표시하는 가장 좋은 방법은 무엇입니까?

중요: 페이지 로딩이 완료된 후 document.write를 호출할 때(이벤트 처리 시) 클릭하면, 입력, ...) 페이지를 덮어쓰게 되므로 이 메서드를 호출하는 것은 권장되지 않습니다. 예를 들어, Alert() 메소드를 사용하는 것이 더 좋습니다.

document.write는 DOM 생성 중에 html을 추가합니다.

경고는 사용자가 클릭할 때까지 JS 실행을 차단합니다. 좋아요

디버깅 정보를 출력하는 간단한 방법을 모두 살펴보겠습니다.

document.innerHTML += "htmlstr"; //페이지에 추가

console.log("str"); // 브라우저의 콘솔에 출력

작업 Js8_5. 지침에 따라 작업을 완료하세요.

웹페이지를 만들고 슬픈 웃는 얼굴이 포함된 img 태그를 배치하세요.

이미지를 클릭(onclick)하면 지정된 메소드(사용자 정의 함수)가 호출됩니다.

스크립트에서 사용자의 이름을 "묻고" 이름을 부르며 인사하고 이미지를 웃는 이모티콘(img 태그의 src 속성)으로 변경하는 메서드(sayHello() 함수)를 설명합니다.

function sayHello() ( var userName= 프롬프트("이름이 무엇입니까?" ) ; if (userName) ( 경고(...) ; document.getElementById ("smileImg" ) . ...= ...; ) )

function sayHello() ( var userName=prompt("이름이 무엇입니까?"); if(userName)( Alert(...); document.getElementById("smileImg"). ...=...; ) )

=>>

onMouseOver 및 onMouseOut 이벤트

이 이벤트는 마우스 커서가 개체 위에 있을 때(onMouseOver), 마우스 커서가 개체 밖으로 이동할 때(onMouseOut) 발생합니다.

이벤트 핸들러 할당은 사례와 정확히 동일한 방식으로 수행됩니다.

따라서 작업을 완료해 보겠습니다.

작업 Js8_6. 하이퍼링크 위로 마우스를 가져가면 페이지 배경을 다양한 색상으로 칠할 수 있습니다.

코드를 완성하세요:

녹색
...씨그린
... 마젠타
...보라
...해군
...로얄 블루

작업 Js8_7. 롤오버 이미지 만들기

— 이미지가 포함된 img 태그를 코드에 추가합니다.
— onmouseover(호버 시) 및 onmouseout(접기 시) 이벤트 핸들러를 입력합니다. 이것을 함수로 수행하십시오.
— img 태그에 다른 이미지를 로드하는 절차를 onmouseover 이벤트 핸들러에 첨부합니다.
- img 태그에 다른 이미지를 로드하려면 onmouseout 이벤트 핸들러에 프로시저를 첨부하세요.

동일한 이벤트에 대한 여러 핸들러

자바스크립트에서는 동일한 이벤트에 대해 여러 핸들러를 할당할 수 있습니다. 이를 위해 다음 방법이 사용됩니다.

addEventListener - 핸들러 추가

RemoveEventListener - 핸들러 제거

addEventListener 구문:

이 메서드에는 세 가지 인수가 있습니다.

Element.addEventListener(이벤트, 핸들러[, 단계]);

이벤트 딸깍 하는 소리

핸들러 — 핸들러 함수 getElementById ("MyElem" ) ; input.addEventListener("클릭" , 메시지) ;

function message() ( Alert("만세!"); ) var input = document.getElementById("MyElem"); input.addEventListener("클릭", 메시지);

RemoveEventListener의 구문은 다음과 같습니다.

메소드에는 addEventListener 와 동일한 인수가 전달되어야 합니다.

Element.removeEventListener(event, handler[, Phase]);

이벤트 — 이벤트 이름(예: 딸깍 하는 소리

핸들러 - 핸들러 함수

단계 — 선택적 인수, 핸들러가 실행되어야 하는 "단계"

예: 이전 작업에서 RemoveEventListener 메서드를 사용하여 버튼에서 추가된 핸들러를 제거합니다.

function message() ( Alert("만세!"); ) var input = document.getElementById("MyElem"); input.addEventListener("클릭", 메시지); input.removeEventListener("클릭", 메시지);

상승 및 다이빙 이벤트

obj.onevent = function(e) (/*...*/) // 여기서 e는 이벤트 객체입니다. // e.target은 이벤트가 발생한 요소입니다.

아마도 이 언어의 주요 기능일 수도 있는 JavaScript 언어의 가장 중요한 기능 중 하나는 일부 이벤트를 처리하는 기능입니다. 이 기능은 다른 웹 프로그래밍 언어에 비해 JavaScript의 기능입니다. 왜냐하면 이 언어만이 이 기능을 수행할 수 있기 때문입니다.

이벤트 및 이벤트 핸들러란 무엇입니까?

이벤트는 사용자나 페이지의 다른 개체가 수행할 수 있는 작업입니다.

이벤트의 가장 눈에 띄는 예는 사용자가 어떤 객체를 클릭하는 것입니다( 딸깍 하는 소리), 버튼, 링크 또는 기타 요소가 될 수 있습니다. 이벤트의 또 다른 예는 일부 개체 위에 마우스를 올려 놓는 것입니다( 마우스 오버), 이미지 위에 말해보세요. 또한 이벤트는 페이지가 완전히 로드되는 것입니다( 짐). 일반적으로 사이트에서 발생하는 모든 작업은 이벤트입니다.

따라서 페이지에서 발생하는 모든 이벤트를 캡처하고 적절한 핸들러를 사용하여 처리할 수 있습니다. 예를 들어 div 블록 위로 마우스를 가져가면 "현재 텍스트 영역에 있습니다."와 같은 특정 메시지가 표시될 수 있습니다. 또는 버튼을 클릭하면 페이지에서 블록을 숨길 수 있습니다. 일반적으로 이벤트를 처리하기 전에 많은 작업을 수행할 수 있습니다.

그리고 이벤트를 처리하려면 이 이벤트에 대한 특수 핸들러를 사용해야 합니다. 각 이벤트에는 자체 핸들러가 있습니다(예: click 이벤트( 딸깍 하는 소리) 핸들러가 있습니다 클릭하면. 객체 위에 마우스를 올려놓는 이벤트( 마우스 오버) 핸들러가 있습니다 마우스 오버 시. 그리고 페이지 전체 로드 이벤트( 짐) 핸들러가 있습니다 길 위에.

즉, 아시다시피 핸들러 이름은 접두사 "on" + 이벤트 이름으로 구성됩니다.

이벤트 및 핸들러의 전체 목록은 참조 서적에서 찾을 수 있으며, 이 기사에서는 가장 자주 사용되는 것만 고려합니다.

이벤트 핸들러는 HTML 요소 태그 자체 내에서 속성으로 호출됩니다. 핸들러 값에 JavaScript 코드를 즉시 작성할 수 있지만 필요한 작업을 수행하는 일부 함수를 호출하는 것이 더 좋습니다. 함수는 head 블록 내부 또는 body 태그 끝에 위치할 수 있는 스크립트 태그 내부에 설명되어야 합니다. this라는 단어, 즉 현재 객체가 이 함수에 매개변수로 전달됩니다.

이제 간단한 예제를 작성해 보겠습니다. 텍스트가 있는 블록 위로 마우스를 가져가면 경고 메서드를 사용하여 사용자가 텍스트 영역 안에 있음을 나타내는 메시지가 표시됩니다.

Lorem Ipsum은 인쇄 및 조판 산업의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다.

Div( 왼쪽 패딩: 50px; 너비: 200px; 테두리: 1px 솔리드 #000; )

자바스크립트 코드:

Function blockOver(block)( Alert("당신은 텍스트 영역에 있습니다. "); )

문서를 저장하고 브라우저에서 열고 텍스트 위에 마우스 커서를 올려 놓고 이 이벤트 처리 결과를 확인합니다.

자바스크립트에서 속성값을 얻는 방법은 무엇입니까?

함수 매개변수(this)를 사용하면 현재 객체의 일부 속성 값을 얻을 수 있습니다. 예를 들어 해당 객체의 ID를 알아낼 수 있습니다.

예를 들어 버튼을 만들고 "justButton" 값을 가진 ID를 부여해 보겠습니다. 이 버튼을 클릭하면 "식별자가 value_id인 버튼을 클릭했습니다."라는 메시지가 표시됩니다. 여기서는 이미 onclick 핸들러를 사용해야 합니다.

자바스크립트 코드:

함수 clickOnButton(button)( Alert("식별자가 있는 버튼을 클릭했습니다: " + Button.id); )

문서를 저장하고 브라우저에서 열고 버튼을 클릭하세요.

같은 방법으로 버튼 이름을 표시할 수 있습니다( 버튼.이름) 또는 그 값( 버튼.값)

요소의 너비와 높이 얻기

너비, 높이 등 요소의 CSS 속성 값을 확인할 수도 있습니다. clientWidth 및 offsetWidth 속성은 너비를 가져오는 데 사용되며 clientHeight 및 offsetHeight 속성은 높이를 가져오는 데 사용됩니다. 예를 들어 클릭한 버튼의 너비와 높이를 표시해 보겠습니다.

이제 clickOnButton 함수의 내용은 다음과 같습니다.

Function clickOnButton(button)( //alert("ID가 있는 버튼을 클릭했습니다: " + Button.id); var width =button.clientWidth ||button.offsetWidth; var height =button.clientHeight ||button.offsetHeight; Alert("버튼 너비: " + 너비 + "\n버튼 높이: " + 높이); )

이 예의 결과는 다음과 같습니다.

요소의 너비는 패딩 값과 함께 계산되므로 111px [ 99px(width) + 6px(padding-left) + 6px(padding-right) ]와 같습니다.

이벤트를 처리하기 위해 많은 코드를 작성할 필요가 없다면 이 코드를 핸들러 값에 직접 작성할 수 있습니다. 즉, 함수를 호출하는 대신 필요한 코드를 즉시 작성합니다.

예를 들어 페이지가 로드될 때 "페이지가 로드 중입니다."라는 메시지를 표시할 수 있습니다. 이렇게 하려면 로드 이벤트와 해당 onload 핸들러를 사용해야 합니다. 여는 body 태그에 이 핸들러를 작성하겠습니다.

이 방법은 이벤트를 처리하는 데 단 한 줄의 짧은 코드만 필요한 경우에만 사용할 수 있습니다. 그렇지 않고 처리 코드가 하나의 긴 줄 또는 여러 줄로 구성된 경우 함수를 사용해야 합니다.

그리고 이 글의 마지막 부분에서는 양식 처리의 간단한 예를 살펴보겠습니다. JavaScript로 양식을 처리하면 첫째로 서버의 부하가 줄어들고 둘째로 사이트의 유용성에 추가적인 이점이 제공됩니다.

양식은 하나의 로그인 필드와 제출 버튼으로 구성됩니다. 양식을 제출할 때 로그인 길이를 확인합니다. 길이는 3자 이상이어야 합니다.

이 양식의 HTML 구조부터 시작해 보겠습니다.

이제 submit 이벤트에 대한 onsubmit 핸들러를 form 태그의 속성으로 추가해 보겠습니다. 다음과 같은 방법으로:

제출 이벤트는 양식이 제출될 때 발생합니다. 데이터 입력에서 오류가 감지되면 양식이 제출되지 않도록 return 문을 작성했습니다. 함수가 false를 반환하면 onsubmit 핸들러의 값은 "return false"가 되며, 이는 양식이 서버로 전송되지 않음을 의미합니다. 그렇지 않고 양식이 true를 반환하면 핸들러의 값은 "true를 반환"하고 양식은 문제 없이 제출됩니다.

때때로 양식 제출을 완전히 비활성화해야 하는 경우가 있는데, 이 경우 onsubmit 핸들러의 값은 다음과 같습니다.

Onsubmit = "checkForm(this); return false;"

이미 짐작하셨겠지만 checkForm은 submit 이벤트가 발생할 때 호출될 함수의 이름입니다. 함수 명명 규칙에 따라 원하는 대로 호출할 수 있습니다.

이제 우리의 예로 돌아가 보겠습니다. 이제 checkForm 함수를 설명해야 합니다. 여기에는 다음 조건이 포함됩니다. 로그인 길이가 3자 미만이면 false를 반환하고 양식이 전송되지 않습니다. 그렇지 않고 데이터가 올바르게 입력되면 양식을 서버로 보냅니다.

Function checkForm(form)( //login이라는 이름의 양식 필드 값을 가져옵니다. var login = form.login.value; //로그인 길이가 3자 미만인지 확인한 후 오류 메시지를 표시하고 제출을 취소합니다. form.if(login .length > 3)( Alert("로그인 길이는 3자 이상이어야 합니다."); return false; )else( return true; ) )

문서를 저장하고 브라우저에서 열어 테스트합니다.