绑定多个事件
1. 对象.addEventListener(“事件类型”,事件处理函数,false)——谷歌和火狐支持,IE8不支持
- 参数1:事件的类型—事件的名字,没有on
- 参数2:事件处理函数—函数(命名函数,匿名函数)
- 参数3:布尔类型,指定事件处理函数的时期或阶段-------先写false
（第三个参数后文事件冒泡时候再说，链接：https://blog.csdn.net/weixin_45525272/article/details/108142029）
为同一个元素绑定多个相同的事件-- my$("btn").addEventListener("click",function () { console.log("你好啊"); },false); my$("btn").addEventListener("click",function () { console.log("你好牛啊"); },false); my$("btn").addEventListener("click",function () { console.log("你好牛逼啊"); },false); my$("btn").addEventListener("click",function () { console.log("你是好牛逼啊"); },false);
2. 对象.attachEvent(“有on的事件类型”,事件处理函数)——谷歌不支持,火狐不支持,IE8支持
- 参数1:事件类型—事件名字，有on
- 参数2:事件处理函数—函数(命名函数,匿名函数)
my$("btn").attachEvent("onclick",function () { console.log("小杨好帅哦1"); }); my$("btn").attachEvent("onclick",function () { console.log("小杨好帅哦2"); }); my$("btn").attachEvent("onclick",function () { console.log("小杨好帅哦3"); // });
3. 绑定事件兼容代码
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数 function addEventListener(element,type,fn) { //判断浏览器是否支持这个方法 if(element.addEventListener){ element.addEventListener(type,fn,false); }else if(element.attachEvent){ element.attachEvent("on"+type,fn); }else{ element["on"+type]=fn; } } addEventListener(my$("btn"),"click",function () { console.log("你好啊"); }); addEventListener(my$("btn"),"click",function () { console.log("你好二啊"); }); addEventListener(my$("btn"),"click",function () { console.log("你好二虎啊"); });
4.两种方法的区别
相同点: 都可以为元素绑定事件
不同点:
- 方法名不一样
- 参数个数不一样
addEventListener三个参数,
attachEvent两个参数
- addEventListener 谷歌,火狐,IE11支持,IE8不支持
attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
- this不同,
addEventListener 中的this是当前绑定事件的对象
attachEvent中的this是window
- addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on
事件解绑
注意:用什么方式绑定事件,就应该用对应的方式解绑事件
1.对象.on事件名字=null
// 1.绑定事件 my$("btn").onclick=function () { console.log("我很好"); }; my$("btn2").onclick=function () { // 2.解绑事件 my$("btn").onclick=null; };
2. removeEventListener解绑事件
对象.addEventListener(“没有on的事件类型”,命名函数,false);—绑定事件
对象.removeEventListener(“没有on的事件类型”,函数名字,false);
function f1() { console.log("第一个事件"); } function f2() { console.log("第二个事件"); } my$("btn").addEventListener("click",f1,false); my$("btn").addEventListener("click",f2,false); //点击第二个按钮把第一个按钮的第一个点击事件解绑 my$("btn2").onclick=function () { //解绑事件的时候,需要在绑定事件的时候,使用命名函数 my$("btn").removeEventListener("click",f1,false); };
3. detachEvent解绑事件
对象.attachEvent(“on事件类型”,命名函数);—绑定事件
对象.detachEvent(“on事件类型”,函数名字);
function f1() { console.log("第一个事件"); } function f2() { console.log("第二个事件"); } my$("btn").attachEvent("onclick",f1); my$("btn").attachEvent("onclick",f2); my$("btn2").onclick=function () { my$("btn").detachEvent("onclick",f1); };
4. 解绑兼容性代码
//绑定事件的兼容 function addEventListener(element,type,fn) { if(element.addEventListener){ element.addEventListener(type,fn,false); }else if(element.attachEvent){ element.attachEvent("on"+type,fn); }else{ element["on"+type]=fn; } } //解绑事件的兼容 //为任意的一个元素,解绑对应的事件 function removeEventListener(element,type,fnName) { if(element.removeEventListener){ element.removeEventListener(type,fnName,false); }else if(element.detachEvent){ element.detachEvent("on"+type,fnName); }else{ element["on"+type]=null; } }
案例：
function f1() { console.log("第一个事件"); } function f2() { console.log("第二个事件"); } addEventListener(my$("btn1"),"click",f1); addEventListener(my$("btn1"),"click",f2); my$("btn2").onclick=function () { removeEventListener(my$("btn1"),"click",f1); };
JavaScript switch加载多个事件
common.js
function my$(id) { return document.getElementById(id); } //设置任意的标签中间的任意文本内容 function setInnerText(element,text) { //判断浏览器是否支持这个属性 if(typeof element.textContent =="undefined"){//不支持 element.innerText=text; }else{//支持这个属性 element.textContent=text; } } //获取任意标签中间的文本内容 function getInnerText(element) { if(typeof element.textContent=="undefined"){ return element.innerText; }else{ return element.textContent; } }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="小红帽" id="btn"/> <script src="common.js"></script> <script> //为同一个元素绑定多个不同的事件,指向相同的事件处理函数 my$("btn").onclick = f1; my$("btn").onmouseover = f1; my$("btn").onmouseout = f1; function f1(e) { switch (e.type) { case "click": alert("好帅哦"); break; case "mouseover": this.style.backgroundColor = "red"; break; case "mouseout": this.style.backgroundColor = "green"; break; } } // my$("btn").οnmοuseοver=function (e) { // console.log(e); // }; </script> </body> </html>
