关于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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
在vue中使用G2图表的示例代码
Mar 19 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
html中select语句读取mysql表中内容
2006/10/09 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
pandas数据处理进阶详解
2019/10/11 Python
Python 实现自动导入缺失的库
2019/10/29 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python标准库os库的函数介绍
2020/02/12 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
培训楼经理岗位责任制
2014/02/10 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
外国人来华邀请函
2015/01/31 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书