1、什么是事件
发生一件事情，即为事件，比如鼠标点击、双击、键盘按钮被按下
事件句柄event handler：如onclick、onload等
2、事件发生后怎么办
JavaScript事件注册，就是把控件的事件和处理事件的代码联系起来的方法
3、如何进行事件的注册
(1)直接在控件标签中写代码。
<input type="button" value="测试" onclick = "alert('你好！');"/>
默认utf-8编码显示,编码问题的处理办法：
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<html>
<head>
<title>这是事件处理测试网页</title>
</head>
<body>'
<input type="button" value="确定"onclick="alert('你好吗？');alert('我很好')"/>
</body>
</html>
执行结果
执行结果
(2)编写一个事件处理程序（函数），在控件标签中将该函数指定给一个事件。
<script ...>
function show()
{
alert("你好!");
}
</script>
<input type="button" value="测试" onclick = "show()"/>
<html>
<head>
<title>这是事件处理测试网页</title>
<script>
function show()
{
alert('hello,how are you?');
alert('Im fine');
}
</script>
</head>
<body>'
<input type="button" value="确定"onclick="show();"/>
</body>
</html>
执行结果
执行结果
(3)在页面加载事件(onload)中，为控件绑定一个匿名函数。
<body onload="abc()">
function abc()
{
document.getElementById("b").onclick = function(){alert('你好');}; //匿名函数
}
<html>
<head>
<title>这是事件处理测试网页</title>
<script type="text/javascript">
function bangding()
{
document.getElementsByTagName("input").item(0).onclick=function()//找到标签为“input”的且是数组中的第一个
{
alert('匿名函数测试'); //加载时不调用，只有在上面的onclick时才会调用，此alert与onclick绑定
}; //注意此处的分号
}
</script>
</head>
<body onload="bangding()">
<input type="button" value="确定"/>
</body>
</html>
执行结果
(4)在页面加载事件(onload)中，为控件绑定一个命名函数。
<body onload="abc()">
function show()
{
alert("测试");
}
function abc()
{
document.f1.b1.onclick=show;
}
<html>
<head>
<title>这是事件处理测试网页</title>
<script type="text/javascript">
function show()
{
alert('这是命名函数测试');
}
function bangding()
{
document.getElementsByTagName("input").item(0).onclick=show //show函数单独定义
}
</script>
</head>
<body onload="bangding()">
<input type="button" value="确定"/>
</body>
</html>
执行结果
(5)另外一种页面加载事件的写法
window.onload=function()
{
}
<html>
<head>
<title>这是事件处理测试网页</title>
<script type="text/javascript">
window.onload=function()
{
document.getElementsByTagName("input").item(0).onclick=function()
{
alert('页面加载另一种写法')
};
}
</script>
</head>
<body>
<input type="button" value="确定"/>
</body>
</html>
执行结果
(6)事件对象event
以下信息都可以通过事件对象来获得
实例
在IE浏览器中是window.event，在其他浏览器中，是事件处理函数的第一个参数
<html>
<head>
<title>这是事件处理测试网页</title>
<style type="text/css">
#info
{
height:50px;
width:200px;
font-size:16px;
background-color:#0C6;
}
</style>
<script type="text/javascript">
window.onmousemove=function(evt)
{
if(window.event) evt=window.event; //如果是IE浏览器，window.event即为evt
document.getElementById("info").innerHTML=evt.screenX +":"+evt.screenY; //innerHTML属性设置或返回表格行的开始和结束标签之间的HTML
if(evt.ctrlKey)//当按下ctrl键时
{
document.getElementById("info").innerHTML +=":ctrl";
}
}
</script>
</head>
<body>
<div id="info">
</div>
</body>
</html>
执行结果1
执行结果2
网友评论