js绑定事件和解绑事件的方法

xiaoxiao2022-07-13 234

绑定事件的方法

元素函数 <input onclick="alert('哈哈')" type="button" value="点击我，弹出警告框" />自定义函数 <input onclick=alert("哈哈"); type="button" value="方法1" /> <input onclick="myAlert()" type="button" value="方法2" /> <script> //方法1 function myAlert(){ alert("呵呵"); } </script> 元素.on事件=function（）{//事件处理函数代码} <input id="demo" type="button" value="按钮" /> <script> document.getElementById("demo").onclick=function(){ alert(“哈哈”); } </script>

这种方式在JavaScript代码中绑定事件，可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。但可能会被其他人添加的点击事件覆盖。 4. 绑定事件监听函数addEventListener（attachEvent）（1）引入：如果直接为元素绑定事件，那么该元素该事件的最后一个处理函数会覆盖之前的函数。如下：只输出3333，前面的处理函数不执行

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="按钮" id="btn"/> <script> var btn = document.getElementById("btn"); btn.onclick=function () { console.log("1111"); }; btn.onclick=function () { console.log("2222"); }; btn.onclick=function () { console.log("3333"); }; </script> </body> </html>

（2）解决方法：addEventListener（attachEvent） 1 对象.addEventListener(“事件类型”,事件处理函数,false);–谷歌和火狐支持,IE8不支持，最后一个参数是控制点击事件发生时，时冒泡阶段还是捕获阶段。 2 对象.attachEvent(“有on的事件类型”,事件处理函数)–谷歌不支持,火狐不支持,IE8支持

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="按钮" id="btn"/> <script> var btn = document.getElementById("btn"); btn.addEventListener("click",function () { console.log("1111"); },false); btn.addEventListener("click",function () { console.log("2222"); },false); btn.addEventListener("click",function () { console.log("3333"); },false); </script> </body> </html>

结果：1111、2222、3333都输出

（4）兼容代码

（5）addEventListener和attachEvent的区别（1）方法名不一样（2）参数个数不一样addEventListener三个参数,attachEvent两个参数（3）addEventListener 谷歌,火狐,IE11支持,IE8不支持，attachEvent 谷歌火狐不支持,IE11不支持,IE8支持（4）this不同,addEventListener 中的this是当前绑定事件的对象， attachEvent中的this是window （5）addEventListener中事件的类型(事件的名字)没有on，attachEvent中的事件的类型(事件的名字)有on

解绑事件的方法

对象.on事件名字=null <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="按钮1" id="btn"/> <input type="button" value="按钮2" id="btn2"/> <script> document.getElementById("btn").onclick=function () { alert("111"); }; document.getElementById("btn2").onclick=function () { //1.解绑事件 document.getElementById("btn").onclick=null; }; </script> </body> </html> 对象.removeEventListener(“没有on的事件类型”,函数名字,false) 对象.removeEventListener(“没有on的事件类型”,函数名字,false);（火狐、谷歌）对象.detachEvent(“on事件类型”,函数名字);（IE）注意：解绑的事件必须是命名函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="按钮1" id="btn"/> <input type="button" value="按钮2" id="btn2"/> <script> function f1() { alert("111"); } document.getElementById("btn").addEventListener("click",f1,false); //点击第二个按钮把第一个按钮的第一个点击事件解绑 document.getElementById("btn2").onclick=function () { //解绑事件的时候,需要在绑定事件的时候,使用命名函数 document.getElementById("btn").removeEventListener("click",f1,false); }; </script> </body> </html> 兼容函数 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; } }

ps:用什么方式绑定事件,就应该用对应的方式解绑事件

最新回复(0)