WebJS的事件-个人笔记

13人阅读 评论(0) 收藏 举报
分类:

本文从绑定事件的方式对比,事件的两种流,事件对象,事件类型有哪些,事件优化几方面聊一聊WebJs

绑定事件的方式

事件首先分为3种写法

第一种:

根据HTML4新增:在html中的事件属性可以调用JavaScript

<button  onclick="buttonClick()">MyButton</button>

<script>
    function buttonClick() {
        alert("button Click");
    }
</script>

第二种:

找到元素的dom对象,对其属性进行设置,原理和第一种相同

<button id="myButton">MyButton</button>

<script>
    var button=document.querySelector("#myButton");
    button.onclick=function (ev) {
        alert("button Click");
    }
</script>

第三种:

使用事件监听器的方式监听事件,这里会涉及到事件流

    <button id="myButton">MyButton</button>
    <script>
    document.querySelector("#myButton").addEventListener("click", function (event) {
         console.log("冒泡button")

     },false);
     </script>

重点来了:因为事件监听器和属性设置不同,所以第一种第二种会有覆盖关系,而第三种属于观察者模式,不同的方法(引用不同)会增加观察者,即事件可以是多个

事件的两种流

同心圆的问题IE和网景公司给出了不同的事件处理即:
事件流:有两种:冒泡流和捕获流

简单来说:捕获流从最外层到最内层 冒泡流从最内层到最外层

使用在addEventListener中第三个参数设置false为冒泡流,true为捕获流

实际使用中如果对目标对象同时设置了冒泡流和捕获流可能会产生先写先执行不按流的走向执行

如何阻止事件冒泡呢?

事件的对象

事件对象有很多属性,他的产生是由于事件的发生,可以通过调用对象的方法来阻止冒泡

e.stopImmediatePropagation();

事件委托的优缺点

优点:
减少事件注册,节省内存。比如,
在table上代理所有td的click事件。
在ul上代理所有li的click事件。
简化了dom节点更新时,相应事件的更新。比如
不用在新添加的li上绑定click事件。
当删除某个li时,不用移解绑上面的click事件。
缺点:
事件委托基于冒泡,对于不冒泡的事件不支持。
层级过多,冒泡过程中,可能会被某层阻止掉。
理论上委托会导致浏览器频繁调用处理函数,虽然很可能不需要处理。所以建议就近委托,比如在table上代理td,而不是在document上代理td。
把所有事件都用代理就可能会出现事件误判。比如,在document中代理了所有button的click事件,另外的人在引用改js时,可能不知道,造成单击button触发了两个click事件。



事件委托的优点,一是可以将批量元素监听的任务通过一个监听实现,优化页面性能,二是可以实现对动态生成子元素的监听,某些场景下非常有用
查看评论

图形化编程常用函数功能介绍

.1          音乐编程基础3.1.1    C语言中的发声函数有两个发声的函数:sound(unsigned frequency);功能:以指定的频率打开计算机内置扬声器。frequency...
  • fengzar1984
  • fengzar1984
  • 2007-04-10 21:40:00
  • 430

机器学习个人笔记完整版v4.7.pdf

  • 2017年11月02日 23:14
  • 11.27MB
  • 下载

个人学习笔记(一)

C#中引用和C/C++ 指针的区别C/C++程序员可能习惯性地将引用类型想象成指针,虽然C#的引用类型和指针由许多共同点,但指针提供的功能多得多。例如,在C/C++应用程序中,一个指针可以引用几乎任何...
  • Beyondsofter
  • Beyondsofter
  • 2007-08-13 09:18:00
  • 498

机器学习个人笔记v4.21(免费)

  • 2016年07月26日 11:02
  • 11.3MB
  • 下载

机器学习个人笔记完整版v5

  • 2018年02月08日 18:32
  • 8.02MB
  • 下载

MyNote_sk_sql_20110310

  • 2011年03月10日 16:08
  • 993B
  • 下载

机器学习个人笔记完整版--博士学霸的学习笔记

  • 2018年01月27日 10:58
  • 11.26MB
  • 下载

简单图形编程学习

在windows系统中,程序都是通过图形设备接口(GDI)的抽象接口和硬件打交道。 GDI是Windows系统核心的三种动态链接库之一,管理Windows系统的所有程序的图形输出。 设备描述表(D...
  • dota_allstare
  • dota_allstare
  • 2014-01-03 15:08:22
  • 789

机器学习个人笔记完整版中文

  • 2017年11月14日 13:11
  • 7.67MB
  • 下载

kali-linux笔记

  • 2018年01月10日 17:27
  • 19KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 16万+
    积分: 3692
    排名: 1万+
    博客专栏