主要事件:

　　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. QEMU Networking

    QEMU Networking QEMU has a number of really nice ways to set up networking for its guests. It can be ...

  2. python图像处理库PIL的基本概念介绍

    PIL中所涉及的基本概念有如下几个:通道(bands).模式(mode).尺寸(size).坐标系统(coordinate system).调色板(palette).信息(info)和滤波器(filt ...

  3. 数组转换为List(Arrays.asList)后add或remove出现UnsupportedOperationException

    Java中,可以使用Arrays.asList(T... a)方法来把一个数组转换为List,返回一个受指定数组支持的固定大小(注意是固定大小)的列表.此方法同 Collection.toArray( ...

  4. VP9 vs H.265——下一代视频编码标准的王道之争

    目前下一代主流的视频编码标准有 ITU-T VCEG 推出来的 H.265 和 Google 推出 VP9 . H.265 在 H.264 的基础上保留其中的部分技术,并对相关技术加以改进研发而成.新 ...

  5. 如何配置React Native真机调试-iOS

    说在前面,本教程是建立在项目已经成功在模拟器上运行的基础上,如果你是还未配置好环境的新手,建议先从官网快速入门开始:官网英文版 . 中文版 ok, 切入正题,当你已经完成好环境配置,在模拟器上成功的运 ...

  6. 如何使用Keras的Model visualization功能

    问题 安装上graphviz和pydot之后调用出现如下问题 ['dot', '-Tpng', '/tmp/tmp1KPaiV'] return code: 1 stdout, stderr: War ...

  7. IdentityServer4（5）- 包和构建

    包和构建 IdentityServer有许多Nuget包组件 IdentityServer4 nuget | github 包含IdentityServer核心对象模型.服务和中间件.默认只包含了基于 ...

  8. 【python小工具】linux 低权限密码记录 提权小套路

    #!/usr/bin/python import os, sys, getpass, time current_time = time.strftime("%Y-%m-%d %H:%M&qu ...

  9. DotNetCore深入了解之二HttpContext类

    当KestrelServer启动时,会绑定相应的IP地址,同时在绑定时将加入HttpConnectionMiddleware作为终端连接的中间件. public async Task StartAsy ...

  10. Spring IOC分析

    前言 关于Spring,我想无需做太多的解释了.每个Java程序猿应该都使用过他.Spring的ioc和aop极大的方便了我们的开发,但是Spring又有着不好的一面,为了符合开闭原则,Spring的 ...