JS事件监听器

1.传统事件绑定
    1.重复添加事件会覆盖
    2.不能精确的删除事件上的某一个函数
2.事件监听器(给某个按钮需要绑定多个函数,精确删除) 低版本IE浏览器不兼容
    addEventListener()
        格式:node.addElementListener("click")
        参数:
            第一个参数  事件类型
            第二个参数  绑定函数
            第三个参数  布尔值  true   事件捕获
                               false  事件冒泡  默认   
    
    removeEventListener()
        格式:node.removeEventListener()
        参数
            第一个参数:事件类型
            第二个参数  删除函数名字
3.低版本函数
    attachEvent()和detachEvent()

例子1:
1.传统的事件绑定

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        window.onload = function(){
            var oBtn1 = document.getElementById("btn1");
            oBtn1.onclick = function(){
                alert("点击");
            }
            oBtn1.onclick = function(){
                alert("点击2");
           }
        }
    script>
head>
<body>
    <button id="btn1">点击button>
body>
html>

运行结果: 可以看到重复添加事件,后面是事件会覆盖前面的事件
JS事件监听器_第1张图片
2.用事件监听器绑定事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        window.onload = function(){
            var oBtn1 = document.getElementById("btn1");
            oBtn1.addEventListener("click",function(){
                alert("点击1");
            },false);
            oBtn1.addEventListener("click",function(){
                alert("点击2");
            },false);
        }
    script>
head>
<body>
    <button id="btn1">点击button>
body>
html>

运行结果: 可以看到添加事件监听器后事件被依次执行

JS事件监听器_第2张图片
例子二:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        window.onload = function(){
            var aBtns = document.getElementsByTagName("button");
            // 传统写法
            /* aBtns[1].onclick = function(){
                alert("原有的点击函数");
            }

            //下标为0
            aBtns[0].onclick = function(){
                aBtns[1].onclick = show;
            }

            //取消下标为1按钮上的函数
            aBtns[2].onclick = function(){
                aBtns[1].onclick = null;
            } */

			//事件监听写法
            aBtns[1].addEventListener("click",function(){
                alert("原有的点击函数");
            },false);

            aBtns[0].onclick = function(){
                aBtns[1].addEventListener("click",show,false);
            }

            aBtns[2].onclick = function(){
                aBtns[1].removeEventListener("click",show);
            }
            function show(){
                alert("hello world");
            }
        }
    script>
head>
<body>
    <button>添加函数button>
    <button>按钮button>
    <button>删除函数button>
body>
html>

运行结果对比:
1.传统写法
JS事件监听器_第3张图片
2.事件监听写法
JS事件监听器_第4张图片

拓展:

 //事件监听器的兼容
 function addEvent(node,evenType,funcName){
     if(node.addEventListener){
         node.addEventListener(evenType,funcName,false);
     }else{
         node.attachEvent("on" + evenType,funcName);
     }
 }

 function removeEvent(node,eventType,funcName){
     if(node.removeEventListener){
         node.removeEventListener(eventType,funcName);
     }else{
         node.detachEvent("on" + eventType , funcName);
     }
 }

你可能感兴趣的:(javascript复习之路,#,javascript基础,javascript,html,html5)