一. 点击事件
添加点击事件有两种方式：
-
根据id找到指定标签，为该标签添加事件
-
直接在该标签上添加点击事件
第一种方法的示例：
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function () {
alert("点击了按钮1");
}
btn2.onclick = function () {
alert("点击了按钮2");
}
</script>
</body>
再来看一下第二种方法示例：
<script type="text/javascript">
var fun1 = function () {
alert("点击了按钮1");
}
var fun2 = function () {
alert("点击了按钮2");
}
</script>
二 . 输入框事件
和点击事件一样，添加输入框事件也有两种方式：
-
根据id找到指定标签，为该标签添加输入框事件
-
直接在该标签上添加输入框事件
第一种方法的示例：
<input id = "input" type="text" />
<script type="text/javascript">
var input = document.getElementById("input");
input.onfocus = function () {
console.log("得到了焦点");
}
input.onblur = function () {
console.log("失去了焦点");
}
</script>
再来看一下第二种方法示例：
<input id = "input" type="text" onfocus="fun1()" onblur="fun2()"/>
<script type="text/javascript">
var input = document.getElementById("input");
var fun1 = function () {
console.log("得到了焦点");
}
var fun2 = function () {
console.log("失去了焦点");
}
</script>
三. 文档加载事件
如果我们把script标签放在两个按钮中间，会发现按钮1的功能正常，但是按钮2的功能出了问题，这是因为我们在script标签中通过getElementById(“btn2”);获取按钮2时，按钮2还不存在。
<body>
<button id="btn1">按钮1</button>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function () {
alert("点击了按钮1");
}
btn2.onclick = function () {
alert("点击了按钮2");
}
</script>
<button id="btn2">按钮2</button>
</body>
为了解决上面的问题，我们有两种解决方案，首先可以和以前一样，把scrip标签放在两个按钮下面，但是该方法有一定的局限性，一般不采用这种方法，一般我们会在整个文档加载完成的时候，再去获取元素。可以使用window.onload来实现：
<body>
<button id="btn1">按钮1</button>
<script type="text/javascript">
window.onload = function () {
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function () {
alert("点击了按钮1");
}
btn2.onclick = function () {
alert("点击了按钮2");
}
};
</script>
<button id="btn2">按钮2</button>
</body>
请登录之后再进行评论