注册事件

Posted 2020-11-09 nie5135257

在DOM事件模型中，调用对象的addEventListener（）方法注册事件，用法如下

element.addEventListener(String type, Function Listener,boolean usepture)

其中type：注册事件的类型名，与事件属性不同，事件类型没有on前缀。

       listener：监听函数，即事件处理函数。在调用这个函数时，默认给它的唯一参数是event对象。

       useCapture：为一个布尔值，如果为true，将在事件传播的捕获阶段触发；如果为false，则事件处理函数将在冒泡阶段触发！

如下示例：使用addEventListener（）方法为所按钮注册click事件。

        <button id="btn1" onclick="btn1();">按钮1</button>
        <button id="btn2" onclick="btn1();">按钮2</button>
        <script type="text/javascript">
            var btn=document.getElementsByTagName("button");
            for(var i in btn){
                btn[i].addEventListener("click",function(){
                    alert(this.innerhtml);
                },true);
            }
        </script>

          在浏览器中浏览，单击不同的按钮则会弹出相应的按钮名称；

 使用addEventListener（）方法能够为对个对象注册相同的事件处理函数，也可以为同一对象注册多个事件处理函数。

         在IE8之前事件模型使用attachEvent（）方法注册事件，用法如下：

element.attachEvent(etype,eventName)

       etype:设置事件类型。

       eventName：设置事件类型名称，即事件处理函数。

如下示例：

        <p id="p1">IE事件注册</p>
        <script type="text/javascript">
            var p1=document.getElementById("p1");
            p1.attachEvent("onmouseover",function(){
                p1.style.background="blue";
            })
            p1.attachEvent("onmouseout",function(){
                p1.style.background="red";
            })
        </script>

注意：  在IE8之前事件模型使用attachEvent（）方法注册事件第一个参数为事件名称，但需要加上on前缀，而使用addEventListener（）方法则不需要前缀。