JS的事件动态绑定机制

动态添加标签+动态添加事件

  window.onload=function(){

    (已存在元素节点)事件绑定;

    (未来元素节点)事件绑定;

  }

  它会扫描元素节点,如果元素节点存在(静态写好的),就可以绑定了;如果元素节点不存在,是后来动态添加的就不会执行。

  所以,我们不能将后来添加的元素的事件绑定像已存在元素节点的绑定一样,他的元素节点的添加要和事件绑定的代码放在一起。

代码实现:微博发布功能,微博最新发布的在上边,可以删除。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*动态添加样式,可以先静态设置,然后删除标签元素节点进行动态添加,样式保留,
        这样的话添加元素节点之后,如果样式是class,则要给元素节点添加样式,
        如果样式是标签  那就不用对添加的标签进行修改了*/

            * {
                margin: 0;
                padding: 0;
            }

            #box {
                width: 600px;
                border: 1px solid gray;
                /*border  可以不给高度,让高度通过儿子元素撑起来*/
                margin: 0 auto;
                padding: 30px 0;
            }

            textarea {
                width: 450px;
                height: 200px;
                resize: none;
                outline: none;
            }

            #box ul {
                list-style: none;
            }

            #box ul li {
                width: 450px;
                line-height: 30px;
                border-bottom: 1px dashed #ccc;
                margin-left: 80px;
            }

            #box ul li a {
                float: right;
                font: 400 12px/30px "微软雅黑";
                color: gray;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                function getClass(classname) {
                    if(document.getElementsByClassName) {
                        return document.getElementsByClassName(classname);
                    }

                    var classNameArr = [];
                    var dom = document.getElementsByTagName("*");
                    for(var i = 0; i < dom.length; i++) {
                        var classArr = dom[i].className.split(" ");
                        console.log(typeof classArr);
                        console.log(classArr.length);
                        for(var j = 0; j < classArr.length; j++) {
                            if(classArr[j] == classname) {
                                classNameArr.push(dom[i]);
                                break;
                            }
                        }
                    }
                    return classNameArr;
                }

                function $(id) {
                    return document.getElementById(id);
                }

                var newul = document.createElement("ul");
                $("box").appendChild(newul); //点击之前把ul创建好  不然会点击一次创建一次ul

                $("btn").onclick = function() {
                        var txts = document.getElementsByName("txt");
                        if(txts[0].value == "") {
                            alert("你还没有输入内容!");
                            return;
                        } else {
                            var ul = $("box").getElementsByTagName("ul")[0];
                            var ul_childs = ul.children;
                            var li = document.createElement("li");
                            //                        var a=document.createElement("a");
                            //                        a.innerText="删除";
                            //                        a.href="javascript:;";
                            //                        li.appendChild(a);
                            //                        li.innerHTML=txts[0].value;
                            //                        还可以这么添加a标签
                            li.innerHTML = txts[0].value + "<a href=‘javascript:;‘>删除</a>";
                            txts[0].value = "";
                            if(ul_childs == null) { //ul_childs.length==0
                                ul.appendChild(li);
                            } else {
                                ul.insertBefore(li, ul_childs[0]);
                            }
                        }
                        var as = $("box").getElementsByTagName("a");
                        for(var i = 0; i < as.length; i++) {
                            as[i].onclick = function() { //因为a是动态添加的 所以会绑定失效
                                //直接移除a标签的父亲即可
                                //                        this.parentNode
                                var ul = $("box").getElementsByTagName("ul")[0];
                                ul.removeChild(this.parentNode);
                            }
                        }
                    }
                    //不执行原因是    因为a是动态添加的,而window.onload是一开始就要搜扫描的,
                    //                扫描到的话就可以绑定,例如按钮的绑定事件
                    //                扫描不到的话,就不能绑定,比如a标签的onclick
                var as = $("box").getElementsByTagName("a");
                for(var i = 0; i < as.length; i++) {
                    as[i].onclick = function() { //因为a是动态添加的 所以会绑定失效
                        //直接移除a标签的父亲即可
                        //                        this.parentNode
                        var ul = $("box").getElementsByTagName("ul")[0];
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        </script>
    </head>

    <body>
        <div id="box">
            微博发布:
            <textarea name="txt" rows="" cols=""></textarea>
            <button id="btn">发布</button>
        </div>
    </body>

</html>
时间: 2024-10-12 13:44:26

JS的事件动态绑定机制的相关文章

浅谈js的事件冒泡机制

很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里. 这里就有一个小细节,dom点击后,它所有的父级都会触发事件,每一级绑定的事件都会触发,这样是耗费事件和性能进行处理的,但是,如果我们把事件都绑定到document根节点,这样只需要在最后一级的时候,区别是那个dom触发的就行了,这个也叫事件委托. 其实这个场景适用于,子节点和众多父

JS JavaScript事件循环机制

区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进程分配了资源(cpu.内存)(打开Chrome会有一个主进程,每打开一个Tab页就有一个独立的进程) 浏览器的渲染进程是多线程的 1.GUI渲染线程 2.JS引擎线程 3.事件触发线程 4.定时触发器线程 5.异步HTTP请求线程 事件循环机制 上图解释: 同步和异步任务分别进入不同的执行"场所&q

JS 关于事件处理程序机制

关于这个问题,自己也做了一下测试,算了,直接粘贴代码吧,若有问题,欢迎指出! <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>JS DOM2事件处理程序</title></head><body> <input id="btn" type="butto

js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)

javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环中的同步任务,异步任务: 同步和异步任务在不同的执行"场所",同步的进入主线程,异步的进入Event Table执行并注册函数. 当指定的异步事情完成时,Event Table会将这个函数移入Event Queue. 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,推

JS 的事件委托机制

以前写上图所示的鼠标点击触发事件,一般都是用如下所示的给每一个表示列表的标签绑定一个click事件(演示用的例子的框架是React): 毫无疑问,这样是比较繁琐的,以后维护修改改个函数名什么的还不方便(当然sublime还是有ctrl+d的么= =),水平提高一点的写法如下: 但是,实际上还是为每一个要触发点击的标签绑定了一个click事件,这就导致了"事件处理程序过多". 在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能.导致这一问题的原因是多方

js的事件委托机制

如今的JavaScript技术界里最火热的一项技术应该是'事件委托(event delegation)'了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

js事件循环机制辨析

?对于新接触js语言的人来说,最令人困惑的大概就是事件循环机制了.最开始这也困惑了我好久,花了我几个月时间通过书本,打代码,查阅资料不停地渐进地理解他.接下来我想要和大家分享一下,虽然可能有些许错误的地方,希望大家不吝赐教,感谢感谢. ?这是所涉及的知识点: 观察者模式 js的事件循环机制 js事件循环机制优缺点及与多线程的比较 观察者模式 ?js的事件循环机制是基于观察者模式的,而跟观察者模式相对应的是轮询,我们先来说说轮询的原理. ?我们将轮询映射在现实世界中即为:B不停到A的房间观察房间里

【js事件详解】js事件封装函数,js跨浏览器事件处理机制

一.事件流 事件流描述的是从页面中接受事件的顺序.IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1.事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档).2.事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 相关知识链接:js的事件冒泡和事件捕获 二.事件处理程序 1.HTML事件处理程序2.DOM0级事件处理程序3.DOM2级事件处理程序 DOM2级事件定义了两个方法

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念--事件和事件流 事件指的是用户或浏览器自身执行的某种动作,又称为原始事件模型,例如onclick等 事件流指的是 从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程就叫做事件流. 事件冒泡: 从事件目标开始 一级级向上冒泡,到document为止--从里到外 IE 5:div--body--document; I