您的位置：首页 > Web前端 > JavaScript

JavaScript事件响应学习

2016-11-03 14:20 190 查看

1.onclick事件(鼠标点击触发)：

<script type="text/javascript">
function alertMsg(){
alert('欢迎学习JavaScript！');
}
</script>

<body>
<form>
<input name="点击我" type="button" value="点击我" onclick="alertMsg()"/>
</form>
</body>

2.onmouseover事件(鼠标滑过触发)：

<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>

3.onmouseout事件(鼠标移开触发)：

<script type="text/javascript">
function message(){
alert("千万不要拿开哦!"); }
</script>

<body>
<form>
<a href="javascript:;" onmouseout="message()">点击我</a>
</form>
</body>

4.onfocus事件(光标聚焦触发)：

<span style="font-size:18px;"> <script type="text/javascript">
function message(){
alert("请选择，您现在的职业！");
}
</script></span>

<span style="font-size:18px;"><body>
请选择您的职业：<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body></span>

5.onblur事件(光标聚焦触发)：

<span style="font-size:18px;"><script type="text/javascript">
function message(){
alert("请确定已输入密码后，在移开!"); }
</script> </span>

<span style="font-size:18px;"><body>
<form>
用户:<input name="username" type="text" placeholder="请输入用户名！" >
密码:<input name="password" type="text" placeholder="请输入密码！" onblur="message()">
</form>
</body></span>

6.onselect事件(内容选中触发)：

<span style="font-size:18px;"><script type="text/javascript">
function message(){
alert("您触发了选中事件！"); }
</script> </span>

<span style="font-size:18px;"><body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body></span>

7.onchange事件(内容改变触发)：

<span style="font-size:18px;"><script type="text/javascript">
function message(){
alert("您改变了文本内容！"); }
</script></span>

<span style="font-size:18px;"><body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body></span>

7.onload事件(数据加载时触发)：

<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>

<body onload="message()">
欢迎学习JavaScript。
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 鼠标

相关文章推荐

新的分享

章节导航