js的常用事件。
任何一个事件都有对应的事件句柄。事件句柄是在事件名称前添加on就行。
(1) blur 失去焦点
(5) focus 获得焦点
(3) click 鼠标单击
(4) dblclick 鼠标双击
(6) keydown 健盘按下
(7) keyup 键盘弹起
(9) mousedowrn 鼠标按下
(16) mouseover 鼠标经过
(11) mousemove 鼠标移动
(12) mouseout 鼠标离开
(13) mouseup 鼠标弹起
(16)submit 表单提交
(14) reset 表单重置
(15) select 文本被选定
(2) change 下拉列表选中项改变或文本框内容改变
(8) load 页面加载完毕(页面所有元素加载完触发)
注册事件
第一种
在标签内使用事件句柄，在句柄后面编写JS代码
当句柄事件发生，监听器调用JS代码
以下button标签中的sayHello()函数,
在页面打开的时候并不会执行,只是在页面打开的过程中完成事件的绑定，完成事件的注册,以后只有当该事件发生之后sayHello()函数才会执行
像这种函数又一种特殊的称谓:回调函数。
英语单词叫做: callback function
<input type="button" value="hello" onclick="sayHello()">
</input>
这个回调函数的特点是:
监听器负责调用,程序员不负责调用。
当事件发生之后,监听器会负责调用该函数。像这种函数被称为回调函数。
第二种
在JS代码中绑定事件
由于执行顺序，script代码必须在标签定义之后
（js代码顺序执行，但是js中定义的函数提前加载到内存）
<input type="button" value="value"/>
<script type="text/javascript">
/*定义一个函数*/
function sum(){
console.log("sum function invoke! ")
}
/*根据id获取对象*/
var obj = document.getElementById( "id" );
//绑定函数到click事件
obj.onclick=sum
</script>
//回调函数可以是一个匿名函数
//这行代码的执行只是完成事件click的注册,给click事件注册一个回调函数．
obj.onclick =function( ){
console.log("我是一个回调函数，同时我没有名字，叫做匿名函数!")
}
调整JS代码执行顺序
利用load属性
先加载元素后执行JS代码
< ! DOCTYPE html>chtml>
<head>
<meta charset="utf-8">
<title>关于代码的执行顺序</title>
</head>
<body onload="pageLoad()">
<script type="text/javascript">
function pageLoad(){
//页面加载完毕之后才会执行这里的代码.此时id="btn"的元素已经加载到浏览器内存了
var btnElt = document.getElementById( "btn");
btnElt.onclick = function(){
console.log(“按钮被点击了，匿名图数被执行! ")
}
</script>
<input type="button" value="hello" id="btn”/>
</body>
</html>
直接使用window对象
<script type="text/javascript">
window.onload=function(){
console.log( "myfun execute!")
}
//页面加载后执行function
</script>
完美的事件绑定
不用担心JS代码执行时元素未被加载而出错
<script type="text/javascript">
window .onload = function( ){
var btn1 = document.getElementById( "btn1");
btn1.onclick = function(){
}
}
</script>
<input type="button" id="btn1"/>
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
