JS事件绑定的三种方式比较

js事件

<!DOCTYPE html>
<html lang="en"head>
    Meta charset="UTF-8"title>Document</style>
        body{
            width:100%;
            height;
        }
        input
            display block
            margin-bottom10px
        .active
            colororange}
    script src="DomReady.js"></script
        myReady(function(){

            var btn = document.querySelector("#btn);
            //时间句柄
             clickme = (){
                alert(hello~);
            }
            btn.addEventListener(click,clickme);
        });

    body>

    button id="btn">点击我buttonhtml>

事件监听的三种方法：

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(){}

 DOM 0级
             btn3 #btn3);
            btn3.onclickhello3~);
            }

             btn4 #btn4 click4(){
                alert(hello4~);
            }
            btn4.onclickclick4;


             DOM 2级
             btn5 #btn5事件句柄
             click5 hello5~);
            }
            这里的clickme不需要加括号
            btn5.addEventListener(<!-- 直接加在HTML上的两种方式 -->
    ="btn1" onclick="alert('hello1~')">按钮1 这里的click1()需要加括号 ="btn2"="click2()">按钮2><br DOM 0级 ="btn3">按钮3="btn4">按钮4 DOM 2级 ="btn5">按钮5>
         突然发现这个函数只能在btn的后面，而不能在前面
         即使用了domReady也不行哎
         click2(){
            alert(hello2~);
        }
    >

JS事件绑定的三种方式比较

猜你在找的JavaScript相关文章