关于javascript事件响应的基础语法总结(必看篇)


Posted in Javascript onDecember 26, 2016

1、onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用

//例子
<html>
<head>
  <script type="text/javascript">
   function add2(){
    var numa,numb,sum;
    numa=6;
    numb=8;
    sum=numa+numb;
    document.write("两数和为:"+sum); }
  </script>
</head>
<body>
  <form>
   <input name="button" type="button" value="点击提交" onclick="add2()" />
  </form>
</body>
</html>
//单击按钮时,触发 onclick 事件,并调用两个数和的函数add2()

2、onmouseover是鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
  function message(){
   confirm("请输入密码后,再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>
//鼠标经过"确定"按钮时,触发onmouseover事件,调用函数message(),弹出消息框

3、onmouseout鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
 function message(){
  alert("不要移开,点击后进入三水点靠木!"); }
</script>
</head>
<body>
<form>
 <a href="https://3water.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>
//当把鼠标移动到"点击我"按钮上,然后再移开时,触发onmouseout事件,调用函数message()

4、onfocus事件是当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
 <script type="text/javascript">
  function message(){
   alert("请选择,您现在的职业!");
  }
 </script>
</head>
<body>
请选择您的职业:<br>
 <form>
  <select name="career" onfocus="message()"> 
   <option>学生</option> 
   <option>教师</option> 
   <option>工程师</option> 
   <option>演员</option> 
   <option>会计</option> 
  </select> 
 </form>
</body>
</html>
//当下拉列表得到焦点时,调用message()函数,就弹出对话框“"请选择,您现在的职业!”。

5、onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
 function message(){
  alert("请确定已输入密码后,在移开!"); }
</script>  
</head>
<body>
 <form>
  用户:<input name="username" type="text" value="请输入用户名!" onblur="message()" >
  密码:<input name="password" type="text" value="请输入密码!" >
 </form>
</body>
</html>
//当光标从密码文本框离开时,触发onblur 事件,调用message()函数。

6、onselect选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
 function message(){
  alert("您触发了选中事件!"); }
</script>  
</head>
<body>
 <form>
 个人简介:<br>
  <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介,不少于200字!</textarea>
 </form>
</body>
</html>
//当选中个人简介文本框中文字时(相当于复制粘贴中的复制这个行为就是选中文本),触发onselect事件,并弹出对话框。

7、onchange事件是通过改变文本框的内容来触发onchange事件,同时执行被调用的程序

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
 function message(){
  alert("您改变了文本内容!"); }
</script>  
</head>
<body>
 <form>
 个人简介:<br>
  <textarea name="summary" cols="60" rows="5">请写入个人简介,不少于200字!</textarea>
 </form>
</body>
</html>
//改变文本框内容时,鼠标的聚点还在文本框的时候并不会弹出对话框,但当改变完内容后,鼠标移动到别处(鼠标聚点离开文本框的时候)便会立刻调用message()函数,弹出对话框“您改变了文本内容!”

8、onload加载事件会在页面加载完成后,立即发生,同时执行被调用的程序。
注意: 加载页面时,触发onload事件,事件写在<body>标签内。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
 function message(){
  alert("加载中,请稍等…"); }
</script>  
</head>
<body onload="message()">
 欢迎学习JavaScript。
</body>
//加载页面时,弹出对话框“加载中,请稍等…”。

9、onUnload卸载事件当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">  
   window.onunload = onunload_message;  
   function onunload_message(){  
    alert("您确定离开该网页吗?");  
  }  
</script>  
</head>
<body>
 欢迎学习JavaScript。
</body>
</html>
//当退出页面时,弹出对话框“您确定离开该网页吗?”。

以上就是小编为大家带来的关于javascript事件响应的基础语法总结(必看篇)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
javascript实现简单的进度条
Jul 02 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
jQuery的事件预绑定
Dec 05 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 #Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 #Javascript
原生JS实现图片轮播效果
Dec 26 #Javascript
输入框点击时边框变色效果的实现方法
Dec 26 #Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 #Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 #Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 #Javascript
You might like
php截取中文字符串不乱码的方法
2013/12/25 PHP
使用php清除bom示例
2014/03/03 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
CI框架常用函数封装实例
2016/11/21 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python wsgiref源码解析
2021/02/06 Python
python如何实现递归转非递归
2021/02/25 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
进口业务员岗位职责
2014/04/06 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书