onchange事件
在Html标记中,对于表单控件,都有onchange属性,该属性称为事件属性,主要是用来与#JavaScript#函数绑定,实现触发事件的功能。
JavaScript深入编程-从0基础到深入学习 线上.NET培训课程淘宝¥18购买已下架
onchange事件的功能是所在的表单控件的值发生了改变,则就会触发该事件,触发事件后就会去执行与之绑定的JavaScript代码。
onchange事件的基本语法如下:
onchange=“JavaScript函数或代码”;
下面在Visual Studio 2019中创建一个Html文件,并编写如下代码,实现对文本框的非空验证。
<script>function isEmptyString(str) { if (str.value == "") { document.write("用户名不能为空值。"); } }</script><input id="Text1" type="text" onchange="isEmptyString(this)" />
这是核心代码,说明如下:
在input表单标记上使用了onchange事件属性。绑定的事件是isEmptyString()函数,此函数是使用JavaScript代码编写的。在isEmptyString()函数中传入的参数是this,这里的this表示当前所在的input元素,是在Html DOM中查找的。以对象的形式传入到isEmptyString()函数中。然后在isEmptyString()函数代码中,使用了str.value获取文本框标记中输入的值。如果文本框的值为空,则输出“用户名不能为空值。”的提示信息。完整的代码如下图所示:
onchange绑定JS函数
在这里,一定要注意,onchange事件绑定的函数一定要存在,且是在input标记加载之前该JS函数已存在。
JS函数可以是在Html代码中,也可以是以独立的*.js文件引用的。
现在运行一下上面的完整代码,一下效果:
此页面是第一运行出来的结果,文本框中的值是空值,输入一些文本内容,虽然触发了onchange事件,但是没有满足条件,所以没有输出任何内容。
现在将文本框中输入的内容删除掉,一下结果:
当文本框中的内容全部删除之后,在页面上单击一下鼠标指针,则就会触发onchange事件,执行了isEmptyString()函数中的代码。
总结:对于onchange事件,触发的条件是html标记的值发生了改变,只要一改变,就会触发,且触发时,需要光标在页面上单击一下,表示文本内容修改完了,因为修改时,可能一下子会修改多个文字,因此,需要单击一下表示修改完成了,可以触发onchange事件了。