js关于给动态生成的元素绑定事件

最新推荐文章于 2022-09-16 11:43:58 发布

Anwel

最新推荐文章于 2022-09-16 11:43:58 发布

阅读量5.1k

点赞数 1

分类专栏： js基础学习文章标签： js 事件

本文链接：https://blog.csdn.net/Anwel/article/details/78009089

版权

js基础学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

给动态生成的元素绑定事件第一种方式可以直接在html标签中添加 onclick 事件，但所添加的事件必须是全局的，不能放到$(function(){})中，但这种方法违反结构与行为分离的原则。

原生js中可以使用 addEventListener() 方法为新生成的元素绑定事件，语法为 element.addEventListener(event,function,useCapture)

<body>
<div id="box"></div>
<script>
    document.getElementById("box").innerHTML = 
        "<table>" +
        "<tr id=\"table-tr\">" +
        "<th>111</th>" +
        "<td>111</td>" +
        "<td>" +
        "<button id=\"table-delete\">delete</button>" +
        "</td>" +
        "</tr>" +
        "</table>";

    var table_delete = document.getElementById("table-delete");
    var table_tr = document.getElementById("table-tr");
    table_delete.addEventListener("click", function () {
        this.parentNode.parentNode.parentNode.removeChild(table_tr);
    })
</script>
</body>

在点击每一行最后的删除按钮时可以删除这一行，第一个参数指定事件名，不能为 onclick，第二个参数为指定函数，第三个参数决定事件在捕获还是冒泡阶段执行，默认为冒泡阶段。

在 jquery 中则可以使用 on 方法 .on(events [,selector] [,data], handler)

$(document).on("click", '#table-delete', function () {
        $(this).parent("td").parent("tr").remove();
    });

与bind() 方法相比 on() 方法增加了一个selector 的选项，可以选择前面父元素下的一个子元素绑定事件，利用事件冒泡机制，子元素可以把事件委托给父元素处理，而 bind() 就只能绑定原来存在于dom中的元素了。

Anwel

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
js关于给动态生成的元素绑定事件

给动态生成的元素绑定事件第一种方式可以直接在html标签中添加 onclick 事件，但所添加的事件必须是全局的，不能放到$(function(){})中，但这种方法违反结构与行为分离的原则。原生js中可以使用 addEventListener() 方法为新生成的元素绑定事件，语法为 element.addEventListener(event,function, useCa
复制链接

扫一扫