关于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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
详解jQuery选择器
Dec 21 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
JS eval代码快速解密实例解析
Apr 23 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
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Python中方法链的使用方法
2016/02/23 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
Java面试题及答案
2012/09/08 面试题
青年志愿者事迹材料
2014/02/07 职场文书
学习经验交流会主持词
2014/04/01 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
python 提取html文本的方法
2021/05/20 Python
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
Python实现抖音热搜定时爬取功能
2022/03/16 Python
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
Ruby处理CSV数据方法详解
2022/04/18 Ruby