웹 프론트엔드 JS 튜토리얼 DOM 요소 및 이벤트에 대한 자세한 설명

DOM 요소 및 이벤트에 대한 자세한 설명

May 25, 2020 pm 05:55 PM
dom 이벤트

DOM 요소 및 이벤트에 대한 자세한 설명

이벤트란 무엇인가요?

이벤트는 사용자 작업이나 요소의 상태를 나타냅니다. 지정된 요소는 관련 이벤트를 수신하고 이벤트 핸들러를 바인딩합니다.

이벤트 핸들러 함수란 무엇인가요?

요소는 이벤트를 수신하고 이벤트가 발생하면 자동으로 작업을 수행합니다.

1. 이벤트 기능 분류

1. 마우스 이벤트

onclick //单击
ondblclick //双击
onmouseover //鼠标移入
onmouseout //鼠标移出
onmousemove //鼠标移动
로그인 후 복사

2. 문서 또는 요소 로드:

onload //元素或文档加载完毕
로그인 후 복사

3. 요소 노드 가져오기

1. 태그 이름을 기반으로 요소 노드 목록을 가져옵니다

onfocus //文本框获取焦点
onblur //文本框失去焦点
oninput //实时监听输入
onchange //两次输入内容发生变化时触发,或元素状态改变时触发
onsubmit //form元素监听,点击提交按钮后触发,通过返回值控制数据是否可以发送给服务器
로그인 후 복사

2. 클래스 속성 값을 기반으로 요소 노드 목록을 가져옵니다

3. id 속성 값을 기반으로 요소 노드 목록을 가져옵니다. . 이름 속성 값을 기반으로 요소 노드 목록을 가져옵니다DOM 요소 및 이벤트에 대한 자세한 설명

DOM 요소 및 이벤트에 대한 자세한 설명3. 이벤트 바인딩 방법

1. 이벤트 이름을 레이블 속성으로 요소에 바인딩합니다DOM 요소 및 이벤트에 대한 자세한 설명

예:

