主要事件:

　　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. Redis-01.初探

    官网 http://redis.io 中文网 http://redis.cn 命令参考 http://redisdoc.cn Redis(Remote Dictionary Server)是一个开源的 ...

  2. JAVA线程池的实际运用

    线程池的创建 我们可以通过ThreadPoolExecutor来创建一个线程池 /** * @param corePoolSize 线程池基本大小,核心线程池大小,活动线程小于corePoolSize ...

  3. Open系列相关概念汇总

    最近接触了Android OpenGL ES 和 OpenCL ES,然后就很想知道除了这两个之外到底还有几个Open系列的API集.搜集的结果如下(纯为自己科普): 1. OpenGL(OpenGr ...

  4. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  5. Java之JDK7的新语法探索

    Java之JDK7的新语法探索 前言 感谢! 承蒙关照~ 字面量: 各种精致的表达方式: 八进制以0开头,十六进制0X开头,二进制以0B开头. 二进制运算时,应该写成这样才直观: &15 -& ...

  6. 单元测试mock当前时间

    在实际项目中很多地方用到DateTime.Now,这个时间是时时变化的.如果要进行单元测试对比预期结果时,这个时间无法预测,可以添加如下两个时间类 namespace Common.Helper { ...

  7. 神经网络架构PYTORCH－宏观分析

    基本概念和功能: PyTorch是一个能够提供两种高级功能的python开发包,这两种高级功能分别是: 使用GPU做加速的矢量计算 具有自动重放功能的深度神经网络从细的粒度来分,PyTorch是一个包 ...

  8. 解决Database returned an invalid datetime value. Are time zone definitions for your database installed?

    设定博客文章按照时间分层筛选出现问题 ret=Article.objects.filter(user=user).annotate(month=TruncMonth("create_time ...

  9. Jade —— 源于 Node.js 的 HTML 模板引擎

    2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读  ·  读完需要 69 分钟 ...

  10. (转载)java内存模型

    java并发采用的是共享内存模型,线程之间的通信对程序员来说是透明的,内存可见性问题很容易困扰着java程序员,今天我们就来揭开java内存模型的神秘面纱. 在揭开面纱之前,我们需要认识几个基础概念: ...