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 //鼠标移动

2. Document or element loaded:

onload //元素或文档加载完毕

3. Form control status monitoring:

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

2. Obtain element nodes

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

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

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

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

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

3. Event binding method

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

Example:

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

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

Example:

btn.onclick = function (){
};

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!