600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > JavaScript的常用事件(onclick onmouseover onmouseout onmousemove onload onblur onchange 表单事件)

JavaScript的常用事件(onclick onmouseover onmouseout onmousemove onload onblur onchange 表单事件)

时间:2019-05-23 14:17:05

相关推荐

JavaScript的常用事件(onclick onmouseover onmouseout onmousemove onload onblur onchange 表单事件)

JavaScript的常用事件

JavaScript是基于对象、采用事件驱动的脚本文件。通过鼠标或案件在浏览器窗口或网页元素上执行的操作称为事件(event)。

事件

1.onclick事件

onclick事件是鼠标单击页面元素时触发的事件。

<body><script type="text/javascript">function check(obj){alert("你选择的属性是:" + obj.value);}</script><h3>性别:</h3><form action="#" method="post" name="test"><input type="radio" value="男" name="sex" onclick="check()"/>男<input type="radio" value="女" name="sex" onclick="check()"/>女</form></body>

2.onmouseover事件和onmouseout事件

onmouseover事件和onmouseout事件是指鼠标移入、移出页面元素时触发的事件。

<body><marquee direction="right" onmouseover="stop()" onmouseout="start()">Hello World!!!</marquee></body>

3.onmousemove事件

onmousemove事件是指鼠标指针移动时发生的事件。

<body onmousemove="move(this)" onmouseout="out(this)"><script type="text/javascript>function move(obj){obj.ineerText += "hello<br/>";}function out(obj){obj.ineerText += "bye<br/>";}</script></body>

4.onload事件

onload事件会在页面加载完成后立即发生。

<body><script type="text/javascript">alert("页面加载完成!");</script></body>

5.onblur事件

onblur事件是指光标或者焦点离开元素后触发的事件。

//判断密码是否为6位<body><p>请输入密码:<input id="pwd" type="text" onblur="judge"/></p><script type="text/javascript">function judge(){var pwdLen = document.getElementById("pwd").value.length;if(pwdLen == 6){alert("密码长度验证成功");}else{alert("密码长度验证失败");}}</script></body>

6.onchange事件

onchange事件通常指输入框发生了变化或者改变下拉框列表的选项时会触发的事件。

<body><select id="list" onchange="change()"><option>百度</option><option>CSDN</option><option>开源中国</option></select><script type="text/javascript">function change(){var tem = document.getElementById("list").value;alert("您选择的是:" + change());}</script></body>

7.表单事件

单击表单元素submit的提交按钮会触发表单中的onsubmit事件,浏览器的默认处理方式是将数据提交给actio属性指定的页面进行处理(一定是submit按钮对应onsubmit事件)。

当οnsubmit="return true"时,则将数据提交到指定页面进行处理;而当οnsubmit="return false"时,不将数据进行提交。

<body><form id="form1" action="#" method="post" onsubmit="return ren()"><input id="sub" type="submit" value="提交"/></form><script type="text/javascript">function ren(){return true/false;}</script></body>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。