DOM 요소 및 이벤트에 대한 자세한 설명-JS 튜토리얼-php.cn

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

王林

풀어 주다： 2020-05-25 17:55:07

앞으로

2677명이 탐색했습니다.

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>

로그인 후 복사

Php8, 나도 갈게