<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中的常用事件及事件注册的两种方式</title>
</head>
<body>
<script type="text/javascript">
/*
JS中的事件:
blur:失去焦点
focus:获得焦点
click:鼠标单击
dblclick:鼠标双击
keydown:键盘按下
keyup:键盘弹起
mousedown:鼠标按下
mouseup:鼠标弹起
mouseover:鼠标经过
mousemove:鼠标移动
mouseout:鼠标离开
reset:表单重置
submit:表单提交
change:下拉列表选中项改变，或文本框内容改变
select:文本被选定
load:页面加载完毕（整个HTML页面中所有的元素全部加载完毕）
任何一个事件都对应一个事件句柄，事件句柄是在事件之前添加on，事件句柄以属性的形式存在
事件句柄出现在一个标签的属性位置上。
在事件句柄上调用的函数叫做"回调函数(callback函数)"
*/
function sayHello(){
alert("hello js")
}
</script>
<!--
注册事件的第一种方式：直接在标签中使用事件句柄
以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器
调用。我们称这个函数为回调函数。
-->
<button type="button" οnclick="sayHello()">hello1</button>
<input type="button" value="hello2" οnclick="sayHello()" />
<!--以上两行代码的作用相同，只是不同的写法-->
<input type="button" value="hello3" id="mybtn3"/>
<input type="button" value="hello4" id="mybtn4"/>
<input type="button" value="hello5" id="mybtn5"/>
<script>
function doSome(){
alert("do some!")
}
/*
第二种注册事件的方式：使用纯JS代码完成事件注册
*/
// 第一步：首先获取按钮对象（document全部小写，是内置对象，可直接用，
// document代表整个HTML页面）
var btnObj = document.getElementById("mybtn");
// 第二步：给按钮对象的onclick属性赋值（每个按钮对象都有onclick属性）
// 这行代码的含义是：将回调函数doSome注册到click事件上
btnObj.onclick = doSome; //"千万不要写小括号()",btnObj.onclick = doSome();这是错误写法
var btnObj1 = document.getElementById("mybtn1");
btnObj1.onclick = function(){ //这个函数没有名字，叫匿名函数，这个匿名函数也是一个回调函数
alert("text.......") //这个函数在页面打开的时候只是注册到按钮上，不会被调用，只有onclick
//事件发生之后才会被调用。
}
// 最常用的写法：
document.getElementById("mybtn2").onclick = function(){
alert("text、test、test........")
}
</script>
</body>
</html>
