当前位置:首页 > Web开发 > 正文

init); document.body.attachEvent("onload"

2024-03-31 Web开发

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var btn = document.querySelector("#btn"); //时间句柄 var clickme = function(){ alert("hello~"); } btn.addEventListener("click", clickme); }); </script> </head> <body> <button id="btn">点击我</button> </body> </html>

技术图片

 事件监听的三种要领:

1、直接在html上添加事件(不建议)

强耦合,倒霉用代码复用

2、DOM 0级

一个元素只能绑定一个事件的限制

如果绑定了多个事件,,后面的会笼罩失前面的

2、DOM 2级

一个事件可以绑定多个监听函数

还可以界说事件捕获和事件冒泡

btn.addEventListener("click", fn, false);  第三个参数默认是false

btn.attachEvent("onclick", fn);  IE的事件监听函数attachEvent

document.body.addEventListener("load", init);

document.body.attachEvent("onload", init);

function init(){}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ // DOM 0级 var btn3 = document.querySelector("#btn3"); btn3.onclick=function(){ alert("hello3~"); } var btn4 = document.querySelector("#btn4"); function click4(){ alert("hello4~"); } btn4.onclick=click4; // DOM 2级 var btn5 = document.querySelector("#btn5"); //事件句柄 var click5 = function(){ alert("hello5~"); } //这里的clickme不需要加括号 btn5.addEventListener("click", click5); }); </script> </head> <body> <!-- 直接加在HTML上的两种方法 --> <button id="btn1" onclick="alert(‘hello1~‘)">按钮1</button> <!-- 这里的click1()需要加括号 --> <button id="btn2" onclick="click2()">按钮2</button><br> <!-- DOM 0级 --> <button id="btn3">按钮3</button> <button id="btn4">按钮4</button><br> <!-- DOM 2级 --> <button id="btn5">按钮5</button> <script> // 俄然发明这个函数只能在btn的后面,而不能在前面 // 即使用了domReady也不行哎 function click2(){ alert("hello2~"); } </script> </body> </html>

JS事件绑定的三种方法对照

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30360.html