var elems = document.getElementsByTagName("");
/*参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/
로그인 후 복사
2. 동적 바인딩: 요소 노드 가져오기, 동적 이벤트 추가
예:

<button onclick="alert()">点击</button>
로그인 후 복사

추천 튜토리얼:

js 입문 튜토리얼

위 내용은 DOM 요소 및 이벤트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

이벤트 ID 4660: 개체가 삭제되었습니다. [수정] 이벤트 ID 4660: 개체가 삭제되었습니다. [수정] Jul 03, 2023 am 08:13 AM

독자 중 일부는 이벤트 ID4660을 경험했습니다. 그들은 무엇을 해야 할지 확신하지 못하는 경우가 많으므로 이 가이드에서 이에 대해 설명합니다. 이벤트 ID 4660은 일반적으로 개체가 삭제될 때 기록되므로 컴퓨터에서 이 문제를 해결할 수 있는 몇 가지 실용적인 방법도 살펴보겠습니다. 이벤트 ID4660이란 무엇입니까? 이벤트 ID 4660은 Active Directory의 개체와 관련되어 있으며 다음 요소에 의해 트리거됩니다. 개체 삭제 – Active Directory에서 개체가 삭제될 때마다 이벤트 ID 4660이 포함된 보안 이벤트가 기록됩니다. 수동 변경 - 사용자 또는 관리자가 개체의 사용 권한을 수동으로 변경할 때 이벤트 ID 4660이 생성될 수 있습니다. 이는 권한 설정을 변경하거나, 액세스 수준을 수정하거나, 사람이나 그룹을 추가 또는 제거할 때 발생할 수 있습니다.

iPhone 잠금 화면에서 예정된 캘린더 이벤트 받기 iPhone 잠금 화면에서 예정된 캘린더 이벤트 받기 Dec 01, 2023 pm 02:21 PM

iOS 16 이상을 실행하는 iPhone에서는 예정된 캘린더 이벤트를 잠금 화면에 직접 표시할 수 있습니다. 이 작업이 어떻게 수행되었는지 알아보려면 계속 읽어보세요. 시계 페이스 컴플리케이션 덕분에 많은 Apple Watch 사용자는 손목을 통해 다음 캘린더 이벤트를 확인하는 데 익숙합니다. iOS16 및 잠금 화면 위젯의 등장으로 기기 잠금을 해제하지 않고도 iPhone에서 직접 동일한 캘린더 이벤트 정보를 볼 수 있습니다. 캘린더 잠금 화면 위젯은 두 가지 형태로 제공되며, 다음 예정된 이벤트 시간을 추적하거나 이벤트 이름과 시간을 표시하는 더 큰 위젯을 사용할 수 있습니다. 위젯 추가를 시작하려면 Face ID 또는 Touch ID를 사용하여 iPhone을 잠금 해제하고 길게 누르세요.

JavaScript에서 'oninput' 이벤트의 목적은 무엇입니까? JavaScript에서 'oninput' 이벤트의 목적은 무엇입니까? Aug 26, 2023 pm 03:17 PM

입력 상자에 값이 추가되면 oninput 이벤트가 발생합니다. JavaScript에서 oninput 이벤트를 구현하는 방법을 이해하려면 다음 코드를 실행해 보세요. - 예<!DOCTYPEhtml><html> <body> <p>아래 쓰기:</p> <inputtype="text&quot

jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 Feb 23, 2024 pm 01:12 PM

jQuery는 DOM 조작, 이벤트 처리, 애니메이션 효과 등을 단순화하는 데 사용할 수 있는 인기 있는 JavaScript 라이브러리입니다. 웹 개발에서 우리는 선택 요소에 대한 이벤트 바인딩을 변경해야 하는 상황에 자주 직면합니다. 이 기사에서는 jQuery를 사용하여 선택 요소 변경 이벤트를 바인딩하는 방법을 소개하고 특정 코드 예제를 제공합니다. 먼저 라벨을 사용하여 옵션이 포함된 드롭다운 메뉴를 만들어야 합니다.

vue3에서 DOM 또는 컴포넌트에 대한 참조 바인딩이 실패하는 이유는 무엇이며 해결 방법은 무엇입니까? vue3에서 DOM 또는 컴포넌트에 대한 참조 바인딩이 실패하는 이유는 무엇이며 해결 방법은 무엇입니까? May 12, 2023 pm 01:28 PM

Vue3ref 바인딩 DOM 또는 컴포넌트 실패 이유 분석 시나리오 설명 Vue3에서는 컴포넌트 또는 DOM 요소를 바인딩하기 위해 ref를 사용하는 경우가 많습니다. ref는 관련 컴포넌트를 바인딩하는 데 명확하게 사용되지만 ref 바인딩은 종종 실패합니다. 참조 바인딩 실패 상황의 예 참조 바인딩이 실패하는 대부분의 경우는 참조가 구성 요소에 바인딩될 때 구성 요소가 아직 렌더링되지 않아 바인딩이 실패하는 것입니다. 또는 컴포넌트가 처음에 렌더링되지 않고 ref가 바인딩되지 않은 경우 컴포넌트가 렌더링되기 시작하면 ref도 바인딩되기 시작하지만 이때 ref와 컴포넌트 간의 바인딩이 완료되지 않는 문제가 발생합니다. 구성 요소 관련 방법을 사용할 때. ref에 바인딩된 구성 요소는 v-if를 사용하거나 상위 구성 요소는 v-if를 사용하여 페이지를

vue dom은 무슨 뜻인가요? vue dom은 무슨 뜻인가요? Dec 20, 2022 pm 08:41 PM

DOM은 문서 객체 모델이며 HTML 프로그래밍을 위한 인터페이스입니다. 페이지의 요소는 DOM을 통해 조작됩니다. DOM은 HTML 문서의 메모리 내 개체 표현이며 JavaScript를 사용하여 웹 페이지와 상호 작용하는 방법을 제공합니다. DOM은 문서 노드를 루트로 하는 노드의 계층 구조(또는 트리)입니다.

Vue3에서 DOM 노드를 얻는 방법은 무엇입니까? Vue3에서 DOM 노드를 얻는 방법은 무엇입니까? May 11, 2023 pm 04:55 PM

1. 기본 js는 DOM 노드를 가져옵니다. document.querySelector(선택기) document.getElementById(id 선택기) document.getElementsByClassName(클래스 선택기).... 2. vue2에서 현재 구성 요소의 인스턴스 객체를 가져옵니다. 각 vue Each 구성 요소 인스턴스에는 해당 DOM 요소 또는 구성 요소에 대한 참조를 저장하는 $refs 개체가 포함되어 있습니다. 따라서 기본적으로 구성 요소의 $refs는 빈 개체를 가리킵니다. 먼저 구성 요소에 ref="name"을 추가한 다음 this.$refs를 전달할 수 있습니다.

Jquery에서 일반적으로 사용되는 이벤트는 무엇입니까? Jquery에서 일반적으로 사용되는 이벤트는 무엇입니까? Jan 03, 2023 pm 06:13 PM

jquery에서 일반적으로 사용되는 이벤트는 다음과 같습니다. 1. 창 이벤트 2. 마우스 클릭, 이동 이벤트, 이동 이벤트 등을 포함하여 사용자가 문서에서 마우스를 이동하거나 클릭할 때 생성되는 이벤트입니다. 3. 키보드 이벤트, 키 누르기 이벤트, 키 놓기 이벤트 등을 포함하여 사용자가 키보드의 키를 누르거나 놓을 때마다 이벤트가 생성됩니다. 4. 요소가 포커스를 얻을 때와 같은 폼 이벤트, focus(); 이벤트가 트리거되고 포커스를 잃으면 Blur() 이벤트가 트리거되고 양식이 제출될 때 submit() 이벤트가 트리거됩니다.

See all articles