如何给动态元素添加事件

2/10/2017来源:心得技巧人气:2875

要给动态添加的元素添加事件,可以给其父元素添加事件。这样若是在冒泡事件下,点击事件由子元素传递到父元素,就会触发父元素上绑定的事件函数,在函数里做一下过滤,便可实现想要的功能。(在捕获事件里也是同样的道理)

以下分三种事件举例。javaScript事件有HEML事件、DOM0级事件和DOM2级事件。

1.      HEML事件:

如示例所示,当点击“添加”按钮添加元素后,点击新添加的元素也会在控制台看到日志。

PRintLog的调用直接写在html的元素上,这种添加事件的方法就是HTML事件。这种方法的缺点是html和Javascript代码耦合性较大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript event demo</title>
    <!--HTML事件-->
    <link rel="stylesheet" type="text/CSS" href="demo.css">
</head>
<body onload="init()">
    <div id="parent" class="parent" onclick="printLog(event)">
        <span class="child"></span>
        <span class="child"></span>
    </div>
    <button id="add">添加</button>

    <script type="text/javascript">
        function init(){
            //当点击添加按钮时,添加一个child span
            var addObj = document.getElementById("add");
            addObj.onclick = function(){
                var parentObj = document.getElementById("parent");
                var childObj = document.createElement("span");
                childObj.setAttribute('class','child');
                parentObj.appendChild(childObj);
            }
        }
        //点击child span时,打印一行日志
        function printLog(event){
            console.log("当前节点类名:"+event.currentTarget.className+",产生事件的节点类名:"+event.target.className);
        }
    </script>

</body>
</html>

2.      DOM0级事件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript event demo</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body onload="init()">
    <div id="parent" class="parent">
        <span class="child"></span>
        <span class="child"></span>
    </div>
    <button id="add">添加</button>

    <script type="text/javascript">
        function init(){
            var addObj = document.getElementById("add");
            var parentObj = document.getElementById("parent");
            //DOM0级事件:当点击添加按钮时,添加一个child span
            addObj.onclick = function(){
                var childObj = document.createElement("span");
                childObj.setAttribute('class','child');
                parentObj.appendChild(childObj);
            }
            //DOM0级事件:点击child span时,打印一行日志
            parentObj.onclick = function(event){
                console.log("当前节点类名:"+event.currentTarget.className+",产生事件的节点类名:"+event.target.className);
            }
            //取消事件
            // parentObj.onclick = null;
        }
    </script>
</body>
</html>

3.      DOM2级事件:

addEventListener(eventfunctionuseCapture)

removeEventListener(eventfunctionuseCapture)

IE事件处理程序调用的是如下函数,没有最后一个参数的原因是早期的IE浏览器只支持冒泡事件。

attachEvent(eventfunction)

detachEvent(eventfunction)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript event demo</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body onload="init()">
    <div id="parent" class="parent">
        <span class="child"></span>
        <span class="child"></span>
    </div>
    <button id="add">添加</button>

    <script type="text/javascript">
        function init(){
            var addObj = document.getElementById("add");
            var parentObj = document.getElementById("parent");
            //DOM0级事件:当点击添加按钮时,添加一个child span
            addObj.onclick = function(){
                var childObj = document.createElement("span");
                childObj.setAttribute('class','child');
                parentObj.appendChild(childObj);
            }
            //DOM2级事件:false表示冒泡事件;true表示捕获事件
            parentObj.addEventListener('click',printLog,false);
            //删除事件
            // parentObj.removeEventListener('click',printLog,false);
        }
        //点击child span时,打印一行日志
        function printLog(event){
            console.log("当前节点类名:"+event.currentTarget.className+",产生事件的节点类名:"+event.target.className);
        }
    </script>
</body>
</html>

以上代码的效果图如下,后面两个元素是点击添加按钮后添加的。

附:html代码里所用的css文件如下:

    #parent{
        border:1px solid #876;
        width:300px;
        height:100px;
    }
    .child{
        border:1px solid #954;
        background-color:#954;
        width:30px;
        height:30px;
        display:inline-block;
        margin: 5px 2px;
    }
    .child:hover{
        border:1px solid #333;
    }
    #add{
        margin-top:10px;
    }