File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -250,8 +250,6 @@ DOM操作性能不好,这是影响JavaScript性能的最主要原因。性能
250250
251251> 译注: 上面的URL中的例子在IE下单击会没有反应,问题在于使用` document.attachEvernt() ` 时传递的第一个参数应该是` 'onclick' ` ,而不是` 'click' ` 。
252252
253- ------校对分隔线-----
254-
255253![ 图8-1 事件委托示例:三个在点击时增加计数器值的按钮] ( ./Figure/chapter8/8-1.jpg )
256254
257255图8-1 事件委托示例:三个在点击时增加计数器值的按钮
@@ -264,12 +262,12 @@ DOM操作性能不好,这是影响JavaScript性能的最主要原因。性能
264262 <button>Click me three: 0</button>
265263 </div>
266264
267- 你可以给包裹按钮的div绑定一个事件处理函数 ,而不是给每个按钮绑定一个。然后你可以使用和前面的示例中一样的myHandler() 函数,但需要修改一个小地方:你需要将你不感兴趣的点击排除掉。在这个例子中,你只关注按钮上的点击,而在同一个div中产生的其它的点击应该被忽略掉 。
265+ 你可以给包裹按钮的 ` div ` 绑定一个事件处理函数 ,而不是给每个按钮绑定一个。然后你可以使用和前面的示例中一样的 ` myHandler() ` 函数,但需要修改一个小地方:你需要将你不感兴趣的点击排除掉。在这个例子中,你只关注按钮上的点击,而在同一个 ` div ` 中产生的其它的点击应该被忽略掉 。
268266
269- myHandler()的改变就是检查事件来源的nodeName是不是“ button” :
267+ ` myHandler() ` 的改变就是检查事件来源的 ` nodeName ` 是不是 ` " button" ` :
270268
271- // ...
272- // get event and source element
269+ // ……
270+ // 获取事件对象和事件来源
273271 e = e || window.event;
274272 src = e.target || e.srcElement;
275273
@@ -280,7 +278,7 @@ myHandler()的改变就是检查事件来源的nodeName是不是“button”:
280278
281279事件委托的坏处是筛选容器中感兴趣的事件使得代码看起来更多了,但好处是性能的提升和更干净的代码,这个好处明显大于坏处,因此这是一种强烈推荐的模式。
282280
283- 主流的JavaScript库通过提供方便的API的方式使得使用事件委托变得很容易。比如YUI3中有Y .delegate()方法,它允许你指定一个用来匹配包裹容器的CSS选择器和一个用于匹配你感兴趣的节点的CSS选择器 。这很方便,因为如果事件发生在你不关心的元素上时,你的事件处理回调函数不会被调用。在这种情况下,绑定一个事件处理函数很简单:
281+ 主流的JavaScript库通过提供方便的API的方式使得使用事件委托变得很容易。比如YUI3中有 ` Y .delegate()` 方法,它允许你指定两个CSS选择器,一个用来匹配包裹容器,一个用来匹配你感兴趣的节点 。这很方便,因为如果事件发生在你不关心的元素上时,你的事件处理回调函数不会被调用。在这种情况下,绑定一个事件处理函数很简单:
284282
285283 Y.delegate('click', myHandler, "#click-wrap", "button");
286284
You can’t perform that action at this time.
0 commit comments