From 944e876ae073bf944eb534b53dafc20507fc8326 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Wed, 13 Nov 2019 20:21:12 +0800 Subject: [PATCH] =?UTF-8?q?add:=20attachEvent()=E7=BB=91=E5=AE=9A=E4=BD=8E?= =?UTF-8?q?=E7=89=88=E6=9C=ACIE=E6=B5=8F=E8=A7=88=E5=99=A8=E7=9A=84?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../27-事件的绑定和事件对象Event.md | 106 +++++++++++++++++- 1 file changed, 104 insertions(+), 2 deletions(-) diff --git a/04-JavaScript基础/27-事件的绑定和事件对象Event.md b/04-JavaScript基础/27-事件的绑定和事件对象Event.md index 292a1ed..5c26779 100644 --- a/04-JavaScript基础/27-事件的绑定和事件对象Event.md +++ b/04-JavaScript基础/27-事件的绑定和事件对象Event.md @@ -95,14 +95,116 @@ 我们可以看到，`addEventListener()`这种绑定事件的方式： -- 一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。 +- 一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。**执行顺序是**：事件被触发时，响应函数会按照函数的绑定顺序执行。 -- 事件被触发时，响应函数会按照函数的绑定顺序执行。 +- addEventListener()中的this，是绑定事件的对象。 - `addEventListener()`不支持 IE8 及以下的浏览器。在IE8中可以使用`attachEvent`来绑定事件（详见下一小段）。 ### DOM2的写法：attachEvent（IE8及以下版本浏览器） +```javascript + element.attachEvent('onclick', function () { + + }); + +``` + +参数解释： + +- 参数1：事件名的字符串(注意，有on) + +- 参数2：回调函数：当事件触发时，该函数会被执行 + +举例： + +```html + + + + +``` + +在低版本的IE浏览器上，点击按钮后，上方代码的打印结果： + + +```html + 事件2 + 事件1 +``` + +我们可以看到，`attachEvent()`这种绑定事件的方式： + +- 一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。**注意**：执行顺序是，后绑定的先执行。 + +- attachEvent()中的this，是window + +### 兼容性写法 + +上面的内容里，需要强调的是： + +- `addEventListener()`中的this，是绑定事件的对象。 + +- `attachEvent()`中的this，是window。 + +既然这两个写法的`this`不同，那么，有没有一种兼容性的写法可以确保这两种绑定方式的this是相同的呢？来看看 `bind` 是怎么用的。 + + + +```html + + + + +``` ## 事件对象