Anaconda Docker Zookeeper django 另类堆栈 哨兵模式 docker容器 graph variant playframework menu signalr 八大员 bootstrap后台管理系统模板 后台模板下载 nginx视频 大数据项目开发案例 kafka默认端口 linux 获取系统时间 python正则匹配中文 dwf文件怎么转成dwg linux重启mysql python教学 pythonassert函数 python手册 python编程题 stringjava java文件 java基础学习 java接口类型 java怎么输出数组 java判断是否为空 qq飞车剧情辅助 手机模拟器下载 碧桂园园宝 cad自动保存位置 ajaxpro vs2012中文旗舰版下载 回收站在哪个盘 无线中继是什么意思
当前位置: 首页 > 学习教程  > 

原生JS实现事件委托

2020/10/16 18:03:52 文章标签: js原生点击事件

什么是事件委托? 它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 举个栗子: 有三个同事预计会在周一收到快递。…

什么是事件委托?

它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

举个栗子:
有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的:

第一,现在委托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的;

第二,新员工也是可以被前台MM代为签收的,即程序中新添加的dom节点也是有事件的。

HTML代码:

<ul id="ul">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button id="btn">点我添加一个li</button>

JS代码:

// 事件委托具体实现
var ul = document.getElementById("ul");
    ul.onclick = function (event) {
        event = event || window.event;
        var target = event.target;
        // 获取目标元素
        if (target.nodeName == 'LI') {
            alert(target.innerHTML);
        }
    }
    // 为按钮绑定点击事件
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        var li = document.createElement('li');
        // 新增li的内容为ul当前子元素的个数
        li.textContent = ul.children.length;
        ul.appendChild(li);
    }

本文链接: http://www.dtmao.cc/news_show_300361.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?