JavaScript中一些常用事件
来源：互联网 发布：linux usb无线网卡 编辑：程序博客网 时间：2024/06/05 03:30
1.常用事件
2.onclick事件
点击事件（onclick并不是js中的方法，onclick只是浏览器提供js的一个dom接口，让js可以操作dom，所以onclick大小写都是没问题的，比如HTML代码就不用区分大小写）
例：
<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
function myFunction(){
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()方法，则在页面一开始加载的时候会先调用这个方法
<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
function test(){
alert("测试onload方法");
}
</script>
</head>
<bodyonload="test()">
</body>
</html>
注意：此方法只能写在<body>标签之中
3.onchange事件
事件在内容改变的时候触发，和Jquery中的change()方法一样
当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。
说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件，如果是下拉框，则选择结束后即触发。
<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
function upperCase(){
var x = 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>
说明：上例实际效果是，当输入框失去焦点时内容转成大写。出现这种情况是由于input必须是失去焦点才会检测到内容发生改变。而change事件通常是用于下拉菜单select标签。
4.onblur事件和onfocus事件
当前元素失去焦点时触发该事件，对应的是onfocus事件：得到焦点事件
<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
function chkvalue(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>
效果：第一个输入框失去焦点时弹出一个对话框，第二个输入框得到焦点时则第一个输入框的背景色变为黄色
5.onscroll事件
窗口滚动事件：当页面滚动时调用函数。此事件写在方法的外面，且函数名后面不加括号，例如window.onscroll=move
例：
<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
function move() {
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 函数名()”
例：
<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
function move() {
alert("测试onsubmit........"+testForm.name.value);
}
</script>
</head>
<body>
<formaction=""method="post"name="testForm"onsubmit="return move()">
<inputtype="text"name="name"value="">
<br>
<inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
</html>
2.鼠标相关事件
1.onmousemove和onmouseout和onmouseover事件
Onmouseover:鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。
Onmouseout:鼠标离开某对象范围时，触发事件调用函数。
Onmousemove: 鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。
例：
<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
function bigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
function normalImg(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>
2.onmouseup和onmousedown
Onmouseup:当鼠标松开时触发事件
Onmousedown:当鼠标按下键时触发事件
例：
<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
function mouseDown(){
document.getElementById("p1").style.color="red";
}
function mouseUp(){
document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
</html>
- JavaScript中一些常用事件
- JavaScript中的一些常用事件
- JavaScript中常用的事件
- JavaScript中常用的事件
- javascript中一些简单事件的处理
- javascript中一些简单事件的处理
- Dom中一些常用的事件
- js中常用的一些事件总结
- Javaweb中JavaScript常用的事件
- Javaweb中JavaScript常用的事件
- javascript 中一些常用的正则表达式
- javascript中数组的一些常用方法
- 搜集整理后的一些JavaScript常用事件
- javascript中常用鼠标事件和键盘事件
- javascript一些触发事件
- android一些常用事件
- javascript 常用事件
- javaScript 的常用事件
- Black Hat python-2.1
- SurfaceView在HOME屏蔽下黑屏的解决办法
- 小码农的代码（四）----------JAVA中Timer定时器与Spring定时任务
- [NOI2011][JZOJ2784]阿狸的打字机
- 关于Docker你应该知道的10件事
- JavaScript中一些常用事件
- 年终总结
- java计算文本MD5值
- 小码农的代码（三）----------SpringJDBC多数据源应用
- 代理设计模式
- Linux模块化机制和module_init
- 模重复平方计算法（快速幂）【Python实现】<信安数论>
- BZOJ 1036: [ZJOI2008]树的统计Count 【树链剖分】
- UIApplicationState
