主要事件:

　　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. 段的性能统计信息v$segment_statistics

    v$segment_statistics视图记录了段的统计信息 简单的几个字段就不说了,就说最后三个吧 STATISTIC_NAME,STATISTIC#,VALUE记录了发生在表上的操作 SYS @ ...

  2. 《JavaScript》高级程序设计第21章：Ajax和Comet，jsonp

    一.创建XMLHttpRequest对象 二.XHR的用法 五.跨域资源共享 六.其他跨域技术七.安全七.安全 1. 图像Ping 2. JSONP(JSON with padding,填充式JSON ...

  3. 前端“黑话”polyfill

    前言 在Web前端开发这个日新月异的时代,总是需要阅读一些最新的英文技术博客来跟上技术的发展的潮流.而有时候会遇到一些比较高频的“黑话”,在社区里面可能已经是人人皆知的“共同语言”,而你接触的少就偏偏 ...

  4. 吴恩达机器学习笔记37-学习曲线（Learning Curves）

    学习曲线就是一种很好的工具,我经常使用学习曲线来判断某一个学习算法是否处于偏差.方差问题.学习曲线是学习算法的一个很好的合理检验(sanity check).学习曲线是将训练集误差和交叉验证集误差作为 ...

  5. Day4:html和css

    Day4:html和css 规范注意 链接里面不能再放链接. a里面可以放入块级元素. 空格规范 选择器与{之间必须包含空格. 如: .class {} 属性名与之后的:符号之间不允许包含空格, 而: ...

  6. soul开源网关项目搭建学习

    1. soul开源网关项目搭建学习 1.1. 地址 https://gitee.com/shuaiqiyu/soul 1.2. 介绍 官方介绍:这是一个异步的,高性能的,跨语言的,响应式的API网关. ...

  7. Kubernetes 新时代的宠儿

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Kuberne ...

  8. NotSupportedError Only secure origins are allowed

    今天在写H5调用手机摄像头时提示一个错误信息如下: NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0Z ...

  9. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  10. java super和this总结

    今天群里有人问我怎么复写父类的构造函数,我当时听错了以为是一般方法,然后就对他说只要同名就可以,然后他告诉我错了,我再仔细看,才知道他问的是复写 父类的构造方法,其实自己也不知道子类能不能复写父类的构 ...