事件周期

 DOM：3个阶段

 1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数。默认,暂不触发任何事件

 2.目标触发:优先触发目标元素绑定的事件处理函数

       目标元素:实际点击的元素

 3.冒泡:按照捕获的顺序，由内层，向外层逐层触发捕获的事件处理函数

 修改事件触发的顺序:

 btn.addEventListener("事件名称",函数对象,capture)

 其中:capture表示是否在捕获阶段就提前触发

      默认false,只在冒泡阶段才触发

      改为true,在捕获阶段提前触发

 阻止冒泡必须要用到的事件对象:event

     事件发生时,自动创建的,封装事件信息的对象

     还提供了对事件进行操作的API

 如何获得event对象:

     按照DOM对象:事件发生时会自动创建event对象

     会将event对象作为事件处理函数的第一个参数自动传入

 阻止冒泡:e.stopPropagation();

 e.target//获得目标元素

 e.preventDefault()//阻止默认行为

 利用冒泡:

 优化:尽量少的创建事件监听对象

   因为事件监听对象容易形成闭包，很难释放

 解决:如果多个平级子元素需要绑定一次即可。所有子元素共用

     核心问题:如何获得目标元素:e.target

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <div id="keys">

     <button>1</button>

     <button>2</button>

     <button>3</button>

     <button>4</button>

     <br/>

     <button>C</button>

     <button>+</button>

     <button>-</button>

     <button>=</button>

 </div>

 <textarea name="" id="sc" style="resize: none; width: 200px; height: 50px; "></textarea>

 <script>

     //定义函数calc,获得事件对象e

        function calc(e){

         //获得目标元素e.target

            var target= e.target;

         //如果target是button

            if(target.nodeName=="BUTTON"){

         //判断target的内容

                switch (target.innerHTML){

         //是c

         case "C":

         //清除id为sc的元素的内容

         sc.value="";break;

         //如果是=

         case "=":

          try{//尝试:

              //将sc的内容传人eval中，将结果保存回sc的内容中

              sc.value=eval(sc.value);

                        }

         catch (err){//如果出错

             //将错误对象转为字符串，赋值给sc的内容

             sc.value=String(err);

         }

         break;

         default: //否则

             //将target的内容拼接到sc的内容上

         sc.value+=target.innerHTML;

                  }

                }

            }

     //为id为keys的div添加单击事件监听，函数为calc

     keys.addEventListener("click",calc);

 </script>

 </body>

 </html>

JavaScript-计算器的更多相关文章

  1. HTML CSS, JavaScript 计算器

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  2. JAVASCRIPT实现简单计算器

    最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...

  3. javascript 简单的计算器

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  4. JavaScript简易计算器

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...

  5. javascript简单计算器实践

    参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入 ...

  6. js计算器---转

    至今见过的一个还没问题的计算器,收藏在此. 转自javascript写的简单的计算器原文链接,谢分享! js部分 ar num=0,result=0,numshow="0"; va ...

  7. JavaScript+HTML,简单的计算器实现

    成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异 ...

  8. Javascript+Dom(加减乘除计算器)

    计算器介绍:只能进行加减乘除,提示用户输入数字,正则表达式限制用户只能输入数字(在用户输入时限制),如果出现除零操作答案为0: 有两种针对不同运算符的解决方法: 1. 使用eval() 函数 //函数 ...

  9. JavaScript基础--简单功能的计算器(十一)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. jQuery/javascript实现简单网页计算器

    <html> <head> <meta charset="utf-8"> <title>jQuery实现</title> ...

随机推荐

  1. Javascript浏览器对象模型BoM要点总结

    BOM要点总结篇 温故而知心!!学到的东东,必须要总结一下,方便自己,巩固自己.今天我为大家总结一下BOM当中的一些要点: 一.Windows对象 1.窗口的操作 windows对象对操作浏览器窗口非 ...

  2. 1.springMVC+spring+Mybatis的整合思路

    SSM整合的过程:就是把一些东西交给spring管理,也就是添加配置文件的一个过程.那么有哪些东西我们要交给spring管理呢?大概有以下几个: 1.数据源(可配置数据库连接池) 2.SqlSessi ...

  3. Direct3D学习笔记 - 浅析HDR Lighting Sample

    一.HDR简介 HDR(High Dynamic Range,高动态范围)是一种图像后处理技术,是一种表达超过了显示器所能表现的亮度范围的图像映射技术.高动态范围技术能够很好地再现现实生活中丰富的亮度 ...

  4. jquery设置自己的标识符

    $(function(){ var $jc=jQuery.noConflict(); $jc('.main').css({'margin':'0 auto'}) })

  5. oracle 队列

    Oracle 高级队列(AQ) 适用对象:初步了解oracle高级队列人群 注意事项: 序号 注意事项 1 JMS监听部分可参考官方文档: http://docs.oracle.com/cd/e128 ...

  6. Volley简单封装

    public interface IRequest { /** * 获取头部信息 * * @return */ public Map<String, String> getHeaderMa ...

  7. Java--使用多线程下载,断点续传技术原理(RandomAccessFile)

    一.基础知识 1.什么是线程?什么是进程?它们之间的关系? 可以参考之前的一篇文章:java核心知识点学习----并发和并行的区别,进程和线程的区别,如何创建线程和线程的四种状态,什么是线程计时器 简 ...

  8. [z]查表空间使用情况

    SELECT UPPER(F.TABLESPACE_NAME) "表空间名",D.TOT_GROOTTE_MB "表空间大小(M)",D.TOT_GROOTTE ...

  9. android开发学习笔记001a

    Android 应用与开发环境 1.使用SDK版本:Android 2.3 . 2.发展和历史 创始人:Andy Rubin,Android公司被Google收购.07年11月5日1.0发布. 3.平 ...

  10. AndroidLinker与SO加壳技术之上篇

    1. 前言 Android 系统安全愈发重要,像传统pc安全的可执行文件加固一样,应用加固是Android系统安全中非常重要的一环.目前Android 应用加固可以分为dex加固和Native加固,N ...