javascript事件与驱动
2016-09-05 12:39
393 查看
事件驱动：驱动就是对于事件进行触发
<input type="button" name="btn" id="btn" onclick="JavaScript Code" >
其中onclick就是button按钮的驱动开关,点击button按钮onclick就会调用代码进行执行
事件：事件是你通过某种动作触发的，比如单击、双击、鼠标划过等等
常用事件:
<scripttype="text/javascript">
functionmyFunction(){
alert("测试onclick点击事件");
}
</script>
<scripttype="text/javascript">
functiontest(){
alert("测试onload方法");
}
</script>
当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。
说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件，如果是下拉框，则选择结束后即触发。
<scripttype="text/javascript">
functionupperCase(){
varx = document.getElementById("fname").value;
document.getElementById("fname").value = x.toUpperCase();
}
</script>
body>
<p>
<labelfor="name">用户名：</label>
<inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
<scripttype="text/javascript">
functionchkvalue(txt) {
if(txt.value=="") alert("文本框里必须填写内容!");
}
functionsetStyle(x){
document.getElementById(x).style.background="yellow"
}
</script>
<body>
失去焦点：
<inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>
得到焦点：
<inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">
</body>
例：
<scripttype="text/javascript">
functionmove() {
alert("页面滚动时调用");
}
window.onscroll = move;
</script>
<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>
例：
<scripttype="text/javascript">
functionmove() {
alert("测试onsubmit........"+testForm.name.value);
}
</script>
<body>
<formaction=""method="post"name="testForm"onsubmit="returnmove()">
<inputtype="text"name="name"value="">
<br>
<inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
<scripttype="text/javascript">
functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
<body>
<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley">
</body>
Onmousedown:当鼠标按下键时触发事件
<scripttype="text/javascript">
functionmouseDown(){
document.getElementById("p1").style.color="red";
}
functionmouseUp(){
document.getElementById("p1").style.color="green";
}
</script>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
3.键盘事件
onkeydown：当键盘按键，被按下时
举例：当键盘被按下时（任意一个键），弹出一个hello
<input type="button" name="btn" id="btn" onclick="JavaScript Code" >
其中onclick就是button按钮的驱动开关,点击button按钮onclick就会调用代码进行执行
事件：事件是你通过某种动作触发的，比如单击、双击、鼠标划过等等
常用事件:
1.onclick事件
点击事件（onclick并不是js中的方法，onclick只是浏览器提供js的一个dom接口，让js可以操作dom，所以onclick大小写都是没问题的，比如HTML代码就不用区分大小写）<scripttype="text/javascript">
functionmyFunction(){
alert("测试onclick点击事件");
}
</script>
2.onload事件
可以body执行，<bodyonload="alert(123)"></body>,其中onload后面可以写一个方法，如：onload="test()",然后在JavaScript中写一个test()方法，则在页面一开始加载的时候会先调用这个方法<scripttype="text/javascript">
functiontest(){
alert("测试onload方法");
}
</script>
3.onchange事件
事件在内容改变的时候触发，和jQuery中的change()方法一样当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。
说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件，如果是下拉框，则选择结束后即触发。
<scripttype="text/javascript">
functionupperCase(){
varx = document.getElementById("fname").value;
document.getElementById("fname").value = x.toUpperCase();
}
</script>
body>
<p>
<labelfor="name">用户名：</label>
<inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
4.onblur事件和onfocus事件
当前元素失去焦点时触发该事件，对应的是onfocus事件：得到焦点事件<scripttype="text/javascript">
functionchkvalue(txt) {
if(txt.value=="") alert("文本框里必须填写内容!");
}
functionsetStyle(x){
document.getElementById(x).style.background="yellow"
}
</script>
<body>
失去焦点：
<inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>
得到焦点：
<inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">
</body>
5.onscroll事件
窗口滚动事件：当页面滚动时调用函数。此事件写在方法的外面，且函数名后面不加括号，例如window.onscroll=move例：
<scripttype="text/javascript">
functionmove() {
alert("页面滚动时调用");
}
window.onscroll = move;
</script>
<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>
6.onsubmit事件
属于<form>表单元素，写在<form>表单标签内。语法：onsubmit=”return 函数名()”例：
<scripttype="text/javascript">
functionmove() {
alert("测试onsubmit........"+testForm.name.value);
}
</script>
<body>
<formaction=""method="post"name="testForm"onsubmit="returnmove()">
<inputtype="text"name="name"value="">
<br>
<inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
2.鼠标相关事件
1.onmousemove和onmouseout和onmouseover事件
onmouseover鼠标覆盖事件
onmouseout鼠标离开事件
onmousemove鼠标移动事件
<scripttype="text/javascript">functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
<body>
<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley">
</body>
2.onmouseup和onmousedown
Onmouseup:当鼠标松开时触发事件Onmousedown:当鼠标按下键时触发事件
<scripttype="text/javascript">
functionmouseDown(){
document.getElementById("p1").style.color="red";
}
functionmouseUp(){
document.getElementById("p1").style.color="green";
}
</script>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
3.键盘事件
onkeydown：当键盘按键，被按下时
举例：当键盘被按下时（任意一个键），弹出一个hello
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javaScript--事件驱动
- javascript 事件驱动杂谈
- javascript之DOM事件驱动编程
- 深入理解javaScript中的事件驱动
- javascript练习:8-4事件与事件驱动
- javascript事件驱动框架
- 了解到Javascript在浏览器中的事件驱动
- 利用JavaScript开发事件驱动的Web应用 – node.js简介
- silverlight线程与基于事件驱动javascript引擎（实现轨迹回放功能）
- 29-JavaScript-事件-事件驱动-更改外部css属性-区分浏览器内核
- 事件驱动的Web之旅——JSP与JavaScript的融合（续）
- 事件驱动的javascript 【转】
- 事件驱动的javascript
- javaScript中的事件驱动
- javascript 事件驱动编程【转（原文为“事件驱动的javascript”）】
- 事件驱动的Web之旅——JSP与JavaScript的融合
- JavaScript事件驱动及事件处理
- Javascript驱动事件
- JavaScript的定时器使用和事件驱动
- JavaScript基础--事件驱动和访问CSS技术(十)