主要事件:

　　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. docker 2(local registry)

    1.获取仓库镜像 ,sudo docker pull registry 2.sudo vim /etc/init/docker.conf 增加--insecure-registry IP:5000 3 ...

  2. 通过代码定义shape/selector

    public class DrawableUtil { /** * 定义一个shape资源 * * @param rgb * @param corneradius * @return */ publi ...

  3. 小奶狗给小喵咪上CSS课程

    小奶狗给小喵咪上CSS课程 小奶狗,你好啊? 小喵咪你好~ 听说学习HTML,要学习CSS是吗? 是的,小甜心~ 那么CSS是什么呢? CSS是Cascading Style Sheet英文的缩写,中 ...

  4. log4j日志输出到日志文件中和控制台中 +log4j配置详解

    1.引入log4j的jar包 https://mvnrepository.com/,可以找到log4j的jar和依赖. 2.创建log4j.properties,并配置log4j #设置日志的级别 , ...

  5. 4-3 组件参数校验与非props特性

    本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...

  6. Python编程Day5——可变与不可变类型、数据类型整合

    一.可变与不可变类型1.可变类原值型:只改变,但id不变,证明就是在改变原值,是可变类型2.不可变类型:值改变,但id也跟着改变,证明是产生了新的值,是不可变类型 x= print(id(x)) x= ...

  7. mysql 开发基础系列22 SQL Model

    一.概述 与其它数据库不同,mysql 可以运行不同的sql model 下, sql model 定义了mysql应用支持的sql语法,数据校验等,这样更容易在不同的环境中使用mysql. sql ...

  8. 在Mac OSX上配置Appium+Android自动化测试环境

    前提准备 开始正文之前,你需要准备好一些基本条件: 1.安装好Mac OSX 操作系统的设备 2.能够访问中国局域网以外资源的方法(没有也行,但很痛苦) 3.已经安装好 homebrew 4.已经安装 ...

  9. solr(六): 集群

    前言 随着用户的增多,空间和并发量越来越多,会导致一台solr服务器干不过了.这时候,就需要将solr集群以下. 集群架构 由多台服务器共同完成索引和搜索任务 实现的思路是将索引数据进行shard(分 ...

  10. Python数据可视化的四种简易方法

    摘要: 本文讲述了热图.二维密度图.蜘蛛图.树形图这四种Python数据可视化方法. 数据可视化是任何数据科学或机器学习项目的一个重要组成部分.人们常常会从探索数据分析(EDA)开始,来深入了解数据, ...