javascript学习（一） 异常处理与简单的事件
一：异常处理
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form>
<input id="txt" type="text" />
<input id="btn" type="button" value="提交" onclick="demo2()" />
</form>
<script type="text/javascript">
//系统错误
function demo() {
try {
alert(str);
}
catch (err) {
alert(err);
}
}
//自定义错误
function demo2() {
//这里如果不写try ..catch.. throw ("text不能为空"); 是不会弹出来的
try {
var e = document.getElementById("txt").value;
if (e == "") {
throw ("text不能为空");
}
}
catch (err) {
alert(err);
}
}
</script>
</body>
</html>
二：事件处理：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.div
{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div" onmouseover="onOver(this)" onmouseout="onOut(this)">
</div>
<form>
<input id="txt" type="text" onchange="onChange(this)" />
<input id="txt2" type="text" onselect="onSelect(this)" onfocus="onFocus(this)"/>
</form>
<script type="text/javascript">
function onOver(e) {
e.innerHTML = "Hello";
}
function onOut(e) {
e.innerHTML = "World";
} function onChange(e) {
alert("内容改变为:" + e.value)
}
function onSelect(e) {
e.style.color = "red";
}
function onFocus(e) {
e.style.color = "black";
}
</script>
</body>
</html>
效果：
1：当鼠标不再div上时aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAABrCAIAAAA3sQGNAAABwklEQVR4nO3XUW6DMBBF0dmRV+QFeS1RJaRsxfshH3SsoRSHJikkjzu6H1WFEDlY09RGZsexox/gXAP3rgP3rrPKbUZbgxtu3eD+MO5q3zOYmVnyH8oTj1XMaveC4XC4o7gnnenzZ2d62Dr7y1vjzv5qj7c7kLu48vAc91Tqnu58cu7BLDtEc4f7v7irWXKmaZ9EjjbtHSTf8qMvh7SBu83ZuUf3Km7RsOKeTXOmFC62e9zxPmff3Y2yzk3LfKvU+SnuqP3gbstqitNt2UUid15wx1Oc1h8L7jvcJeziRtw/3XA/zt1EyuLvZINb7u6N3PE+ld09hm8jw29SNjdK4ZfL7yRx2q1quD53/w96617FTXC/X3DDrRvccOsGN9y6wQ23bnDDrRvccOsGN9y6wQ23bnDDrRvccOsGN9y6wQ23bnDDrRvccOsGN9y6wQ23bnDDrRvccOsGN9y6wQ23bnDDrRvccOsGN9y6wQ23bnDDrRvccOsGN9y6wQ23bnDDrRvccOsGN9y6wQ23bnDDrRvccOsGN9y6wQ23bnDDrRvccOsGN9y6wQ23bnDDrRvcn8Z9+brSy+tx/+GtMdsG7l3nBvPPwCF0hROrAAAAAElFTkSuQmCC" alt="" />
2：当鼠标放在div上时aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAByCAIAAADoE2VEAAAB30lEQVR4nO3YzW3CQBgG4a+jrcgF0QX3KJKltLKFpAPnYBl5/QMLSexZNK/mgg9A/GCMEt+Ourg66mJw1GnDnTbcacOdNtxpw5023GnD3a5NhNWmDTdtuGnD7XibcV3EENFPD/uK93qJyM8cb77jbXJEKs/s5dG77CbCXHf8TWrCZiztGOwdbz5tuNFs0v4d6Cmb2yrhiZ1is9jt9KUZSbfiqbeZ06a6HxrETrHZvG7y9ONtrC8f1tssLsTFy7UUx6ZfXU+v2XQrmzj9LLduk1cY9w32jnvd/L3NUN4b+t/db/LWczbWwTa5/L5a/19g8wstRbH86Pj8eVqFOd7m/D+4obThpg03bbhpw00bbtpw04abNty04aYNN224acNNG27acNOGmzbctOGmDTdtuGnDTRtu2nDThps23LThpg03bbhpw00bbtpw04abNty04aYNN224acNNG27acNOGmzbctOGmDTdtuGnDTRtu2nDThps23LThpg03bbhpw00bbtpw04abNty04aYNN224acNNG27acNOGmzbctOGmDTdtuGnDTRtu2nDThps23LThpg03bbhpw00bbtpw04abNty04aYNN224acPtaJuPzy87t3s2//NpcLXThjttuPsB6uvxQXF/RokAAAAASUVORK5CYII=" alt="" />
3：修改txt的值为李鹏时：aaarticlea/png;base64,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" alt="" />
4：选中一下tex2的值时：aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMoAAAA2CAIAAAAJV5GdAAABQElEQVR4nO3bTWrDMBRGUe+p++s+uobSUbOqbsKdmeB/SD7ryZyDCMIixoOLYg0yjBAztH4A7kxeBMmLIHkRJC+C5EWQvAiSF0HyIkheBMmLIHkRJC+C5EWQvAiSF0HD98/v1tj6zufjz7jTCOa1tbCfV+ZhaEBeBMmLoLp5fXy9c9BET3mtXjysSl4Nlc7r0CydM3OuVDqv2Sb0/Lm/uvrJ9TrIaxw3J4d5TbeiidJ5TZNlVc9Lk+Xc7tVW6by23srP/ziOiwS5Ugd5HR4ex923Lnk11FNeqxedHCsrndeh/d1rtsr1Sud1fvdycqzpznnZvZrrI6/Jal6rG5WTYwV95PX6oIm6eXED8iJIXgRl8/JXDiOYV+7WIC+C5EWQvAiSF0HyIkheBMmLIHkRJC+C5EWQvAiSF0HyIkheBP0DkJfiowvVJgkAAAAASUVORK5CYII=" alt="" />结果变为：aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAAA1CAIAAACsmLLmAAABWklEQVR4nO3bUYqDMBiF0ex/K8M8dYGZl6F11Fgpg7n8nkMQodoK+Yi10NYhQJt9AdC7EAkhRCIIkQhCJIIQiSBEIgiRCEIkghCJIEQiCJEIQiSCEIkgRCIIkQhCJIIQiSBEIgiRCEIkghCJIEQitK/vx3OMDloeYxQYVxZ20mtFPLi+zEvnM5mzKcTbyZxNId5O5mxODbF5VJqgaIgfxPQ8RYgzVAmxtTdjddjxPperEuLr1LbeHr862nKtWiFub6+rqg7isyJOVSXE5f239/X+mVtztyLOVCXE3/MGXw2XB4y2HlamqhXin/fY6+nM90IhzlA0xFFMnppTVQnx/M83u9vtq1yrSojrNxiviKOtFXEqIVoRI5QLcfS8vHvAdqcLcY5yIf7DhwtxAiESIXM2hXg7mbMpxNvJnE1/nrrjuLKwkzwuEEGIRBAiEYRIBCESQYhEECIRfgDKwTVC+UmAHAAAAABJRU5ErkJggg==" alt="" />
5：焦点放在tex2上时：结果为：aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL0AAAAkCAIAAABT3KzsAAAA9klEQVR4nO3YUQ6CMBBF0a7cVbkqN1F/DGmgremLzpuSe9IQCBD9uBnBUoF1xf0FsCW6gYJuoPh083i+WHdacd38+5MQhm6goBso6AaKFN2UsvzOJdyCH/J0U745XTbZh4V53hwd1N4IuZ6dX48wzm7auXLaaQ+7W+aNl/N3qj3snpr8TlXmjZV53nQfa9oLRlui8UrxPlUHw4Mnm7RSdDPqgPeptLK/h3e37VlYZJ83oy3zxmvLbuZ3IYD/f7/55Lg+1rQ7cEkxb7AduoGCbqCgGyhCu2HdaQV1AyyhGyjoBgq6gYJuoKAbKOgGCrqBgm6goBso3iRn0InlYqC7AAAAAElFTkSuQmCC" alt="" />
javascript学习（一） 异常处理与简单的事件的更多相关文章
- javascript 学习之自定义滚动条加滚轮事件
要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...
- JavaScript学习日志（六）：事件
这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...
- JAVAscript学习笔记 js句柄监听事件 第四节 （原创） 参考js使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript学习笔记（七）：事件详解
HTML事件处理 <!DOCTYPE html> <html> <head lang="en"> <meta chaset="U ...
- web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解
1.JS事件详解-事件流 1.1.事件流 1.事件流: 描述的是在页面中接受事件的顺序 2.事件冒泡: 由最具体的元素接收,然后逐级上传播至最不具体的节点(文档) 3.事件捕获: 最不具体的节点先接收 ...
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- Javascript学习-简单测试环境
Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...
- JavaScript学习之事件原理和实践
1 基本概念 1.1 事件 JavaScript与HTML之间的交互是通过事件实现的. 事件是文档或浏览器窗口中发生的一些特定的交互瞬间,在事件上可以注册处理程序,以便当事件发生时,处理程序中的代码得 ...
- JavaScript学习（2）：对象、集合以及错误处理
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...
随机推荐
- Silverlight动画显示Line线
目的:在silverlight中显示两点之间的连线,要求动画显示连线效果. 如果需实现动画效果不得不了解,Storyborad对象: Storyboard Silverlight 通过时间线控制动 ...
- HTML基础-- 标签、表格
<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...
- ios json parse
参考:http://wenxin2009.iteye.com/blog/1671691
- Session的工作机制详解和安全性问题（PHP实例讲解）
我们先简单的了解一些http的知识,从而理解该协议的无状态特性.然后,学习一些关于cookie的基本操作.最后,我会一步步阐述如何使用一些简单,高效的方法来提高你的php应用程序的安全性以及稳定行. ...
- Android -- 初探MVP模式
1,相信大家对mvp模式都很熟悉了,M-Model-模型.V-View-视图.C-Controller-控制器.MVP作为MVC的版本演化,与MVC的意义类似:M-Model-模型.V-View-视图 ...
- spark streaming - kafka updateStateByKey 统计用户消费金额
场景 餐厅老板想要统计每个用户来他的店里总共消费了多少金额,我们可以使用updateStateByKey来实现 从kafka接收用户消费json数据,统计每分钟用户的消费情况,并且统计所有时间所有用户 ...
- 夺命雷公狗—angularjs—19—angular-route
ngRoute包括的内容 ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history来灵活调用相应的方式.ng的路由(ngRoute) ...
- UIView属性及方法
@property(nonatomic) CGFloat alpha //设置视图的透明度 //透明度的设置从最小0.0到1.0 ,1.0为完全不透明, //其中这个属性只影响当前视图,并不会影响其子 ...
- JVM参数配置的线上教训
原来规则处理业务五十台服务器经常大量fgc,load飙高,我修改了jvm配置后,五十台服务器十多天没有任何异常,双十一中轻闲度过. 可是今天突然又有一台大量fgc,load飙高.分析了半天,回头一看, ...
- 如何通过ps -ef|grep tomcat只获得你需要的查询进程，排除掉grep本身的进程信息
执行命令:ps -ef|grep tomcat|grep /opt/upay3/application/dispatcherTomcat/bin输出的进程信息会显示2个:包括grep本身的进程+你查询 ...