JS——事件的绑定与解绑
1、绑定形式
ele.addEventListener(evtName, fn) ele["on" + evtName] = function () {} ele.onclick = function () {}
2、addEventListener：事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行，不会被层叠掉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>绑定事件</button> <script> var btnEle = document.getElementsByTagName("button")[0]; bindEvt2(btnEle, "click", fn1); bindEvt2(btnEle, "click", fn2); function fn1() { console.log("你是美丽的人"); } function fn2() { console.log("你是个坏人"); } function bindEvt2(ele, evtName, fn) { ele.addEventListener(evtName, fn); } </script> </body> </html>
//九尺龙泉万卷书，上天生我意何如。 //不能报国平天下，枉为男儿大丈夫。
注意事项：ele["on" + evtName]与ele.onclick绑定的方式会层叠到之前的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>点击</button> <script> var btn=document.getElementsByTagName("button")[0]; btn.onclick=function () { console.log("你是美人"); } btn["onclick"]=function () { console.log("谢谢呀"); } </script> </body> </html>
//谢谢呀
3、addEventListener原理：之所以可以不层叠之前注册事件，主要是判断之前是否注册了此类事件，如果注册了就先执行此事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>点击</button> <script> var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { console.log("你是美人"); } addEvent(btn, "click", fn); function addEvent(ele, evtName, fn) { var oldEvnet = ele["on" + evtName];//如果进入绑定事件本身，那么该事件已经本绑定了，所以获取旧的事件必须在新的事件绑定之前 ele["on" + evtName] = function () { //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true if (oldEvnet) { oldEvnet();//因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数 fn(); } else { fn(); } } } function fn() { console.log("谢谢呀") } </script> </body> </html>
//你是美人 //谢谢呀
4、事件绑定的兼容写法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button>赋诗</button> <script> var btn = document.getElementsByTagName("button")[0]; // 火狐谷歌IE9+支持addEventListener // btn.addEventListener("click",fn1); // btn.addEventListener("click",fn2); // IE678支持attachEvent // btn.attachEvent("onclick",fn1); // btn.attachEvent("onclick",fn2); //兼容写法 EventListen = { addEvent: function (ele,fn,str) { //通过判断调用的方式兼容IE678 //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法 if(ele.addEventListener){ //直接调用 ele.addEventListener(str,fn); }else if(ele.attachEvent){ ele.attachEvent("on"+str,fn); }else{ //在addEventListener和attachEvent都不存在的情况下，用此代码 ele["on"+str] = fn; } } } EventListen.addEvent(btn,fn1,"click") EventListen.addEvent(btn,fn2,"click") function fn1(){ console.log("九尺龙泉万卷书，上天生我意何如。"); } function fn2(){ console.log("不能报国平天下，枉为男儿大丈夫。"); } </script> </body> </html>
//九尺龙泉万卷书，上天生我意何如。 //不能报国平天下，枉为男儿大丈夫。
5、事件解绑方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>点击</button> <script> var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { console.log("你是美人"); } btn.onclick = null; </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button>赋诗</button> <script> var btn = document.getElementsByTagName("button")[0]; EventListen = { addEvent: function (ele, fn, str) { //通过判断调用的方式兼容IE678 //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法 if (ele.addEventListener) { //直接调用 ele.addEventListener(str, fn); } else if (ele.attachEvent) { ele.attachEvent("on" + str, fn); } else { //在addEventListener和attachEvent都不存在的情况下，用此代码 ele["on" + str] = fn; } }, removeEvent: function (ele, fn, str) { if (ele.removeEventListener) { ele.removeEventListener(str, fn); } else if (ele.detachEvent) { ele.detachEvent("on" + str, fn); } else { ele["on" + str] = null; } } } EventListen.addEvent(btn, fn, "click"); EventListen.removeEvent(btn, fn, "click"); function fn() { alert(1); } </script> </body> </html>
注意事项：ele.onclick只能用ele.onclick=null，removeEvent只能解绑addEventListener，detachEvent只能解绑attachEvent。
