Onclick 이벤트 핸들러. JavaScript의 이벤트 및 이벤트 핸들러. 이벤트 핸들러 속성 설정
아마도 이 언어의 주요 기능일 수도 있는 JavaScript 언어의 가장 중요한 기능 중 하나는 일부 이벤트를 처리하는 기능입니다. 이 기능은 다른 언어와 비교하여 JavaScript에만 있습니다. 웹 프로그래밍, 왜냐하면 이 언어만이 이런 일을 할 수 있는 힘을 가지고 있기 때문입니다.
이벤트 및 이벤트 핸들러란 무엇입니까?이벤트는 사용자나 페이지의 다른 개체가 수행할 수 있는 작업입니다.
이벤트의 가장 눈에 띄는 예는 사용자가 어떤 객체를 클릭하는 것입니다( 딸깍 하는 소리), 버튼, 링크 또는 기타 요소가 될 수 있습니다. 이벤트의 또 다른 예는 일부 객체( 마우스 오버), 이미지 위에 말씀해 주세요. 또한 이벤트는 페이지가 완전히 로드되는 것입니다( 짐). 일반적으로 사이트에서 발생하는 모든 작업은 이벤트입니다.
따라서 페이지에서 발생하는 모든 이벤트를 캡처하고 적절한 핸들러를 사용하여 처리할 수 있습니다. 예를 들어 마우스를 어떤 항목 위에 올려놓으면 div 블록, "당신은 텍스트 영역에 있습니다."라는 메시지를 표시할 수 있습니다. 또는 버튼을 클릭하면 페이지에서 블록을 숨길 수 있습니다. 일반적으로 이벤트를 처리하기 전에 많은 작업을 수행할 수 있습니다.
그리고 이벤트를 처리하려면 이 이벤트에 대한 특수 핸들러를 사용해야 합니다. 각 이벤트에는 자체 핸들러가 있습니다(예: click 이벤트( 딸깍 하는 소리) 핸들러가 있습니다 클릭하면. 객체 위에 마우스를 올려놓는 이벤트( 마우스 오버) 핸들러가 있습니다 마우스 오버 시. 그리고 페이지 전체 로드 이벤트( 짐) 핸들러가 있습니다 길 위에.
즉, 아시다시피 핸들러 이름은 접두사 "on" + 이벤트 이름으로 구성됩니다.
이벤트 및 핸들러의 전체 목록은 참조 서적에서 찾을 수 있습니다. 이 기사에서는 가장 자주 사용되는 것만 고려합니다.
이벤트 핸들러는 속성으로 호출됩니다. HTML 태그요소. 핸들러 값을 즉시 쓸 수 있습니다. 자바스크립트 코드, 그러나 필요한 작업을 수행하는 일부 함수를 호출하는 것이 더 좋습니다. 함수는 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; ) )
문서를 저장하고 브라우저에서 열어 테스트합니다.
다음과 같은 양식을 확인하는 방법이 있습니다. 자바스크립트오류가 발생하면 전송을 취소합니다.
글쎄, 그게 다야, 독자 여러분. 요약해보자.
이벤트는 매우 자주 사용되므로 이벤트를 100% 활용할 수 있어야 합니다.
이 기사에서는 이벤트와 이벤트 핸들러가 무엇인지 배웠습니다. 요소 속성 값을 얻는 방법과 요소의 너비와 높이를 찾는 방법을 배웠습니다. 또한 양식 유효성 검사를 수행하는 방법도 배웠습니다.
작업- 숫자 입력을 위한 두 개의 숫자 필드(type="number")와 "추가"라는 버튼이 있는 양식을 만듭니다.
- 제출 버튼을 클릭하면 이 이벤트를 처리하기 위한 함수를 호출합니다.
- 함수 내에서 필드 값을 가져오고 경고 방법, 입력된 숫자를 더한 결과를 인쇄합니다.
- 버튼을 클릭한 후 양식이 제출되지 않았는지 확인하세요.
이벤트 처리
JavaScript 클라이언트 프로그램은 이벤트 중심 프로그래밍 모델을 기반으로 합니다. 이러한 프로그래밍 스타일을 사용하면 웹 브라우저는 문서나 문서의 일부 요소에 문제가 발생할 때 이벤트를 생성합니다. 예를 들어, 웹 브라우저는 사용자가 하이퍼링크 위에 마우스를 올리거나 키보드의 키를 누를 때 문서 로드가 완료되면 이벤트를 생성합니다.
JavaScript 애플리케이션이 특정 이벤트 유형에 관심이 있는 경우 특정 요소문서에서는 이 이벤트가 발생할 때 호출될 하나 이상의 함수를 등록할 수 있습니다. 이는 웹 프로그래밍의 고유한 기능이 아니라는 점을 명심하십시오. 그래픽 인터페이스사용자는 이런 식으로 행동합니다. 즉, 어떤 일이 일어나기를 끊임없이 기다리고(즉, 이벤트가 나타날 때까지 기다리며) 발생한 일에 반응합니다.
이벤트 유형은 이벤트를 발생시킨 작업 유형을 식별하는 문자열입니다. 예를 들어 "mousemove" 유형은 사용자가 마우스 포인터를 이동했다는 의미입니다. "keydown" 유형은 키보드의 키를 눌렀다는 의미입니다. 그리고 "로드" 유형은 네트워크에서 문서(또는 다른 리소스) 다운로드가 완료되었음을 의미합니다. 이벤트 유형이 단순한 문자열이므로 이벤트 이름이라고도 합니다.
이벤트의 대상은 이벤트가 발생한 개체 또는 이벤트와 연결된 개체입니다. 이벤트에 대해 이야기할 때 일반적으로 이벤트의 유형과 목적을 언급합니다. 예를 들어 Window 개체의 "load" 이벤트나 . JavaScript 클라이언트 애플리케이션의 가장 일반적인 이벤트 대상은 Window, Document 및 Element 개체이지만 일부 이벤트 유형은 다른 개체 유형에서 발생할 수 있습니다.
이벤트 핸들러는 이벤트를 처리하거나 이에 응답하는 함수입니다. 애플리케이션은 이벤트 유형과 목적을 지정하여 웹 브라우저에 이벤트 핸들러 기능을 등록해야 합니다. 지정된 대상에서 지정된 유형의 이벤트가 발생하면 브라우저는 핸들러를 호출합니다. 객체에 대해 이벤트 핸들러가 호출될 때 우리는 때때로 브라우저가 이벤트를 "발생시켰다" 또는 "던지셨다"고 말합니다.
이벤트 개체는 특정 이벤트와 연결되고 해당 이벤트에 대한 정보를 포함하는 개체입니다. 이벤트 객체는 이벤트 핸들러 함수에 인수로 전달됩니다(IE8 이상 버전 제외). 이전 버전, 여기서 이벤트 개체는 전역 이벤트 변수로만 사용할 수 있습니다. 모든 이벤트 객체에는 속성이 있습니다. 유형, 이벤트 유형 및 속성을 정의합니다. 표적, 이벤트의 목적을 정의합니다.
각 이벤트 유형에 대해 연관된 이벤트 객체에 속성 집합이 정의됩니다. 예를 들어, 마우스 이벤트와 연관된 객체에는 마우스 포인터의 좌표가 포함되고, 키보드 이벤트와 연관된 객체에는 누른 키와 누른 수정자 키에 대한 정보가 포함됩니다. 많은 이벤트 유형의 경우 유형 및 대상과 같은 표준 속성만 정의되며 추가 속성은 전달되지 않습니다. 유용한 정보. 이러한 유형의 이벤트에서는 이벤트 발생 자체가 중요하며 다른 정보는 관련이 없습니다.
이벤트 전파는 브라우저가 이벤트 핸들러를 호출할 객체를 결정하는 프로세스입니다. 단일 개체를 위한 이벤트(예: Window 개체의 "load" 이벤트)의 경우 이를 전파할 필요가 없습니다. 그러나 문서 요소에서 이벤트가 발생하면 문서 트리 위로 전파되거나 "버블링"됩니다.
이 말도 안 되는 선들이 무엇을 의미하는지 잠시 후에 알아내겠지만, 지금은...
- 기본적으로 HTML에 있는 Java 스크립트의 onclick 이벤트는 HTML 페이지의 모든 코드 요소에 첨부될 수 있습니다.
또는 . 브라우저는 모든 것을 "삼켜버릴" 것이며 모든 것이 작동할 것입니다. 유일한 점은 링크나 버튼 개체에 대해서만 키보드에서 요소에 액세스할 수 있다는 것입니다. 그리고 사용자가 마우스가 없고 키보드로만 작업한다고 잠시 가정하면 사이트에서 사용자가 터치할 수 있는 것은 버튼이나 링크뿐입니다. 세 번째는 없습니다! 따라서 키보드에서 접근할 수 없는 객체에 onclick 이벤트를 "첨부"하는 것은 보기 흉합니다. 글쎄요, 어쨌든 인간적으로는 아닙니다. 이는 HTML의 onclick에 대한 두 번째 규칙을 불러옵니다. 이 이벤트는 링크("a" 태그) 또는 버튼("button" 태그)에만 연결되어야 합니다. 그렇지 않으면 코드는 여전히 작동하지만 지옥에서는 그러한 프로그래머를 위해 별도의 큰 프라이팬이 준비되어 있습니다.
(HTML에서) 버튼("빵")을 사용하여 형식을 지정하고 작업하면 특정 어려움이 발생하므로 유일하고 보편적이며 최선의 선택링크만 남습니다(태그 “a”). 하지만 이 태그를 사용하더라도 모든 것이 그렇게 순조롭게 진행되는 것은 아닙니다. 이제 코드 줄을 사용하여 분석으로 돌아가겠습니다.
메뉴 1번
우리는 토론에서 제목 링크를 완전히 명백한 것으로 버립니다. 남아있다
메뉴 1번
이후의 모든 글은 href 속성을 차단하는 주제와 관련될 것입니다. 이 속성은 적절하게 "마비"되어 링크가 더 이상 작동하지 않지만 그럼에도 불구하고 onclick 기능을 수행하도록 해야 합니다.
거짓을 반환 ; - 이는 href 속성을 직접 차단하는 것입니다. 사용자가 브라우저에서 Java 스크립트를 활성화한 경우 링크를 따르지 않고 해당 스크립트에서 onclick 이벤트가 호출됩니다. 즉, "통화 링크"를 클릭할 때 href의 주소로 즉시 전환되지 않도록 return false 이벤트가 onclick에 추가됩니다. 자바스크립트가 활성화되면 링크를 취소하는 함수가 먼저 실행된다고 가정합니다. 따라서 href 속성의 내용은 java 스크립트가 실행될 때 무시되므로 의미가 없습니다.
하지만 여기에 질문이 있습니다. 사용자가 브라우저에서 Java 스크립트를 비활성화(비활성화)한 경우 어떻게 됩니까? 그러면 우리 링크는 어떻게 작동할까요? 흥미를 끌지는 않지만 바로 게시하겠습니다. 가능한 옵션이벤트 개발 - href 속성의 가능한 값과 Java 스크립트가 꺼져 있을 때 해당 링크를 클릭한 후 브라우저의 해당 동작.
물론 사용자의 브라우저에서 자바스크립트가 꺼져 있다면 이는 문제이자 귀찮은 일이다. 사용자 브라우저에서 Java 스크립트 실행이 비활성화(금지)된 경우 "a" 태그가 여전히 링크이고 브라우저가 이를 탐색하려고 시도하므로 href 속성에서 지속적인 문제가 시작됩니다.
링크에서 href 속성을 완전히 제거할 수는 없습니다. 링크 텍스트의 href 속성 없이는 불가능하며 모든 검증자는 그녀의 매콤하고 섬세한 신체에 대한 그러한 분노에 대해 즉시 불쾌감을 느낄 것입니다. 이는 href 속성을 소화 가능한 콘텐츠로 채우는 옵션이 하나만 남았다는 것을 의미합니다. 여기서는 다음이 가능합니다. href를 완전히 비워두고 날카로운 "#" 기호로 채우거나 자바스크립트 표현://. Java 스크립트가 꺼져 있거나 결함이 있는 경우 해당 링크를 클릭하면 다음이 발생합니다.
테스트 href 속성이 비어 있습니다. 해당 링크를 클릭하면 브라우저의 페이지가 다시 로드됩니다. 샘플 href 속성의 값은 "#"입니다. 이러한 링크를 클릭하면 사용자는 페이지를 다시 로드하지 않고 페이지 상단으로 이동하게 됩니다. 노력하다 href 속성의 값은 "javascript://"입니다. 해당 링크를 클릭하면 아무 일도 일어나지 않습니다. href="javascript://" - 링크를 클릭하면 브라우저에서 무시됩니다. href 속성의 "javascript://" 값은 Java 스크립트가 꺼진 경우 링크를 차단하기 위한 표준 "스텁"입니다.
href="javascript://" - 헛소리!왜 헛소리야? 검색 엔진 세계의 인터넷 생활은 자체적으로 조정되기 때문입니다. 정확하고 의미론적인 관점에서! 레이아웃의 경우 href 속성에 실제 링크를 작성하고 이 링크에 대한 실제 제목을 추가하는 것이 절대적으로 논리적입니다. 그런 다음 해당 링크를 클릭하면 두 가지 중 하나가 발생합니다. 해당 Java 스크립트의 onclick 이벤트가 실행되거나 실제 페이지에 대한 실제 링크를 통해 전환이 발생합니다(Java 스크립트가 비활성화된 경우). 또는 결함이 있거나 로드가 부족함).
따라서 요약해 보겠습니다. Java 스크립트 이벤트를 호출하기 위한 링크에서 href에는 Javascript가 꺼졌을 때 탐색할 실제 페이지에 대한 실제 링크가 있고 onclick에는 Java 스크립트가 켜져 있을 때 스크립트 실행 요청을 호출하는 함수가 있습니다. .
즉, "href"에는 "이벤트 호출 링크"를 클릭할 때 사용자가 리디렉션되는 웹페이지에 대한 완전히 정상적이고 작동하는 링크가 포함되어야 합니다. 껐다 Java 스크립트이며 다음과 같은 경우 스크립트에서 무시됩니다. 포함됨자바 스크립트. 그게 다야 …
자, 결국-
브라우저를 확인하여 켜기/끄기 Java 스크립트이러한 검사에 대한 표준 코드는 다음과 같습니다.
자바스크립트가 비활성화되어 있습니다...
display:none;을 제외하고 CSS에서 어떤 스타일이든 작성할 수 있습니다. 그리고 비슷한 스타일... 브라우저는 필수입니다!!! 사용자가 브라우저에서 Java 스크립트를 비활성화하면 화면에 이 메시지가 표시됩니다. 이런 간단한 방법으로 웹마스터는 종종 "자바스크립트를 켜주세요"라고 쓰거나 유사한 요청이 포함된 아름다운 사진을 표시하거나 다른 것을 표시합니다... 태그 내부 스크립트 HTML 태그를 배치할 수 있습니다. 그리고 이것은 불필요한 예방 조치가 아닙니다. 그럼에도 불구하고 이제는 자바스크립트를 전혀 사용하지 않는 사이트를 찾기가 쉽지 않습니다.
우리와 함께하지 아니하는 자는 우리를 반대하는 자니
브라우저에서 Java 스크립트가 꺼진 문제는 일반적으로 근본적이고 근본적으로 해결될 수 있습니다. 예를 들어 다음과 같이 섹션 내부에 HTML5 코드를 추가합니다.
여기서 http://mysite.ru/는 즉시 리디렉션되는 웹페이지입니다.
사용자가 언제 브라우저에서 꺼졌어자바 스크립트.
일부 프로그램 자바스크립트를 사용하여이벤트는 사용자 입력으로 직접 작동합니다. 이러한 상호작용의 발생 순간과 순서는 미리 예측할 수 없습니다.
이벤트 핸들러키를 다시 놓기 전에 키를 누르는 순간을 파악하기 위해 계속해서 상태를 읽어 키 누름에 반응할 수 있습니다.
이것이 원시 기계에서 데이터 입력이 처리되는 방식입니다. 더 발전된 방법은 키 입력을 감지하고 이를 대기열에 추가하는 것입니다. 그런 다음 프로그램은 정기적으로 대기열에서 새 이벤트를 확인하고 거기에서 발견된 내용에 반응할 수 있습니다. 이 경우 프로그램은 대기열을 스캔하는 것을 기억하고 자주 스캔해야 합니다.
프로그램이 이 이벤트를 감지할 때까지 키를 누르는 동안에는 실제로 요청에 응답하지 않습니다. 이 접근법을 폴링(설문조사)이라고 합니다.
대부분의 프로그래머는 가능하면 이를 피하려고 합니다.
가장 좋은 방법은 이벤트가 발생할 때 코드에 반응할 수 있는 기능을 제공하는 시스템을 구현하는 것입니다. 브라우저는 특정 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 속성을 사용했습니다. 이를 통해 어떤 키를 누르거나 놓았는지 확인됩니다. 키의 숫자 코드를 실제 키로 변환하는 방법이 항상 명확한 것은 아닙니다.
유니코드 문자 코드는 문자 및 숫자 키 값을 읽는 데 사용됩니다. 그것은 문자와 연관되어 있습니다 (in 대문자) 또는 키에 표시된 번호입니다. 문자열에 대한 charCodeAt 메서드를 사용하면 다음 값을 얻을 수 있습니다.
console.log("보라색".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(점));
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 = 이벤트 . 페이지 X ) )"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" 이벤트가 시작됩니다.
이 두 가지 사건은 확산되지 않습니다. 하위 요소에 입력 포커스가 있을 때 상위 요소 핸들러는 알림을 받지 않습니다.
다음 예에서는 다음에 대한 도구 설명을 표시합니다. 텍스트 필드, 현재 입력 포커스가 있습니다.
이름:
나이:
var help = document.querySelector("#help"); var fields = document.querySelectorAll("input"); for (var i = 0; i< fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }창 개체는 사용자가 문서가 표시되는 브라우저 창인 탭을 탐색하거나 탭을 떠날 때 "포커스" 및 "흐림" 이벤트를 수신합니다.
이벤트 로드페이지 로드가 완료되면 문서 본문 및 창 개체에 대해 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과 유사합니다. 나중에 호출될 다른 함수를 호출합니다. 그러나 다음에 페이지가 렌더링될 때 함수를 호출하는 대신 특정 시간(밀리초)을 기다립니다. 그 안에 자바스크립트 예시 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 프로그램의 한 부분만 한 번에 실행할 수 있습니다. 이벤트 핸들러와 기타 예약된 스크립트는 대기열의 다른 스크립트가 실행을 마칠 때까지 기다려야 합니다.
귀하의 웹사이트에 귀하가 가장 좋아하는 고양이 Murzik의 사진이 게시되어 있지만 다른 사람이 이를 복사하거나 하드 드라이브에 저장하는 것을 원하지 않는 경우 해당 스크립트를 사이트 본문에 넣으십시오.
가장 표준적이고 자주 사용되는 JavaScript 이벤트를 살펴보겠습니다.
|
a, 영역, 버튼, 입력, |
현재 요소가 포커스를 잃습니다. 다음과 같은 경우에 발생합니다. |
|
|
입력, 선택, 텍스트 영역 |
양식 요소의 값을 변경합니다. 요소가 포커스를 잃은 후에 발생합니다. 즉, 블러 이벤트 이후 |
|
|
거의 모든 것 |
한 번 클릭(마우스 버튼을 눌렀다 놓음) |
|
|
a, 영역, 버튼, 입력, 라벨, 선택, 텍스트 영역 |
||
|
거의 모든 것 |
현재 요소 내에서 마우스 버튼을 눌렀습니다. |
|
|
거의 |
마우스 커서가 범위를 벗어났습니다. |
|
|
거의 모든 것 |
마우스 커서가 현재 요소 위에 있습니다. |
|
|
거의 모든 것 |
현재 요소 내에서 마우스 버튼이 해제되었습니다. |
|
|
창 이동 |
||
|
창 크기 조정 |
||
|
현재 요소에서 텍스트 선택 |
||
|
양식 데이터 제출 |
||
|
브라우저 창을 닫고 문서를 언로드하려고 합니다. |
다음 예를 완성하려면 새로운 개념인 이벤트가 필요합니다.
우리의 경우 이벤트는 사용자 작업(마우스로 버튼 클릭, 마우스로 브라우저 창 축소, 키보드에서 텍스트 입력 등)에 대한 프로그램의 반응입니다. 프로그램을 사용하면 사용자의 모든 작업에 대응할 수 있습니다.
문서가 로드될 때(사용자가 자신의 작업을 통해 웹 페이지를 로드할 때) 발생하는 가장 일반적인 이벤트 중 하나인 onload를 고려해 보겠습니다.
사용예를 살펴보자 자바스크립트 이벤트요소의 너비와 높이를 변경하려면 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() 함수에서 발생합니다.
작업 Js8_4. HTML 코드에 여러 이미지를 배치합니다( img 태그). 방법 변경을 사용하여:
— 모든 페이지 이미지의 크기(너비 및 높이 속성)
— 모든 이미지의 테두리 크기(테두리 속성).
코드를 완성하세요:
var allImg=문서...; // (var i=0; i에 대한 이미지 배열을 얻습니다.< allImg.length; i++){ allImg[i].....; // меняем 너비 속성...; // 변화 높이 속성...; // 테두리 변경 )
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에서 발생하는 상황에 최대한 가까운 이벤트를 처리하는 방법입니다.
작업 Js8_5. 지침에 따라 작업을 완료하세요.
녹색
...씨그린
... 마젠타
...보라
...해군
...로얄 블루
작업 Js8_7. 롤오버 이미지 만들기
— 코드에 태그 추가 img이미지와 함께.
- 이벤트 핸들러를 소개합니다. 마우스 오버 시(안내에 따라) 그리고 마우스아웃(납치 중). 이것을 함수로 수행하십시오.
마우스 오버 시태그에 로드하는 절차 img또 다른 이미지.
- 이벤트 핸들러에 연결 마우스아웃태그에 다른 이미지를 로드하는 절차 img.