JavaScript 事件的一个重要方面是它们拥有一些相对一致的特点，可以给你的开发提供更多的强大功能。
最方便和强大的就是事件对象，他们可以帮你处理鼠标事件和键盘敲击方面的情况，此外还可以修改一般事件的捕获/冒泡流的函数。
一、事件处理三部分组成
对象.事件处理函数=函数。例如：单击文档任意处。
click 表示一个事件类型，单击。
onclick 表示一个事件处理函数或绑定对象的属性(或者叫事件监听器、侦听器)。
document 表示一个绑定的对象，用于触发某个元素区域。
function()匿名函数是被执行的函数，用于触发后执行。
<script type="text/javascript">
window.onload = function(){
document.onclick = function () {
alert(‘Lee‘);
};
};
</script>
除了用匿名函数的方法作为被执行的函数，也可以设置成独立的函数。
<script type="text/javascript">
function box() {
alert(‘Lee‘);
}
window.onload = function(){
document.onclick = box;
};
</script>
二、this 关键字和上下文
在一个对象里，由于作用域的关系，this 代表着离它最近对象。
<script type="text/javascript">
window.onload = function(){
var input = document.getElementsByTagName(‘input‘)[0];
input.onclick = function () {
alert(this); //HTMLInputElement，this 表示 input 对象
};
};
</script>
</head>
<body>
<input type="button" value="按钮"/>
</body>
<script type="text/javascript">
function box(){
alert(this); //HTMLInputElement，this 表示 input 对象
};
box(); //[object Window]如果是在全局范围调用box()那么this代表window
window.onload = function(){
var input = document.getElementsByTagName(‘input‘)[0];
input.onclick = box;
};
</script>
</head>
<body>
<input type="button" value="按钮"/>
</body>
三、事件对象（那么事件对象是什么？它在哪里呢？）
当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。
事件对象，我们一般称作为 event 对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的。
那么首先，我们就必须验证一下，在执行函数中没有传递参数，是否可以得到隐藏的参数。
<script type="text/javascript">
function box(){
alert(arguments.length); //0，没有得到任何传递的参数
};
box();
</script>
</head>
<body>
<input type="button" value="按钮"/>
</body>
<script type="text/javascript">
window.onload = function(){
var input = document.getElementsByTagName(‘input‘)[0];
input.onclick = function(){
alert(arguments[0]); //[object MouseEvent]鼠标事件对象
};
};
</script>
</head>
<body>
<input type="button" value="按钮"/>
</body>
上面这种做法比较累，那么比较简单的做法是，直接通过接收参数来得到即可
<script type="text/javascript">
window.onload = function(){
var input = document.getElementsByTagName(‘input‘)[0];
input.onclick = function (evt) { //接受 event 对象，名称不一定非要 event
alert(evt); //MouseEvent，鼠标事件对象
};
};
</script>
</head>
<body>
<input type="button" value="按钮"/>
</body>
直接接收 event 对象，是 W3C 的做法，IE 6,7,8不支持，IE 6,7,8自己定义了一个 event 对象，直接在 window.event 获取即可。
<script type="text/javascript">
window.onload = function(){
var input = document.getElementsByTagName(‘input‘)[0];
input.onclick = function (evt) {
var e = evt || window.event; //实现跨浏览器兼容获取 event 对象
alert(e);
};
};
</script>
</head>
<body>
<input type="button" value="按钮"/>
</body>
时间： 2024-10-25 23:40:33