javascript 添加包含事件的元素的方法

prtyaa 2023-12-26 18:49:01  63111

分类专栏：资讯

<!DOCTYPE html>
<html>
    <head>
        <title>javascript 鼠标事件偏移量的研究</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
        </style>
        <script>
            window.onload = function () {
                var div_obj = document.getElementsByTagName("div")[0];
                console.log(div_obj);
                var btns = div_obj.getElementsByTagName("button");
                function excuteFun() {
                    for (i = 0; i < btns.length; i++) {
                        btns[i].onclick = function () {
                            alert(this.innerText);
                        }
                    }
                }
                excuteFun();
                var add_btn = document.getElementById("add");
                add_btn.onclick = function () {
                    div_obj.innerHTML = div_obj.innerHTML + "<button>按钮三</button>";
                    //重复执行方法 效率肯定低
                    excuteFun();
                }

                var add_btn2 = document.getElementById("add2");
                add_btn2.onclick = function () {
                    var buttonnode = document.createElement("button");
                    var  textnode= document.createTextNode("按钮四");
                    buttonnode.appendChild(textnode);
                    //只对新加的按钮添加新的事件 性能肯定更优
                    buttonnode.onclick=function(){
                        alert(this.innerText);
                    }
                    div_obj.appendChild(buttonnode);
                }
                 //事件的委托 target的使用 可以更好的解决，后面提供示例
            };
        </script>
    </head>
    <body style="height:3000px; width:3000px;">
        <div>
            <button> 按钮一 </button>
            <button> 按钮二 </button>
        </div>
        <button id="add">添加按钮一</button>
        <button id="add2">添加按钮二</button>
    </body>
</html>

事件委托的处理（event target 绑定父元素使用target 委托各指定的对象，推荐的解决办法）：

<!DOCTYPE html>
<html>
    <head>
        <title>javascript 事件委托 event.target 的使用</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
        </style>
        <script>
            window.onload = function () {
                var divdom = document.getElementsByTagName("div")[0];
                divdom.onclick = function (event) {
                    var event = event || window.event;
                    if(event.target.className=='button'){
                        alert(event.target.innerHTML);
                    }
                    return false;

                }
                
                var addbutton=document.getElementById("add");
                addbutton.onclick=function(){
                    var btn=document.createElement("button");
                    btn.setAttribute("class","button");
                    btn.innerHTML="添加的按钮";
                    divdom.appendChild(btn);
                    
                }
                

            };
        </script>
    </head>
    <body style="height:3000px; width:3000px;">
        <div>
            <button class="button"> 按钮一 </button>
            <button class="button"> 按钮二 </button>
        </div>
        <button id="add">添加按钮</button>

    </body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31047

赞同 0

评论 0 条

javascript 添加包含事件的元素的方法

相关文章

关注我们