事件
HTML4.0的特性之一是有能力使HTML事件触发浏览器中的动作，比如当用户点击某个HTML元素时启动一段JavaScript。
事件的一些问题
有一些绑定方法在绑定的时候可能无法使用一些标签
这里提供一个例子
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a1Ele=document.getElementById("a1")
console.log(a1Ele)//输出这个节点内的数据
</script>
</head>
<body>
<div id="a1">内容</div>
</body>
</html>
结果如图
理想情况下，它应该会返回数据。但是为什么会这样，具体原因是节点的创建在文档加载前面，导致文档在加载的时候节点已经创建好了。类似你的钱还没到位，空壳公司已经挂好名了。
对于这种情况有一个window.onload
window.onload
当我们给页面上的元素绑定事件的时候，必须等到文件加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
例子如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var a1Ele = document.getElementById("a1")
console.log(a1Ele)//输出这个节点内的数据
}//这里使用window.onload方法
</script>
</head>
<body>
<div id="a1">内容</div>
</body>
</html>
例子结果如图
绑定事件
绑定事件可以理解为给某些标签添加一些功能
绑定事件方法一:
例子如下
<!--绑定事件方法一-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function foo(){
alert("无内容")//这里将弹出框事件绑定给foo()
}
</script>
</head>
<body>
<div id="a1" onclick="foo()">绑定事件方法一</div>
</body>
</html>
在上述代码中我给你id为a1的标签绑定了一个弹窗事件，只要一点击该标签就会出现弹窗
效果如下
绑定事件方法二：
例子如下
<!--绑定事件方法二-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="a1">绑定事件方法二</div>
<script>
//绑定事件方法2
var a1Ele = document.getElementById("a1")
a1Ele.onclick = function () {
alert("呵呵呵");
};
</script>
</body>
</html>
在上述代码中script必须要在绑定了事件的标签后面，不过可以使用window.onload
修改如下
<!--绑定事件方法二-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var a1Ele = document.getElementById("a1")
a1Ele.onclick = function () {
alert("呵呵呵");
};
}//这里使用window.onload进行嵌套
</script>
</head>
<body>
<div id="a1">绑定事件方法二</div>
</body>
</html>
效果如图
绑定事件带参数的情况
绑定事件方法一带参数的例子
<!--绑定事件方法一-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function foo(_this){
// window对象
console.log(this)
// 当前函数的调用者
console.log(_this)
alert("无内容")//这里将弹出框事件绑定给foo()
}
</script>
</head>
<body>
<div id="a1" onclick="foo(this)">绑定事件方法一</div>
</body>
</html>
这里面的this是实参，表示触发事件的当前元素(window对象)。
函数定义过程中的_this为形参(当前函数的调用者)。
结果如下
