关于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 相关文章推荐
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
原生js实现选项卡功能
Mar 08 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
Ajax实现三级联动效果
Oct 05 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
python 处理string到hex脚本的方法
2018/10/26 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
省级优秀班集体申报材料
2014/05/25 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android