js动态创建的元素添加监听事件

最新推荐文章于 2025-09-03 18:46:42 发布

原创最新推荐文章于 2025-09-03 18:46:42 发布 · 9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Js模块化开发案例分析专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何使用JavaScript在HTML页面中动态创建并添加DOM元素，同时为这些元素添加事件监听器。通过示例代码展示了如何在页面加载完成后往指定ID的div内添加一个新的div标签，并设置其文本内容；接着演示了如何使用原生JavaScript为新增的div元素添加点击事件监听器。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://cn.chinadaily.com.cn/95560.files/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            /* Event listener */
            function addEvtListener(obj, evtName, f) {
                /* FF */
                if(document.addEventListener) {
                    if(obj) {
                        obj.addEventListener(evtName, f, false);
                    } else {
                        addEventListener(evtName, f, false);
                    }
                }
                /* IE */
                else if(attachEvent) {
                    if(obj) {
                        obj.attachEvent('on' + evtName, f);
                    } else {
                        attachEvent('on' + evtName, f);
                    }
                }
            }

             window.onload=function(){
                var newElement=document.createElement('div');
                newElement.setAttribute('value', 'Username');
                newElement.setAttribute('text', 'Username');
                newElement.innerText="我是一个label";
                var usernameText=document.getElementById('username');
                usernameText.appendChild(newElement);

             }
            //$("div[text='Username']").click(function(){
            //  alert('ss');
            //  
            //})

        addEvtListener($("div[text='Username']")[0],'click',function(){
                alert('www');
            });
        </script>
    </head>

    <body>
            <div id="username"></div>
    </body>

</html>

这里写图片描述