常用的表单事件有那些?

简介: 常用的表单事件有那些?

我们首先来了解下在JavaScript中什么是事件?

      JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。


基本原理

当我们在某个元素上添加一个事件时,根据事件执行的前后可以把它当成一个事件流,例如在DOM事件中规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后是冒泡阶段,可以在这个阶段对事件做出响应。


首先我们来了解下


1.窗口事件

当鼠标打开页面后,再点击其他文件窗口是就会触发焦点事件


onblur :失去焦点

onfocus:获得焦点

/*  当窗口失去焦点时 */
    window.onblur = function () {
        console.log('窗口失去了焦点!');
    }
    /*  当窗口获得焦点时 */
    window.onfocus = function () {
        console.log('窗口获得了焦点!');

当然了 还有伪类 也可以使用 比如:

 《div id=“wl”》

css文件:        #wl:focus{

background:red

}

focus焦点 css写出onfocus

相关文章
|
1月前
|
JavaScript 前端开发
|
15天前
绑定表单
【6月更文挑战第13天】绑定表单。
13 3
|
25天前
|
Python
表单
【6月更文挑战第3天】表单。
11 1
|
1月前
|
JavaScript 前端开发
js基础——事件(鼠标事件、键盘事件、表单事件......)
js基础——事件(鼠标事件、键盘事件、表单事件......)
38 0
|
数据采集 数据安全/隐私保护
什么是表单?
什么是表单?
|
JavaScript 前端开发
Odoo 自定义form表单按钮点击事件处理程序
Odoo 自定义form表单按钮点击事件处理程序
250 0
|
JavaScript
史上最详细的DOM事件之表单事件
史上最详细的DOM事件之表单事件 上篇博客讲了DOM的键盘事件,这篇博客我们来讲一讲DOM的表单事件。 HTML代码: <form action=""> <input type="text" autofocus> <br> <input type="text"><br> <input type="search"><br> <input type="reset"><br> <input type="submit"><br> <textarea name="" id="area" cols
|
Web App开发
52、表单事件
input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框(<input type=checkbox>)或单选框(<input type=radio>),用户改变选项时,也会触发这个事件。另外,对于打开contenteditable属性的元素,只要值发生变化,也会触发input事件。
148 0
|
JavaScript
v-for动态添加表单,并且获取表单中的值
v-for动态添加表单,并且获取表单中的值