事件周期
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. VS2010中没有ado.net entity data model实体数据模型这一选项-解决办法

    前提先安装VS2010 SP1包. 解决办法: 1.从VS2010的安装盘目录下面的WCU\EFTools找到ADONETEntityFrameworkTools_chs.msi和ADONETEnti ...

  2. 学习shell脚本笔记

    1.if 是单分支语句,使用格式如下: if condition ; then statement ….. fi 2.if … else 是双分支语句,使用格式如下: if condition ; t ...

  3. Sharif University CTF 2016 -- Android App

    很多种的方案: 方案 A: 直接逆向读代码方案 B: 解包,加入debug信息,重新打包,动态调试方案 C: 解包,改代码加入log.i整出flag, 去掉MainActivity里面d=什么也可以, ...

  4. mongodb sharding 简单部署记录

    创建目录 mkdir {mongos,config,shard1,shard2} mkdir -p mongos/{data,log} mkdir -p config/{data,log} mkdir ...

  5. xshell xftp

    xshell : http://www.netsarang.com/xshell_download.html xftp:http://www.netsarang.com/products/xfp_ov ...

  6. 滚动监听(bootstrap)

    1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...

  7. SQL Server 2008 通用分页存储过程

    1.alert USE [数据库名称] GO /****** Object: StoredProcedure [dbo].[dbTab_PagerHelper] Script Date: 08/22/ ...

  8. JDBC获取sql server存储过程查询结果集(没有出参)

    对于一些较为复杂的统计条件查询,可以通过存储过程来实现,既可以提高效率,减少网络流量,也可以避免sql语句耦合在代码中.但是存储过程返回的结果集如何获取(类似表数据),却着实让我费劲心力. 如下: C ...

  9. js实例:验证只能输入数字和一个小数点

    分享一个javascript脚本代码,用于验证只能输入数字和一个小数点,检测数字输入是否符合要求,效果不错,有用到的朋友拿去吧. 原文地址:http://www.jbxue.com/article/1 ...

  10. Xcode Custom Shortcut

    edit file "/Applications/Xcode.app/Contents/Frameworks/IDEKit.framework/Resources" add < ...