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

//例子

<html>

<head>

   <script type="text/javascript">

      function add2(){

        var numa,numb,sum;

        numa=;

        numb=;

        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="http://www.imooc.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="" rows="" 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="" rows="">请写入个人简介，不少于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事件响应的基础语法总结的更多相关文章

  1. javascript中正则表达式的基础语法

    × 目录 [1]定义 [2]特点 [3]元字符[4]转义字符[5]字符组[6]量词[7]括号[8]选择[9]断言[10]模式[11]优先级[12]局限性 前面的话 正则表达式在人们的印象中可能是一堆无 ...

  2. JavaScript快速入门-ECMAScript基础语法

    一.JavaScript引入方式 1.行内式 <script> alert(123); </script> 2.外链式 <script src='custom.js'&g ...

  3. JavaScript表达式和运算符 —— 基础语法（4）

    JavaScript基础语法(4) 运算符 运算符用于将一 个或者多个值变成结果值. 使用运算符的值称为操作数,运算符和操作数的组合称为表达式 JS中的运算符可以分成下面几类: 算术运算符 逻辑运算符 ...

  4. 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法

    1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...

  5. Javascript进阶篇——(JS基础语法)笔记整理

    根据慕课网学习整理到一起的笔记,把东西整理到一起看起来比较方便 什么是变量字面意思:变量是可变的量:编程角度:变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可 ...

  6. javascript 事件响应

    1.基本事件 2.点击事件 <html> <head> <script type="text/javascript"> function add ...

  7. JavaScript的基础语法及DOM元素和事件

    一,JavaScript是什么? 1,JavaScript简称:js,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行.主要用来实现网页的动态效果,用户交互及前后端的数据传输等. 2,J ...

  8. 浅谈JavaScript的事件响应

    原文出处: Christian Heilmann   译文出处:Chajn Science 每当猴子们问我JavaScript和DOM里啥东西最牛逼时,我都会一巴掌打回去:卧槽还用问么当然是事件响应了 ...

  9. javascript基础语法——词法结构

    × 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫 ...

随机推荐

  1. CodeForces 632D Longest Subsequence

    暴力. 虽然$a[i]$最大有${10^9}$,但是$m$最大只有${10^6}$,因此可以考虑暴力. 记$cnt[i]$表示数字$i$有$cnt[i]$个,记$p[i]$表示以$i$为倍数的情况下, ...

  2. Writing clean code is what you must do in order to call yourself a professional.

    Clean Code  A Handbook of Agile Software Craftsmanship

  3. openstack trove，使pylint忽略错误

    一.什么是pylint Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准和有潜在问题的代码. Pylint 是一个 Python 工具,除了 ...

  4. Ueditor文件上传问题

    我们在做一些网站是会遇到,要有上传文件一类的事情. 我发现百度的富文本编辑器带上传功能,但是没有办法给后台传递我们要的参数. 先在ueditor.all.js中找到, me.execCommand(' ...

  5. php学习笔记——基础知识（2）

    9.PHP语句 if 语句 - 如果指定条件为真,则执行代码 if...else 语句 - 如果条件为 true,则执行代码:如果条件为 false,则执行另一端代码 if...else if.... ...

  6. jq屏蔽f5

    //屏蔽F5 $(document).ready(function () { $(document).bind("keydown", function (e) { e = wind ...

  7. Cg（C for Graphic）标准函数库之数学函数与几何函数

    和 C 的标准函数库类似, Cg 提供了一系列内建的标准函数.这些函数用于执行数学上的通用计算或通用算法(纹理映射等),例如,需要求取入射光线的反射光线方向向量可以使用标准函数库中的 reflect ...

  8. ibatis->mybatis升级过程

    最终目录结构 resources spring applicationContext.xml sqlmap mapper aaamapper.xml bbbmapper.xml mybatis-con ...

  9. C语言课程设计 Win32应用程序

    问题描述: 请设计一个职工信息管理程序,以方便人事部门对本单位职工的管理,该程序应该具有以下功 能: (1)能从键盘输入职工的信息 . (2)给定职工号,显示职工的信息. (3)给定工作部门,显示该部 ...

  10. ele.me在IOS浏览器端启动APP的技巧分析

    ele.me在IOS浏览器端启动APP的技巧分析 巧妙利用后台重定向,在schemes启动时提示用户打开,启动不了APP时能够及时跳转至下载页面. 避免报错页面的出现以及用户还没来的及选择就跳转到下载 ...