zoukankan      html  css  js  c++  java
  • 事件委托的封装

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div class="box">
            <p>段落1</p>
            <p class="p1">段落2</p>
            <h3>三级标题1</h3>
            <h3 class="p1">三级标题2</h3>
            <p>段落3</p>
            <h3>三级标题3</h3>
            <p class="p1">段落4</p>
            <p>段落5</p>
            <h3 class="p1">三级标题4</h3>
        </div>
        <p>123123</p>
    </body>
    <script>
        var obox = document.querySelector(".box");
        var ap = obox.getElementsByTagName("p");
    
    
        // 一、封装:与this无关
        // 事件要的是什么:函数
        // 我们给的是什么:函数的执行结果
        // 函数的执行结果是什么:返回值,默认是undefined
        // 改变返回值成什么:函数
                        // 1.fn默认执行得到的是undefined
        obox.onclick = fn(ap,function(t){
            console.log(this)
        })
    
        function fn(child,callback){
            // 2.修改fn的返回值为函数,作为将来真正的事件处理函数
            return function(eve){
                // 3.找事件对象身上的事件源
                var e = eve || window.event;
                var target = e.target || e.srcElement;
                // 4.遍历传进来的要委托的子元素
                for(var i=0;i<child.length;i++){
                    // 5.逐个与事件源的元素做比较,相同了表示找到了真正要触发的元素
                    if(child[i] === target){
                        //       二、this的改变
                        // 6.执行用户传进来的回调函数,完成用户指定的功能
                        // 的同时,修改this指向,为真正的事件源
                        callback.bind(target)()
                    }
                }
            }
        }
    </script>
    </html>
  • 相关阅读:
    html5 canvas 渐变
    html5 canvas 画直线
    html5在canvas中插入图片
    Window文件夹右击菜单定制
    HTML中解决双击会选中文本的问题
    Linux 下修改mysql 字符集编码
    mysqlimport导入命令使用
    PAM 2500 荧光数据导出数据整合脚本
    Resources for Ecology and Evolution
    Plant Ecology Journal Club, 分享主题和文献列表 825, 2019年春
  • 原文地址:https://www.cnblogs.com/hy96/p/11431745.html
Copyright © 2011-2022 走看看