145 lines
1.7 KiB
Markdown
145 lines
1.7 KiB
Markdown
|
||
|
||
## 绑定事件的两种方式
|
||
|
||
我们在上一篇文章中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。
|
||
|
||
|
||
### 方式一：onclick
|
||
|
||
举例：
|
||
|
||
```html
|
||
<body>
|
||
<button>点我</button>
|
||
<script>
|
||
var btn = document.getElementsByTagName("button")[0];
|
||
|
||
//这种事件绑定的方法容易被层叠。
|
||
btn.onclick = function () {
|
||
console.log("事件1");
|
||
}
|
||
|
||
btn.onclick = function () {
|
||
console.log("事件2");
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
|
||
```
|
||
|
||
点击按钮后，上方代码的打印结果：
|
||
|
||
|
||
```html
|
||
事件2
|
||
```
|
||
|
||
我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。
|
||
|
||
|
||
### 方式二：addEventListener
|
||
|
||
addEventListener()里的参数：
|
||
|
||
- 参数1：事件名(不带on)
|
||
|
||
- 参数2：事件名(执行函数)
|
||
|
||
- 参数3：事件名(捕获或者冒泡)
|
||
|
||
|
||
举例：
|
||
|
||
```html
|
||
<body>
|
||
<button>按钮</button>
|
||
<script>
|
||
var btn = document.getElementsByTagName("button")[0];
|
||
|
||
//addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
|
||
//第二种事件绑定的方法不会出现层叠。（更适合团队开发）
|
||
btn.addEventListener("click", fn1);
|
||
btn.addEventListener("click", fn2);
|
||
|
||
function fn1() {
|
||
console.log("事件1");
|
||
}
|
||
|
||
function fn2() {
|
||
console.log("事件2");
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
|
||
点击按钮后，上方代码的打印结果：
|
||
|
||
|
||
```html
|
||
事件1
|
||
事件2
|
||
```
|
||
|
||
我们可以看到，这种绑定事件的方式，不会层叠掉之前的事件。
|
||
|
||
|
||
|
||
|
||
|
||
```html
|
||
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
```html
|
||
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
```html
|
||
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
```html
|
||
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
```html
|
||
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
```html
|
||
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
```html
|
||
|
||
```
|
||
|