首页 > 代码库 > JavaScript中常用的事件
JavaScript中常用的事件
1.onclick事件 点击事件(onclick并不是js中的方法,onclick只是浏览器提供js的一个dom接口,让js可以操作dom,所以onclick大小写都是没问题的,比如HTML代码就不用区分大小写) 例: <%@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(提交按钮) 2.onload事件 可以body执行,<bodyonload="alert(123)"></body>,其中onload后面可以写一个方法,如:onload="test()",然后在JavaScript中写一个test()方法,则在页面一开始加载的时候会先调用这个方法 <%@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> 注意:此方法只能写在<body>标签之中 3.onchange事件 事件在内容改变的时候触发,和jQuery中的change()方法一样 当内容改变时触发。可用于文本框、列表框等对象,该事件一般用于响应用户修改内容带来的其他改变操作。 说明:当用户向一个文本框中输入文本时,不会触发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 =http://www.mamicode.com/ x.toUpperCase(); ????} ? ?</script> </head> <body> ?<p> ?<labelfor="name">用户名:</label> ?<inputtype="text"id="fname"onchange="upperCase()"value=http://www.mamicode.com/""/> </p> </body> </html> 说明:上例实际效果是,当输入框失去焦点时内容转成大写。出现这种情况是由于input必须是失去焦点才会检测到内容发生改变。而change事件通常是用于下拉菜单select标签。 4.onblur事件和onfocus事件 当前元素失去焦点时触发该事件,对应的是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=http://www.mamicode.com/="") alert("文本框里必须填写内容!"); ??} ?functionsetStyle(x){ ??document.getElementById(x).style.background="yellow" ?} ?</script> </head> <body> 失去焦点: ?<inputtype="text"name="name"value=http://www.mamicode.com/""size="30"onblur="chkvalue(this)"><br> 得到焦点: <inputtype="text"id="name"value=http://www.mamicode.com/""size="30"onfocus="setStyle(this.id)"> </body> </html> 5.onscroll事件 窗口滚动事件:当页面滚动时调用函数。此事件写在方法的外面,且函数名后面不加括号,例如window.onscroll=move 例: <%@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> 6.onsubmit事件 属于<form>表单元素,写在<form>表单标签内。语法:onsubmit=”return 函数名()” 例: <%@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("测试onsubmit........"+testForm.name.value); ??} ? ?</script> </head> <body> <formaction=""method="post"name="testForm"onsubmit="returnmove()"> <inputtype="text"name="name"value=http://www.mamicode.com/""> <br> <inputtype="submit"name="submit"value=http://www.mamicode.com/"测试onsubmit"/> </form> </body> </html> 2.鼠标相关事件 1.onmousemove和onmouseout和onmouseover事件 Onmouseover:鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,无论怎样移动都只触发一次函数。 Onmouseout:鼠标离开某对象范围时,触发事件调用函数。 Onmousemove:鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,只要鼠标动一次就触发一次事件。 例: <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionbigImg(x) { x.style.height="180px"; x.style.width="180px"; } functionnormalImg(x) { x.style.height="128px"; x.style.width="128px"; } </script> </head> <body> <imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src=http://www.mamicode.com/"images/defaultAvatar.gif"alt="Smiley"> </body> </html> 2.onmouseup和onmousedown Onmouseup:当鼠标松开时触发事件 Onmousedown:当鼠标按下键时触发事件 例: <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionmouseDown(){ document.getElementById("p1").style.color="red"; } functionmouseUp(){ document.getElementById("p1").style.color="green"; } </script> </head> <body> <pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()"> 请点击文本!mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。 </p> </body> </html>
常用的事件主要有:
(1)单击事件:onclick。用户单击鼠标按键时产生的事件,同时。nclick指定的事件处理程序或代码将被调用执行.
(2)改变事件:onchange。当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件。
(3)选中事件:onselect。当text或textarea对象中的文字被选中时会引发该事件。如:
<ipnut type="text" value="http://www.mamicode.com/默认信息”onselect=alert(”您选中T文本框中的文字”)>
(4)获得焦点事件:onfocus。用户单击text或textarea以及select对象,即光标落在文本框或选择框时会产生该事件。如:
<select name= "zhengjian" onfocus=alert(”我成为焦点”)>
(5)失去焦点事件:onblur.失去焦点事件正好与获得焦点事件相对,当text或textarea以及select对象不再拥有焦点而退出后台时,引发该事件。
(6)载人文件事件:onload,’当页面文件载人时产生该事件。onload的一个作用就是在首次载人一个页面文件时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用,本事件是window的事件,但是在HTML中指定事件处理程序时,一般把它写在<body>标记中。如:
<body onl oad=alert(”正在加载页面,请等待一”)>
(7)卸载文件事件:onunload。与载人文件事件。nload正好相反,当Web页面退出时引发的事件,并可更新。ookie的状态。如:
<body onunload=confirm(”你确定要离开本页?”)>
(8)鼠标镇盖事件:onmouseover, onm ouseover是当鼠标位于元素上方时所引发的事件。如:
<input type= "boutton" value=http://www.mamicode.com/”按钮”onmouseover="window. status=‘请您注意下面的状态栏·;return true">
(9)鼠标离开事件:onmouseout, onm ouseout是当鼠标离开元素时引发的事件。如果和鼠标覆盖事件同时使用,可以创建动态按钮的效果。
(10)一般事件。
ondbclick:鼠标双击事件。
onkeypress:当键盘上的某个键被按下并且释放时触发的事件,要求页面内必须有激活的对象。
onkeydown:当键盘上某个键被按下时触发的事件,要求页面内必须有激活的对象。
onkeyup:当键盘上某个键被放开时触发的事件,要求页面内必须有激活的对象。
(11)页面相关事件。
onabort:图片在下载时被用户中断时触发的事件。
onbeforeunload:当前页面的内容将要被改变时触发的事件。
JavaScript中常用的事件