美文网首页
原始类型与事情委托

原始类型与事情委托

作者: LzW伟 | 来源:发表于2018-07-18 22:20 被阅读0次

1.绑定事件:

                  想要给一个元素绑定事件,我们有两种方法:使用内联事件或事件监听器。在之前的课程中,我们一直使用的是内联事件来为元素绑定事件
                    案例见  事件流.html

                   内联事件: .onclick
                   事件监听: .addEventListener('事件',function(){})


                两种方法都能实现相同的效果,能成功的为按钮绑定了点击事件,但区别是使用addEventLitener可以无限制第为元素绑定事件,而内联事件后面的会覆盖前面的  案例见 事件流2.html

二、事件冒泡与事件捕获

              用事件监听器为三个div元素绑定点击事件,最外层的div宽高是300px,中间的div宽高都是200px,最内层的div宽高都是100px,那么思考一下,点击最内层的div,事件会如何触发,是只触发最内层的div,还是从内到外依次触发,还是从外到内依次触发
                     案例见 时间冒泡.html

             通过上面的例子我们可以看到,事件是从最内层开始触发,然后依次向外,输出的顺序是div3-div2-div1。导致这种顺序的原因是因为:事件流有事件捕获阶段和事件冒泡阶段,事件捕获阶段是从最外层元素开始一层一层进入到事件目标(也就是我们点击的那个元素),到达事件目标后,进入事件冒泡阶段,事件从最内层流向最外层,事件默认情况下在冒泡阶段触发,所以我们看到的是先输出div3,最后输出div1。
               

            我们也可以将事件设置为捕获阶段触发,
                案例见 事件捕获.html

            只要在添加事件方法中添加第三个参数为true,事件就会在捕获阶段被触发,这样输出的顺序就变成了box1-box2-box3。但是在日常开发中,我们几乎不用做此修改,让事件在冒泡阶段触发就可以了。    

事件委托 案例见事件委托

            事件委托:可以简单第理解为将子集的事件委托给父级来处理

           案例:网页中有两个按钮,他们的父级是一个div标签,现在我们希望给这两个按钮绑定事件,当我们点击按钮的时候输出按钮的文本内容,按照我们之前学过的知识

计时器

            一次性定时器
               setTimeOut(function(){
                              //1秒后执行
               },1000)
            
              停止一次性定时器:clearTimeout();

            永久性定时器

              setInterval(function(){
                 //1秒后执行,并且每隔一秒执行一次
              },1000)
              停止永久性定时器的方法:clearInterval();

相关文章

  • 原始类型与事情委托

    1.绑定事件: 二、事件冒泡与事件捕获 事件委托 案例见事件委托 计时器

  • 2017.10.30

    委托的定义语法[访问修饰符] delegate 返回类型 委托名(参数列表);指定与委托匹配的方法的返回值类型 声...

  • JavaScript--数据类型

    JavaScript的数据类型分为原始类型与引用类型5种原始类型:number:数字(整数、小数、NaN(Not ...

  • 17_DoTween

    委托,Lambda, LinQ串讲 什么是委托 委托类型是怎么声明出来的 泛型委托 我们必须自己创建委托类型吗? ...

  • 原始类型与实例对象的自动转换

    出处 包装对象 - JavaScript 教程 - 网道 ---- 原始类型与实例对象的自动转换 正文 原始类型的...

  • Delegates, events, lambda expres

    Delegates 委托 委托是一个对象,它知道如何调用一个方法 委托类型和委托实例 委托类型定义了委托实例可以调...

  • 原始类型与对象类型区别

    在 JS 中,除了原始类型那么其他的都是对象类型了。对象类型和原始类型不同的是,原始类型存储的是值,对象类型存储的...

  • 委托+观察者模式

    /* * 委托:C++中的函数指针. * 定义一个委托类型:访问权限 delegate 返回值类型 委托类型名(形...

  • JS基本类型、引用类型梳理

    原始值类型与引用值类型 ECMAScript规范中定义了变量的两种类型:原始值类型和引用值类型。区别两种类型的直接...

  • js数据类型隐式转换

    原理分析: 因为a是个对象,对象与原始类型进行比较的时候会将对象转换成原始类型,对象转换成原始类型就是依据valu...

网友评论

      本文标题:原始类型与事情委托

      本文链接:https://www.haomeiwen.com/subject/sinapftx.html