主要事件:

　　onclick　　鼠标单击事件

　　onmouseover 鼠标经过事件

　　onmouseout　　鼠标移开事件

　　onchange　　文本框内容改变事件

　　onselect　　文本框内容被选中事件

　　onfocus　　光标聚集

　　onblur　　光标离开

　　onload　　网页导入

　　onunload　 关闭网页

 <!DOCTYPE html>

 <html>

  <head>

      <meta charset="utf-8">

   <title> 事件</title>

   <script type="text/javascript">

    function count(){

        var result="";

     //获取第一个输入框的值

     var num1 = document.getElementById("txt1").value;

     //获取第二个输入框的值

     var num2 = document.getElementById("txt2").value;

     //获取选择框的值

     var op = document.getElementById("select").value;

     //获取通过下拉框来选择的值来改变加减乘除的运算法则

     switch(op){

         case "+":

             result = parseFloat(num1) +parseFloat(num2);

             break;

         case "-":

             result =  parseFloat(num1) -parseFloat(num2);

             break;

         case "*":

             result =  parseFloat(num1) *parseFloat(num2);

             break;

         case "/":

             if(parseFloat(num2) === 0){

                 var con = confirm("被除数不能为0！");

                 break;

             }

             result =  paresFloat(num1) / paresFloat(num2);

             break;

     }

     //设置结果输入框的值

         document.getElementById("fruit").value = result;

    }

   </script>

  </head>

  <body>

    <input type='text' id='txt1' />

    <select id='select'>

         <option value='+'>+</option>

         <option value="-">-</option>

         <option value="*">*</option>

         <option value="/">/</option>

    </select>

    <input type='text' id='txt2' />

    <input type='button' value=' = '  onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果-->

    <input type='text' id='fruit' onfocus="count()"/>

  </body>

 </html>

JavaScript事件(含Demo)的更多相关文章

  1. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  2. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  3. javaScript事件（二）事件处理程序

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...

  4. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  5. JavaScript事件流

    什么是JS事件流 早期的IE事件传播方向为由上至下,即从document逐级向下传播到目标元素:而Netscape公司的Netscape Navigator则是朝相反的方向传播, 也就是从目标元素开始 ...

  6. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

  7. 25、Javascript 事件

    Javascript 事件 是指 Javascript 捕获到用户的操作,并做出正确的相应. Javascript 事件一般与DOM元素绑定. Javascript处理事件的基本机制 1.对DOM元素 ...

  8. javaScript事件绑定

    事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...

  9. JavaScript 事件兼容性写法

    1.以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器.包括IE6(亲测) <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. Monad Explained in One Picture

    The point of Monad is composability. In the green category, T -> Monad<U> and U -> Monad ...

  2. AngularJS 四大特性

    1.模块化 2.双向数据绑定 3.依赖注入 4.mvc模式

  3. 如何推翻JAVA的统治地位？

    “java越来越过份了.”php狠狠的说,他转头看着C:“C哥,您可是前辈,java最近砸了我不少场子,您老再不出来管管,我怕他眼里就没有您了啊.” C哥吸烟,慢慢的说:“年轻人不要着急,java的根 ...

  4. WordPress图片或文字添加水印插件:Easy Watermark

    Easy Watermark可以在上传到WordPress媒体库时自动为图像添加水印.您也可以手动为现有图像添加水印(一次全部或每个图像).水印可以是图像,文本或两者. 插件功能 图像水印可以是jpg ...

  5. linux下如何把php升级到5.6

    1: 进入终端后查看php版本 php -v 输出可能如下: PHP (cli) (built: Nov ::) Copyright (c) - The PHP Group Zend Engine v ...

  6. 吴恩达机器学习笔记41-支持向量机的优化目标（Optimization Objective of Support Vector Machines）

  7. 高数复习--什么是DCT

    离散余弦变换(英语:discrete cosine transform, DCT)是与傅里叶变换相关的一种变换,类似于离散傅里叶变换,但是只使用实数.离散余弦变换相当于一个长度大概是它两倍的离散傅里叶 ...

  8. 工作随笔—integer对象比较

    问题:对于integer对象,当比较2==2的时候,返回的值是true还是false?当比较2000==2000的时候,返回的值是true还是false? 回答:当比较2==2的时候,返回的值是tru ...

  9. Quartz的使用案例

    一.介绍 项目中的调度任务可以使用Quartz任务调度框架 1.Job接口:这个接口里面只定义了一个方法,excute void execute(JobExecutionContext context ...

  10. JDK,JRE,JVM,JMM关系与区别

    JVM: Java Virtual Machine, 将java文件编译成class文件并运行class文件的软件 JRE:Java  Runtime  Enviromental,包含了JVM和Jav ...