JavaScript中常用的事件
- 格式：pdf
- 大小：117.23 KB
- 文档页数：3
JavaScript中常⽤的事件
1.onclick事件
点击事件（onclick并不是js中的⽅法，onclick只是浏览器提供js的⼀个dom接⼝，让js可以操作dom，所以onclick⼤⼩写都是没问题的，⽐如HTML代码就不⽤区分⼤⼩写）
例：<%@pagelanguage="Java"import="java.util.*"pageEncoding="UTF-8"%>
JavaScript的⼀些常⽤⽅法
functionmyFunction(){
alert("测试onclick点击事件");
}
点击这⾥
onclick通常在下列基本对象中产⽣：
button(按钮对象)、checkbox(复选框)、radio(单选框)、reset buttons(重置按钮)、submit buttons(提交按钮)
2.onload事件
可以body执⾏，,其中onload后⾯可以写⼀个⽅法，如：onload="test()",然后在JavaScript中写⼀个test()⽅法，则在页⾯⼀开始加载的时候会先调⽤这个⽅法<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
JavaScript的⼀些常⽤⽅法
functiontest(){
alert("测试onload⽅法");
}
注意：此⽅法只能写在标签之中3.onchange事件
事件在内容改变的时候触发，和jQuery中的change()⽅法⼀样
当内容改变时触发。可⽤于⽂本框、列表框等对象，该事件⼀般⽤于响应⽤户修改内容带来的其他改变操作。
说明：当⽤户向⼀个⽂本框中输⼊⽂本时，不会触发onchange事件，只有⽤户输⼊结束后，单击⽂本框以外的区域，使⽂本框失去焦点时才触发该事件，如果是下拉框，则选择结束后即触发。<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
JavaScript的⼀些常⽤⽅法
functionupperCase(){
varx = document.getElementById("fname").value;
document.getElementById("fname").value = x.toUpperCase();
}
⽤户名：
说明：上例实际效果是，当输⼊框失去焦点时内容转成⼤写。出现这种情况是由于input必须是失去焦点才会检测到内容发⽣改变。⽽change事件通常是⽤于下拉菜单select标签。
4.onblur事件和onfocus事件
当前元素失去焦点时触发该事件，对应的是onfocus事件：得到焦点事件<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
JavaScript的⼀些常⽤⽅法
functionchkvalue(txt) {
if(txt.value=="") alert("⽂本框⾥必须填写内容!");
}
functionsetStyle(x){ document.getElementById(x).style.background="yellow"
}
失去焦点：
得到焦点：
5.onscroll事件
窗⼝滚动事件：当页⾯滚动时调⽤函数。此事件写在⽅法的外⾯，且函数名后⾯不加括号，例如window.onscroll=move
例：<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
JavaScript的⼀些常⽤⽅法
functionmove() {
alert("页⾯滚动时调⽤");
}
window.onscroll = move;
测试onscroll⽅法
测试onscroll⽅法
测试onscroll⽅法
测试onscroll⽅法
6.onsubmit事件
属于
例：<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
JavaScript的⼀些常⽤⽅法
functionmove() {
alert("测试onsubmit........"+testForm.name.value);
}
2.⿏标相关事件
1.onmousemove和onmouseout和onmouseover事件
Onmouseover:⿏标移动到某对象范围的上⽅时，触发事件调⽤函数。注意：在同⼀个区域中，⽆论怎样移动都只触发⼀次函数。
Onmouseout:⿏标离开某对象范围时，触发事件调⽤函数。
Onmousemove:⿏标移动到某对象范围的上⽅时，触发事件调⽤函数。注意：在同⼀个区域中，只要⿏标动⼀次就触发⼀次事件。
例：<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
JavaScript的⼀些常⽤⽅法
functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
