Home > Web Front-end > JS Tutorial > Detailed explanation of DOM elements and events

Detailed explanation of DOM elements and events

王林
Release: 2020-05-25 17:55:07
forward
2741 people have browsed it

Detailed explanation of DOM elements and events

What is an event?

Events refer to user actions or the state of an element. The specified element listens to relevant events and binds event handlers.

What is an event handling function?

The element listens for events and automatically performs operations when the event occurs.

1. Event function classification

1. Mouse event

onclick //单击
ondblclick //双击
onmouseover //鼠标移入
onmouseout //鼠标移出
onmousemove //鼠标移动
Copy after login

2. Document or element loaded:

onload //元素或文档加载完毕
Copy after login

3. Form control status monitoring:

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

2. Obtain element nodes

1. Obtain the element node list according to the label name

var elems = document.getElementsByTagName("");
/*参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/
Copy after login

2 , Get the element node list based on the class attribute value

Detailed explanation of DOM elements and events

##3, Get the element node list based on the id attribute value

Detailed explanation of DOM elements and events

4, Get the element list based on the name attribute value

Detailed explanation of DOM elements and events

3. Event binding method

1. Inline method: The event name is bound to the element as a label attribute

Example:

<button onclick="alert()">点击</button>
Copy after login

2. Dynamic binding: Get the element node and dynamically add the event

Example:

btn.onclick = function (){
};
Copy after login
Recommended tutorial:

js introductory tutorial

The above is the detailed content of Detailed explanation of DOM elements and events. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template