js: call 同步异步事件委托

2022-06-18 17:03:30 阅读：85 来源： 互联网

标签：异步 console log -- 元素 js call name

1、call 是一个方法，是函数的方法。即函数可以调用这个方法。 call 可以改变函数中 this 的指向，但不能使用指向的数据。

2、appy 和 call 相比，传参用数组； bind 和call 传参一样，但 call 不会调用函数，返回值是一个函数，需要再次调用。

        <script>
        let e=100;
        function fun1(food) {
           let name="dog";
           console.log('this:',this);
           console.log('this.e:',this.e);
           console.log('e:',e);
           console.log('this.name:',this.name);
           console.log('name:',name);
        }

        function fun2(){ 
          this.food1='素菜';      
        this.food2='水果';  
           
        }
       function eat(food1,food2){
            console.log(this)
            console.log(food1,food2);
            console.log('I like eat:',this.food1,this.food2)
        }

       fun1();//这里 this指向的是window ,window 里面是没有name 属性的;
        fun1.call(fun2); //使用call方法之后，this指向 call的对象 fun2, this.name= fun2 函数名
        //call 改变了this 的指向，但是不能调用 fun2 里面的数据
        eat("鱼","虾");
        eat.call(fun2,'s鱼','虾')   
        
    </script>

3、事件委托

在 DOM 中，事件流有三个阶段。给一个元素绑定事件之后，触发这个事件的过程有三个阶段：捕获--> 触发--> 冒泡。

捕获是 html --> body -->祖父元素 --> 父元素 -->子元素 ; 冒泡则是反过来。事件委托呢，就是把对子元素的事件绑定到父元素或者祖父元素上面。虽然用户没有点击父元素，但是通过冒泡机制，一样可以触发父元素中的事件，通过target 获取到点击的子元素，达到操作子元素的目的。

   <!-- 事件委托结合冒泡机制 实现 简易留言发布与删除    ul是父元素，li是子元素-->

        <div>
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <button class="button1">发布</button>
            <ul class="del">
                <!-- 留言内容写入ul里面 -->
                <li>历史留言1 删除</li>
                <li>历史留言2 删除</li>
                <li>历史留言22 删除</li>
                <li>历史留言23 删除</li>
            </ul>
        </div>
        <script>
        // 获取元素
        var txtarea = document.querySelector('textarea');
        var btn1 = document.querySelector('.button1');
        var ul = document.querySelector('ul');
        var li= document.querySelector('li')
        //创建事件:点击发布留言
        btn1.onclick = function() {
            if (txtarea.value == '') {
                alert('您输入的内容为空');
                // return false;
            } else {
                let lis = document.createElement('li');
                lis.innerHTML = txtarea.value+`     删除` ;
                ul.insertBefore(lis, ul.children[0]);             
        }               
    }
            // 删除留言  e.target是点击的子元素
            ul.onclick=function (e){
                  ul.removeChild(e.target) 
                }
    </script>

4、同步是按顺序执行；直接调用函数是同步的 fn()；js是单线程的，同步执行完成之后再执行异步：

异步任务它分为两段（或者多段）执行：

异步先执行一部分，等待结果或者时间到了，再继续往下执行。如：计时器 setTimeout(只执行一次)，setInterval(一直循环)，回调函数 fn(fn1) ，async/await （ES6），promise（try/catch）（ES6）,

5、判断数据类型

   //JS判断数据类型 typeof （string,number,object,boolean.undefined)
        //数组和对象 typeof 出来是 object
        const a = 1;
        const b = [1, 2, 3]
        console.log(typeof (a))

        // instanceof 判断数据类型，常用在 判断条件
        if (b instanceof Array
        ) {
            console.log('这是一个数组')
        }
        //2、constructor 
        console.log(a.constructor=='string')//结果为false

标签：异步,console,log,--,元素,js,call,name
来源： https://www.cnblogs.com/lianna/p/16382556.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js: call 同步异步 事件委托

js: call 同步异步事件委托