======Javascript HTML DOM Events====== * description : Javascript HTML DOM Events * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-20 \\ =====Source of the article==== * [[https://www.w3schools.com/js/js_htmldom_events.asp|Javascript HTML DOM Events]] \\ %%HTML DOM%%을 사용하면 %%JavaScript%%가 %%HTML%% 이벤트에 반응할 수 있습니다:\\ =====Reacting to Events===== 사용자가 %%HTML%% 요소를 클릭 할 때와 같이 이벤트가 발생하면, %%JavaScript%%를 실행될 수 있습니다.\\ \\ 사용자가 요소를 클릭 할 때 코드를 실행하려면, %%HTML%% 이벤트 속성에 %%JavaScript%% 코드를 추가하십시오.\\ \\


onclick=JavaScript

%%HTML%% 이벤트의 에시는 다음과 같습니다:\\ * 사용자가 마우스를 클릭 할 때 * 웹 페이지가 로딩 되었을 때 * 이미지가 로딩 되었을 때 * 마우스가 요소 위로 이동할 때 * 입력 필드가 변경된 경우 * %%HTML%% 양식을 제출할 때 * 사용자가 키를 입력할 때 다음 예제에서, 사용자가 클릭하면 ''%%

%%'' 요소의 콘텐츠가 변경됩니다.\\ ====예제==== `Click on this text!` \\ 다음 예제에서는, 이벤트 핸들러(event handler)가 함수를 호출합니다:\\ ====예제==== `Click on this text!` =====HTML Event Attributes===== %%HTML%% 요소에 이벤트를 할당하려면 이벤트 속성을 사용할 수 있습니다.\\ ====예제==== 버튼 요소에 onclick 이벤트를 할당합니다.\\ `Click the button to display the date.` \\ 상기 예제에서, ''displayDate()''함수는 버튼이 클릭되면 실행됩니다.\\ =====Assign Events Using the HTML DOM===== %%HTML DOM%%을 사용하면 %%JavaScript%%를 사용하여 %%HTML%% 요소에 이벤트를 할당할 수 있습니다.\\ ====예제==== 버튼 요소에 onclick 이벤트를 할당합니다.\\ \\ 위의 예제에서 ''displayDate'' 함수는 ''id="myBtn"''를 가진 %%HTML%% 요소에 할당됩니다.\\ \\ 버튼을 클릭하면 함수가 실행됩니다.\\ \\ =====The onload and onunload Events===== ''onload'' 및 ''onunload'' 이벤트는 사용자가 페이지에 들어가거나 페이지를 떠날 때 작동됩니다.\\ \\ ''onload'' 이벤트는 방문자의 브라우저 유형 및 브라우저 버전을 확인하고,\\ 해당 정보를 기반으로 적절한 버전의 웹 페이지를 로딩하는 데 사용할 수 있습니다.\\ \\ ''onload'' 및 ''onunload'' 이벤트를 사용하여 쿠키를 처리할 수 있습니다.\\ ====예제==== =====The onchange Event===== ''onchange'' 이벤트는 종종 입력 필드의 유효성 검사와 결합하여 사용됩니다.\\ \\ 다음은 onchange를 사용하는 방법의 예제입니다. 사용자가 입력 필드의 내용을 변경하면 ''%%upperCase()%%'' 함수가 호출됩니다.\\ ====예제==== `Enter your name: When you leave the input field, a function is triggered which transforms the input text to upper case.` =====The onmouseover and onmouseout Events===== ''onmouseover'' 및 ''onmouseout'' 이벤트는 사용자가 %%HTML%% 요소 위로 마우스를 가져 가거나\\ %%HTML%% 요소에서 벗어날 때 함수를 작동시킬 때 사용할 수 있습니다.\\ \\ `Mouse Over Me` =====The onmousedown, onmouseup and onclick Events===== ''onmousedown'', ''onmouseup'' 및 ''onclick'' 이벤트는 모두 마우스 클릭의 일부입니다.\\ 먼저 마우스 버튼을 클릭하면 ''onmousedown'' 이벤트가 작동되고,\\ 마우스 버튼을 놓으면 ''onmouseup'' 이벤트가 작동되고\\ 마지막으로 마우스 클릭이 완료되면, ''onclick'' 이벤트가 작동됩니다.\\ \\ `Click Me` =====More Examples===== %%onmousedown and onmouseup%%\\ 사용자가 마우스 버튼을 누르고 있을 때 이미지를 변경합니다.\\ `Click mouse and hold down!` \\ %%onload%%\\ 페이지 로딩이 완료되면 alert 상자를 표시합니다.\\ \\ %%onfocus%%\\ 포커스를 받으면 입력 필드의 배경색을 변경합니다.\\ `Enter your name: When the input field gets focus, a function is triggered which changes the background-color` \\ %%Mouse Events%%\\ 커서를 요소 위로 이동하면 요소의 색상을 변경합니다.\\ `Mouse over this text` =====HTML DOM Event Object Reference===== 모든 %%HTML DOM%% 이벤트 목록은 [[https://www.w3schools.com/jsref/dom_obj_event.asp|HTML DOM Event Object Reference]]를 참조하세요.\\ {{tag>오션, Javascript HTML DOM Events}}