《HTML DOM 事件的详解》

表单事件：(简单列出一些具有代表性的事件)

属性            描述

onblur         元素失去焦点时触发

onchange    该事件在表单元素的内容改变时触发( <input>，<keygen>，<select>，和<textarea>)

onfocus       元素获取焦点时触发

onfocusin    元素即将获取焦点时触发

onfocusout  元素即将失去焦点时触发

oninput        元素获取用户输入时触发

onreset        表单重置时触发

onsearch     用户向搜索域输入文本时触发 ( <input="search"> )

onselect      用户选取文本时触发 ( <input> 和 <textarea> )

onsubmit     表单提交时触发

 

接着搭建有说服力的HTML来帮助理解：

<form action="嵌入到HTML.html" id="from1">

        姓名： <input type="text" id="name">

        <br>

        年龄： <input type="text" id="age">

        <br>

        性别：<select id="sex">

            <option value="true">男</option>

            <option value="false">女</option>

        </select>

        <br>

        <button type="submit">提交</button>

</form>

浏览器效果图：

接下来就是JS部分了：

1.首先获取下表单的id

var inputName = document.getElementById('name');

var inputAge = document.getElementById('age');

var selectSex = document.getElementById('sex');

var from1 = document.getElementById('from1');

 

2.介绍事件： (主要是onfocus onblur onchange onsubmit这四个事件)

//onfocus onblur

    inputName.onfocus = function () {

            console.log("姓名文本框获得了焦点");

}

    inputName.onblur = function () {

            console.log("姓名文本框失去了焦点");

}

//onchange

    selectSex.onchange = function () {

            console.log("selectSex的值发生了改变");

    }

    inputAge.onchange = function () {

            console.log("inputAge的值发生了改变");

    }

 //onsubmit

    from1.onsubmit = function () {

            console.log("from1表单提交");

            return false;//可以阻止表单提交，页面跳转

    }

 

3.浏览器对应显示的效果图：

流程如下：

(1)点击姓名文本框时显示出了对应的第一条控制台信息；

(2)当鼠标离开姓名文本框点击年龄框时，显示出第二条信息；

(3)输入18然后点击空白处时显示了第三条信息；

(4)点击把默认的下拉框中的男切换成女时，显示了第四条信息；

(5)点击提交按钮时，显示了第五条控制台信息。这些事件的功能看到这是不是很熟悉了呢