事件读书笔记系列

Posted 喃博思睿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件读书笔记系列相关的知识,希望对你有一定的参考价值。

  javascripthtml之间的交互就是通过事件来实现的,那么事件是什么呢?事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

  一、事件流

  1.事件冒泡 :由内向外;

  2.事件捕获:由外向内;

  3.DOM事件流

  “DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

  这里插一点题外话,我以前一直很好奇为什么要事件冒泡,存在即合理,那么它到底是要处理什么问题呢?

  举个栗子~~(事件委托)

    现在我们有一个10列、100行的HTML表格,你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题,并且有可能导致内存泄露甚至是浏览器的崩溃。相反地,使用事件代理的话,你只需要把一个事件处理器添加到table元素上就可以了,这个函数可以把点击事件给截下来,并且判断出是哪个单元格被点击了。代码很简单,我们所要关心的只是如何检测目标元素而已。比方说我们有一个 table元素,ID是“report”,我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table 来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能,所以我们把它单独放到一个名为getEventTarget的函数中:

1 function getEventTarget(e) {
2    e = e || window.event;
3    return e.target || e.srcElement;
4 }

接下来就是editCell函数了,这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后,剩下的事情就是看看它是否是我们所需要的那个元素了。

1 function editCell(e) {
2    var target = getEventTarget(e);
3    if(target.tagName.toLowerCase() === ‘td‘) {
4      // DO SOMETHING WITH THE CELL
5    }
6 }

那么优点显而易见,我们的事件处理器减少了,性能得到了提升;在DOM元素更新后或动态生成后不需要再重新绑定事件。

  那么缺点是什么呢?

  不是所有的事件都是可以冒泡的:如blur、focus、load和unload;

  有的需求需要我们阻止冒泡,如我们点击弹出层以外的空白处,需要隐蔽弹出层等;

  那么怎么阻止呢?继续往下走~~ 

window.event.cancelBubble = true (IE)  
event.stopPropagation() event.preventDefault() (Firefox)

  但是用过js未必常用这个,而是jquery框架,那么jquery的方法是什么叻,往下瞅:

    event.stopPropagation();

  其实这个方法有时候会有bug~发现阻止不了,那是为啥子呢,以前我也不知道,今天晚上突然我查到了,哈哈,看来看看书还是有用的~

  那是因为动态绑定的这个方法就不行了,要怎么做呢,简单粗暴:return false;

 

以上是关于事件读书笔记系列的主要内容,如果未能解决你的问题,请参考以下文章

jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

《Java并发编程实战》第九章 图形用户界面应用程序界面 读书笔记

《Java并发编程实战》第九章 图形用户界面应用程序界面 读书笔记

《Mastering Opencv ...读书笔记系列》车牌识别(I)

C#温故知新:《C#图解教程》读书笔记系列

《C++ Concurrency in Action》读书笔记三 同步并发操作