클릭, 입력, 스크롤, 마우스 이동… 모든 이벤트. JavaScript에서 이벤트를 올바르게 이해하고 처리 할 수있어서 사용자와 상호 작용하는 동적 웹 페이지를 만들 수 있어야합니다. 이 기사에서 JS 이벤트 개념에서 실제 처리 방법으로 완전히 정복합시다.
이벤트는 무엇입니까?
사용자 신호 버튼 클릭, 키보드 입력 및 창 크기 조정과 같은 다양한 이벤트 | 예 | 이벤트 이름 | | —— | ———- | | 버튼 클릭 | 클릭 | 키 입력 | 키다리, keyup | 폼 변속기 | 제출 | 마우스 움직임 | MouseMove | 창 스크롤 | 스크롤
이벤트 처리기를 등록하는 방법
* HTML 속성 직접 지정
“HTML 버튼”✅ 간단하지만 유지 보수에 권장되지는 않습니다
2. JavaScript 내에 등록하십시오
“JavaScript const btn = docum 이벤트를 다룰 가능성
3. addeventListener 사용 (권장 방법)
“”JavaScript btn.addeventListener ( “click”, () => {alert ( “clicked”);}; “) .removeEventListener ()가 가능합니다.
이것이 의미주의입니다
“”JavaScript btn.addeventListener ( “click”, function () {console.log (this); // clicked element}); btn.addeventListener ( “click”, () => {console.log (this) //}}; 기능 및 화살표 기능의 이것 차이점을 알고 있어야합니다
이벤트 객체
모든 이벤트 핸들러 이벤트 객체는 자동으로 “JavaScript Btn.addeventListener (“click “, function (e) {console.log (e.target); // properties | | | —— | | | | | | | 목표 | 이벤트의 이벤트 | 유형 | 이벤트 유형 (클릭, 키 다운) | 예방 대상 () | 기본 액션 블록 | stoppropagation () | 이벤트 전파
이벤트 대표단
상위 요소 및 프로세스의 이벤트에서 이벤트에서 이벤트가 “javaScript documents.querySelector (“#List “). addEventListener (“click “, function (e) {if (e.target.tagname ===”li “) {console.log (“clicked item : “, e.target.textContent)” “에서 발생합니다.
자주 사용되는 이벤트
“JavaScript // 입력 값 실시간 -타임 감지 입력 .adeventListener (“입력”, () => {}); // 양식 제출 양식 방지. AddeventListener (“제출”, (e) =>})”🖼️ Alt Tag
예 예 : TODO 목록 항목을 클릭하십시오
““html”“`javaScript document.getElementById (“todo-list”). addeventListener (“click”, function (e) {if (e.target.tagname ===“li”) {e.target.classlist.toggle (“dod”);“});“}});
마치다
이벤트 처리 웹 개발의 핵심 기술입니다. 동적 웹 UI 개발은 AddventListener, 이벤트 객체 및 대표단을 배우기가 훨씬 쉽습니다. 오늘부터 이벤트 처리를 자유롭게 사용하십시오! 🔎 다음 게시물 주제 추천 → No. 24 : 실제로 사용되는 JavaScript 기능 → 20 : JavaScript dom 완전히 이해
참조
https://developer.mozilla.org/ko/docs/web/api/event https://javaScript.info/events