知识点1：常用事件
onload
onclick
onmouseover，onmouseout，onmousedown
onkeydown
onchange
知识点2：动态给元素绑定事件
知识点1：常用事件
onload
页面加载完成后触发
<body onload="javascript:bodyOnload()">
<script type="text/javascript">
function bodyOnload(){
document.write("页面加载完成。。。");
}
</script>
</body>
图片加载完成后触发
<body>
<img src="001.jpg" width="200" onload="javascript:imgOnload()"/>
<script type="text/javascript">
function imgOnload(){
alert("图像加载完成。。。");
}
</script>
</body>
onclick
鼠标单击某个对象时触发
<body>
<img src="001.jpg" width="200" onclick="javascript:imgOnclick()"/>
<div onclick="javascript:divOnclick()">点击我试一试</div>
<input type="button" value="确定" onclick="javascript:btnOnclick()" />
<script type="text/javascript">
function imgOnclick(){
alert("你点击了图像");
}
function divOnclick(){
alert("你点击了DIV");
}
function btnOnclick(){
alert("你点击了按钮");
}
</script>
</body>
onmouseover，onmouseout，onmousedown
鼠标移到某元素之上时调用事件，鼠标从某元素上离开时调用事件，鼠标在某元素上按下时调用事件
<body>
<a id="a" href="index.html" onmouseover="javascript:over()" onmouseout="javascript:out()" onmousedown="down()">超链接</a>
<script type="text/javascript">
var a = document.getElementById("a");
function over(){
a.style.color = "red";
}
function out(){
a.style.color = "green";
}
function down(){
a.style.color = "yellow";
}
</script>
</body>
onkeydown
某个键盘按键被按下时触发
<body onkeydown="javascript:onKeyDown(event)">
<h1></h1>
<script type="text/javascript">
function onKeyDown(e){
var keynum;
var keychar;
if(window.event) // IE
{
keynum =e.keyCode
}
else if(e.which)//Netscape/Firefox/Opera
{
keynum =e.which
}
keychar = String.fromCharCode(keynum);
document.getElementsByTagName("h1")[0].innerHTML = "您按下了："+keynum+"("+keychar+") 键";
}
</script>
</body>
onchange
域的内容被改变时触发
<body>
<input type="text" value="" onchange="javascript:onChange()"/>
<script type="text/javascript">
function onChange(){
alert("文本改变了");
}
</script>
</body>
知识点2：动态给元素绑定事件
<body>
<input type="button" value="点击我" id="button"/>
<script type="text/javascript">
var btn = document.getElementById("button");
// 定义事件处理方法
function btnclick(){
alert("按钮被点击了");
}
//给元素绑定点击事件
btn.onclick = btnclick;
</script>
</body>
长按二维码关注Yacon老师微信公众号
