一、事件:
加载事件:
- load:页面或图像加载完毕
焦点事件:
- focus:获得焦点
- blur:失去焦点
键盘事件:
- keydown:键盘按下
- keyup:键盘弹起
- keypress:某个键盘按键被按下并松开
点击事件:
- click:鼠标单击
- dbclick:鼠标双击
鼠标事件:
- mouseover(mouseenter):鼠标移入该元素
- mouseout(mouseleave):鼠标移出该元素
- mousedown:鼠标按下
- mouseup:鼠标弹起
- mousemove:鼠标移动
表单事件:
- reset:表单重置
- submit:表单提交
内容被选择或改变:
- select:文本被选中
- change:下拉列表选中项改变,或文本框内容改变
注意:任何一个事件都会对应一个事件句柄叫做:onclick ,以属性方式存在。
二、注册事件的方式:
- 第一种方式:直接在标签中使用事件句柄
<script type="text/javascript">
function dosome(){
alert("hello");
}
</script>
<input type="button" value="hello1" onclick="sayhello()"/>
- 第二种方式:使用纯JS代码
- 第一步:获取按钮对象。
- 第二步:给按钮对象的onclick属性赋值。 只要对象中有的属性都可以通过.赋值。
<input type="button" value="hello1" id="m1"/>
<script type="text/javascript">
function dosome(){
alert("hello");
}
第一步:
var bt1 = document.getElementById("m1");document是个内置对象,代表整个HTML页面
第二步:
bt1.onclick = dosome;注意函数名不加小括号
简写为:
document.getElementById("m1").onclick = function(){
alert("hello");
}
</script>
- 第三种方式:使用纯JS代码,并使用load事件
如果input标签的创建位于document.getElementById("m1")执行之后,因为还没有创建m1标签,所以会报错,解决方法是:使用onload事件
<script type="text/javascript">
window.onload = a;//这行代码规定了整个页面加载完毕后才能执行回调函数a,防止过早获取m1对象导致找不到对象报错的情况
function a(){
document.getElementById("m1").onclick = function(){
alert("hello");
}
}
简写为:
window.onload = function(){
document.getElementById("m1").onclick = function(){
alert("hello");
}
}
</script>
<input type="button" value="hello1" id="m1"/>//位于JS代码块之后