javascript学习笔记(五):异常捕获和事件处理
异常捕获
Try{
发生异常的代码块
}catch(err){
异常信息处理
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<form>
<input id="txt" type="text">
<input id="btn" type="button" onclick="demo()" value="按钮">
</form>
<script>
function demo(){
try{
var e = document.getElementById("txt").value;
if(e==""){
throw "请输入"; //一般throw会与try,catch配合使用
}
}catch(err){
alert(err);
}
}
</script>
</body>
</html>
事件处理
1、onclick鼠标点击事件
2、onmouseout鼠标离开事件
3、onmouseover鼠标经过事件
4、onchange文本框内容改变事件
5、onselect文本框内容选中事件
6、onfocus光标聚集事件
7、onload网页加载完毕事件
样式表style.css
.div{
width: 100px;
height: 100px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"> <!--指定rel为样式表,类型为css,外部文件为style.css-->
</head>
<body onload="onLoad()"> <!--onload网页加载完毕事件-->
<button onclick="onClick()">按钮</button> <!--onclick鼠标点击事件-->
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div> <!--onmouseout鼠标离开事件,onmouseover鼠标经过事件 -->
<form>
<input type="text" onchange="onChange(this)"> <!--onchange文本框内容改变事件-->
<br>
<input type="text" onselect="onSelect(this)" onfocus="onFocus(this)"> <!--onselect文本框内容选中事件,onfocus光标聚集事件-->
</form>
<script>
function onClick(){
alert("onclick鼠标点击");
}
function onOver(ooj){
ooj.innerHTML="onmouseover鼠标经过";
}
function onOut(ooj){
ooj.innerHTML="onmouseout鼠标离开";
}
function onChange(bg){
alert("onchange文本框内容改变");
}
function onSelect(bg){
bg.style.background="yellow";
alert("onselect文本框内容选中");
}
function onFocus(bg){
bg.style.background="green";
alert("onfocus光标聚集");
}
function onLoad(){
alert("onload网页加载完毕");
}
</script>
</body>
</html>
javascript学习笔记(五):异常捕获和事件处理的更多相关文章
- javascript学习笔记(四):事件处理函数和动态创建html标记。
1 HTML的事件属性 全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发 ...
- JAVAscript学习笔记 js异常 第二节 (原创) 参考js使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- python学习笔记5_异常
python学习笔记5_异常 1.什么事异常 Python使用异常对象(exception object) 来表示异常情况.遇到错误会发生异常. 如果异常对象未被处理或被捕捉,程序就会用所谓的回溯(t ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- JavaScript:学习笔记(2)——基本概念与数据类型
JavaScript:学习笔记(2)——基本概念与数据类型 语法 1.区分大小写.Test 和 test 是完全不同的两个变量. 2.语句最好以分号结束,也就是说不以分号结束也可以. 变量 1.JS的 ...
- JavaScript:学习笔记(10)——XMLHttpRequest对象
JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...
- Javascript学习笔记——操作浏览器对象
Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...
- C#可扩展编程之MEF学习笔记(五):MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
- (转)Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
随机推荐
- 怎么分辨是eclipse还是 android studio开发的
eclipse开发的一般都会带.classpath文件.Android studio开发的一般都会有.gradle文件夹和build.gradle文件
- CentOS7最小化安装-Linux-1
CentOS 7的安装其实很简单,主要是网络配置. 选英文.设置时区等 最小化安装 先启动一个网络 Begin 吧 在安装的时候设置好root密码.很简单 别去点安装tools. 等待安装完成后,点击 ...
- MySQL配置文件以及服务的开启关闭重启
linux系统中,配置文件路径一般为/etc/my.cnf [root@host ~]# mysql --help|grep my.cnf order of ...
- dom编程艺术章12
function addLoadEvent(func){//添加事件函数 var oldonload = window.onload; if(typeof window.onload != 'func ...
- mysql innodb count(*)速度慢且不准确的解决办法
innodb引擎在统计方面和myisam是不同的,Myisam内置了一个计数器,所以在使用 select count(*) from table 的时候,直接可以从计数器中取出数据.而innodb必须 ...
- git异常
1. SSL certificate problem: self signed certificate 因git默认是ssl方式验证,在采用http请求时,是使用的账号密码方式,因此需要git放行. ...
- javascript的DOM操作获取元素
一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> ...
- redis 学习笔记3(哨兵模式下分布式锁的实现以及全局唯一id的生成)
redis实现分布式锁和全局唯一id应该是较为常见的应用. 实现基于redis的setNX,以及incr命令.还是比较简单的! 搭建环境以及配置好sping整合,做了下测试,有兴趣的载下来看看,自己做 ...
- 服务限流-令牌桶java实现
此文非常不错,抄自: https://www.cnblogs.com/googlemeoften/p/6020718.html 其他实现 https://www.cnblogs.com/LBSer/p ...
- javascript:width,innerwidth和outerwidth的区别
width()方法用于获得元素宽度 innerWidth()方法用于获得包括内边界(padding)的元素宽 outerWidth()方法用于获得包括内边界(padding)和边框(border)的元 ...