关于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 相关文章推荐
Javascript 解疑
Nov 11 Javascript
10个实用的脚本代码工具
May 04 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 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
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
python获取图片颜色信息的方法
2015/03/18 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
历史专业大学生职业生涯规划书
2014/03/13 职场文书
进口业务员岗位职责
2014/04/06 职场文书
计算机专业自荐信
2014/05/24 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
教师病假条范文
2015/08/17 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript