js中添加事件 attachEvent 与 addEventListener

时间:2023-03-08 22:14:55

给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body> <label>请输入北京今天空气质量:<input id="aqi-input" type="text"></label>
<button id="button">确认填写</button> <div>您输入的值是:<span id="aqi-display">尚无录入</span></div> <script type="text/javascript"> (function() {
/*
在注释下方写下代码
给按钮button绑定一个点击事件
在事件处理函数中
获取aqi-input输入的值,并显示在aqi-display中
*/
var zhiliang = document.getElementById("aqi-input");
var button1 = document.getElementById("button");
var display = document.getElementById("aqi-display");
addEvent(button1,"click",function(){
display.childNodes[0].nodeValue=zhiliang.value;
})
})();
function addEvent(elme,type,func){
if(elme.addEventListener){
elme.addEventListener(type,func);
}
else if(elme.attachEvent){
elme.attachEvent("on"+type,func)
}
else{
elem["on"+type] = func;
}
} </script>
</body>
</html>

实际处理相关

实例如上。

其实并没有体现为什么要用attachEvent或是addEventListener。

因为我们常用的 obj.onclick = method这样的方式也可达到效果,但是为什么要提出这个呢,因为点击按钮可能要触发多个方法,而此时,method不可以实现,如果去写三个method,结果也只会执最后一个定义的方法。

其实就是看哪个浏览器兼容哪个了,还有参数不一样,大体上是这两个区别,还有其处理程序的作用域不尽相同。

下面介绍 addEventListener( )  事件类型 不加on  ; 触发事件(函数)   ;布尔值,指定事件是否在捕获或冒泡阶段执行;这个没太懂。

js中添加事件 attachEvent 与 addEventListener

兼容性:  firefox、chrome、IE、safari、opera;不兼容IE7、IE8

addEventLinstener添加的事件处理程序是在其依附的元素的作用域中运行。

所以还是这个是值得使用的,另一个就是为了兼容而做的准备。  但是也要注意兼容性,最好还是像代码中所写。

attachEvent   on+事件类型  ; 触发事件;

js中添加事件 attachEvent 与 addEventListener

兼容性: 兼容:IE7、IE8;不兼容firefox、chrome、IE9、IE10、IE11、safari、opera

attachEvent的事件处理程序会在全局作用域中运行。

如上,js原生触发事件总结~