JavaScript中常用的事件

JavaScript中常⽤的事件
点击事件(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点击事件");
酒店vod
}
</script>
</head>
<body>
<center>
<buttononclick="myFunction()">点击这⾥</button>
</center>
</body>
</html>
onclick通常在下列基本对象中产⽣:
button(按钮对象)、checkbox(复选框)、radio(单选框)、reset buttons(重置按钮)、submit buttons(提交按钮)
可以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>标签之中
事件在内容改变的时候触发,和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 = ElementById("fname").value;
     ElementById("fname").value = x.toUpperCase();
    }
  </script>
</head>
<body>
 <p>
 <labelfor="name">⽤户名:</label>
 <inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
</html>
说明:上例实际效果是,当输⼊框失去焦点时内容转成⼤写。出现这种情况是由于input必须是失去焦点才会检测到内容发⽣改变。⽽change事件通常是⽤于下拉菜单select标签。
当前元素失去焦点时触发该事件,对应的是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){
  ElementById(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>
三峡之秋教案窗⼝滚动事件:当页⾯滚动时调⽤函数。此事件写在⽅法的外⾯,且函数名后⾯不加括号,例如scroll=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("页⾯滚动时调⽤");
  }
 </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>
再就业培训
属于<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("测试"+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>
2.⿏标相关事件
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:当⿏标松开时触发事件
w3c
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(){
}
functionmouseUp(){
}
</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="默认信息”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 onload=alert(”正在加载页⾯,请等待⼀”)>
(7)卸载⽂件事件:onunload。与载⼈⽂件事件。nload正好相反,当Web页⾯退出时引发的事件,并可更新。ookie的状态。如:
<body onunload=confirm(”你确定要离开本页?”)>
(8)⿏标镇盖事件:onmouseover, onmouseover是当⿏标位于元素上⽅时所引发的事件。如:
<input type= "boutton" value=”按钮”onmouseover= "window. status=‘请您注意下⾯的状态栏·;return true">
(9)⿏标离开事件:onmouseout, onmouseout是当⿏标离开元素时引发的事件。如果和⿏标覆盖事件同时使⽤,可以创建动态按钮的效果。
(10)⼀般事件。
ondbclick:⿏标双击事件。
onkeypress:当键盘上的某个键被按下并且释放时触发的事件,要求页⾯内必须有激活的对象。
onkeydown:当键盘上某个键被按下时触发的事件,要求页⾯内必须有激活的对象。
onkeyup:当键盘上某个键被放开时触发的事件,要求页⾯内必须有激活的对象。
(11)页⾯相关事件。
onabort:图⽚在下载时被⽤户中断时触发的事件。
onbeforeunload:当前页⾯的内容将要被改变时触发的事件。

本文发布于:2024-09-20 13:32:10,感谢您对本站的认可!

本文链接:https://www.17tex.com/xueshu/715771.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:事件   触发   焦点   改变   对象
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议