已知在IE中addEventListener 存在兼容问题需要通过attachEvent实现事件绑定
时间: 2024-02-09 18:09:32 浏览: 31
是的,addEventListener 在 IE8 及以下版本中存在兼容性问题,需要使用 attachEvent 来实现事件绑定。不过需要注意的是,attachEvent 绑定的事件会在全局作用域下执行,而不是在绑定元素的作用域下执行。同时,attachEvent 与 addEventListener 的参数也有所不同,例如绑定事件的名称需要加上 "on" 前缀,事件处理函数需要使用 window.event 对象来获取事件对象。
相关问题
封装已知在IE中addEventListener 存在兼容问题需要通过attachEvent实现事件绑定 - 在window中IE环境下不存在addEventListener 而是attachEvent - attachEvent 使用 ```javascript el.attachEvent("on" + type, fn) ``` 请编写一个方法要求传入 type事件名 el 元素 fn事件回调函数来实现事件的绑定。 function( if(window){}else{ } )
可以按照以下方式进行封装:
```javascript
function bindEvent(type, el, fn) {
if (window.addEventListener) {
// 非IE浏览器
el.addEventListener(type, fn, false);
} else if (window.attachEvent) {
// IE浏览器
el.attachEvent("on" + type, function () {
fn.call(el, window.event);
});
}
}
```
使用时可以这样调用:
```javascript
var btn = document.getElementById("btn");
bindEvent("click", btn, function (event) {
console.log("按钮被点击了");
});
```
这样就可以实现兼容IE和非IE浏览器的事件绑定了。
addEventListener绑定事件
addEventListener是一种给元素绑定事件的方法。通过使用addEventListener方法,可以为指定的元素添加各种事件,例如点击事件、鼠标移动事件等。下面是一个使用addEventListener方法绑定点击事件的示例:
```javascript
let element = document.getElementById("element");
element.addEventListener("click", function(e) {
console.log("点击了");
});
```
在上面的示例中,首先通过document.getElementById方法获取到id为"element"的元素,然后使用addEventListener方法为该元素绑定了一个点击事件。当该元素被点击时,会执行回调函数中的代码,即打印出"点击了"。
需要注意的是,addEventListener方法的第一个参数是事件类型,比如"click"表示点击事件。第二个参数是一个回调函数,当事件被触发时,该回调函数会被执行。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)