JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。那么,js中有哪些事件呢?本篇文章将给大家来介绍关于js中常用的事件。
话不多说,我们来直接进入正题。
一、js中常用事件之onclick事件
点击事件(onclick并不是js中的方法,onclick只是浏览器提供js的一个dom接口,让js可以操作dom,所以onclick大小写都是没问题的,比如HTML代码就不用区分大小写)。
js中onclick事件的代码示例:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionmyFunction(){ alert("测试onclick点击事件"); } </script> </head> <body> <center> <buttononclick="myFunction()">点击这里</button> </center> </body> </html>
说明:
onclick通常在下列基本对象中产生:
button(按钮对象)、checkbox(复选框)、radio(单选框)、reset buttons(重置按钮)、submit buttons(提交按钮)
二、js中常用事件之onload事件
可以body执行,
js中onload事件的代码示例:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functiontest(){ alert("测试onload方法"); } </script> </head> <bodyonload="test()"> </body> </html>
注意:此方法只能写在
标签之中三、js中常用事件之onchange事件
当内容改变时触发。可用于文本框、列表框等对象,该事件一般用于响应用户修改内容带来的其他改变操作。
js中onchange事件的代码示例:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionupperCase(){ varx = document.getElementById("fname").value; document.getElementById("fname").value = x.toUpperCase(); } </script> </head> <body> <p> <labelfor="name">用户名:</label> <inputtype="text"id="fname"onchange="upperCase()"value=""/> </p> </body> </html>
说明:当用户向一个文本框中输入文本时,不会触发onchange事件,只有用户输入结束后,单击文本框以外的区域,使文本框失去焦点时才触发该事件,如果是下拉框,则选择结束后即触发。
上例的效果是,当输入框失去焦点时内容转成大写。出现这种情况是由于input必须是失去焦点才会检测到内容发生改变。而change事件通常是用于下拉菜单select标签。
四、js中常用事件之onblur事件和onfocus事件
当前元素失去焦点时触发该事件,对应的是onfocus事件:得到焦点事件;onblur事件:元素失去焦点 。
js中onblur事件和onfocus事件的代码示例:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionchkvalue(txt) { if(txt.value=="") alert("文本框里必须填写内容!"); } functionsetStyle(x){ document.getElementById(x).style.background="yellow" } </script> </head> <body> 失去焦点: <inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br> 得到焦点: <inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)"> </body> </html>
五、js中常用事件之onscroll事件
窗口滚动事件:当页面滚动时调用函数。此事件写在方法的外面,且函数名后面不加括号,例如window.onscroll=move。
js中onscroll事件的代码示例:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionmove() { alert("页面滚动时调用"); } window.onscroll = move; </script> </head> <body> 测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> </body> </html>
六、js中常用事件之onsubmit事件
属于