争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

js中有哪一些事件?js中常用事件的介绍

时间:2024/6/1作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
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执行,<bodyonload="alert(123)"></body>,其中onload后面可以写一个方法,如:onload="test()",然后在JavaScript中写一个test()方法,则在页面一开始加载的时候会先调用这个方法。

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>

注意:此方法只能写在<body>标签之中

三、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>
得到焦点:
&nbsp;&nbsp;&nbsp;&nbsp;<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事件

属于<form>表单元素,写在<form>表单标签内。语法:onsubmit=”return 函数名()”。

js中onsubmit事件的代码示例:

<%@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="">
    <br>
    <inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
</html>

七、js中常用事件之鼠标相关的事件

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="images/defaultAvatar.gif"alt="Smiley">
</body>
</html>

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>

以上就是本篇文章的全部内容,更多关于js事件的内容可以参考js开发手册

以上就是js中有哪些事件?js中常用事件的介绍的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:js中有哪些事件?js中常用事件的介绍




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版