Skip to content

Commit 50bbc6a

Browse files
committed
事件 校对完毕
1 parent ceae4a1 commit 50bbc6a

1 file changed

Lines changed: 5 additions & 7 deletions

File tree

chapter8.markdown

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff 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

0 commit comments

Comments
 (0)