Skip to content

Commit c4a0108

Browse files
committed
docs(event): tweaks
1 parent 7486947 commit c4a0108

File tree

1 file changed

+19
-21
lines changed

1 file changed

+19
-21
lines changed

basic/event.md

+19-21
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ Regular 中事件分为两类
55
- DOM事件
66
- 组件事件
77

8-
在大部分情况下,它们的使用和表现都一致
8+
在大部分情况下,它们的使用方式和表现一致
99

1010
## DOM 事件 {#dom}
1111

12-
> 所有 __DOM节点上__ `on-`开头的属性都会被当做DOM事件处理
12+
> __DOM节点上__ 所有以 `on-` 开头的属性都会被当做DOM事件处理
1313
1414

1515

@@ -50,11 +50,11 @@ __Arguments__
5050
- elem: 被绑定节点
5151
- fire: 触发事件函数
5252

53-
注意如果需要做 __销毁工作__ ,与指令一样,你需要返回一个销毁函数
53+
注意如果需要做 __销毁工作__ ,与指令一样,你需要在 fn 中返回一个函数用来做销毁工作
5454

5555
__Example__
5656

57-
定义`on-enter`事件处理回车逻辑
57+
定义 `on-enter` 事件处理回车逻辑
5858

5959

6060
```js
@@ -69,30 +69,28 @@ Regular.event('enter', function(elem, fire){
6969
}
7070
dom.on(elem, "keypress", update);
7171
});
72-
73-
// use in template
74-
7572
```
7673

7774
```html
75+
<!-- use in template -->
7876
<textarea on-enter={this.submit($event)}></textarea>
7977
```
8078

81-
__Tip:__ 模板 `this` 指向组件本身,回车后实际会运行组件的submit方法
79+
__Tip:__ 模板中出现的 `this` 指向组件实例本身,回车后会运行实例的submit方法
8280

8381
<script async src="//jsfiddle.net/leeluolee/3ac62L4g/embed/js,result/"></script>
8482

8583
查看 [$event](#$event)了解更多
8684

87-
> 注意除非是自定义事件,其它事件无论浏览器支持,都会通过addEventListener进行绑定
85+
> 注意:除非是自定义事件,其它事件无论浏览器是否支持,都会通过addEventListener进行绑定
8886
8987

9088
### 事件代理支持
9189

9290

93-
`on-*`会直接在当前节点绑定事件,在某些情况下(比如大列表),这种方式不是很高效。
91+
`on-*`会在当前节点绑定事件,在某些情况下(比如大列表),这种方式不是很高效。
9492

95-
可以使用 `delegate-` 代替 `on-`来避免一些场景下的性能问题,它只会绑定一次事件到 父节点 上
93+
在这种情况下,我们可以尝试使用 `delegate-` 代替 `on-`来避免潜在的性能问题,`delegate-` 只会绑定一次事件到 父节点 上
9694

9795

9896
__Example__
@@ -103,12 +101,12 @@ __Example__
103101
```
104102

105103

106-
但是,需要注意的是,`delegate-`并非是「银弹」
104+
但是,需要注意的是,`delegate-` 并非是「银弹」
107105

108-
1. 避免使用在高频触发的事件( `mouseover` ),这样反而会产生性能问题
106+
1. 避免在高频触发的事件中使用( 比如 `mouseover` ),这样反而会产生性能问题
109107
2. 事件必须可冒泡
110-
- [自定义事件](#custom-event)请参考zepto's tap-event的[实现](https://github.com/madrobby/zepto/blob/master/src/event.jsL274).
111-
- 部分事件天生没法冒泡,比如IE低版下的`change``select`
108+
- [自定义事件](#custom-event)请参考 zepto tap-event 的[实现](https://github.com/madrobby/zepto/blob/master/src/event.jsL274).
109+
- 部分事件天生没法冒泡,比如 IE 低版下的 `change``select`
112110

113111
### $event 对象 {#event}
114112

@@ -151,19 +149,19 @@ __Example__
151149
### 模板里声明组件事件绑定
152150

153151

154-
与DOM事件绑定类似,声明式组件以`on-`开头的属性都会被视作事件绑定
152+
与DOM事件绑定类似,声明式组件以 `on-` 开头的属性都会被视作事件绑定
155153

156-
假设已经注册了一个名为`Pager`的翻页器组件
154+
假设已经注册了一个名为 `Pager` 的翻页器组件
157155

158156
```html
159157
<Pager on-nav={ this.refresh($event) } />
160158
```
161159

162160
<script async src="//jsfiddle.net/leeluolee/8pfa43ms/embed/js,result/"></script>
163161

164-
每当`Pager`组件通过 `$emit` 抛出`nav`事件,对应的 `this.refresh($event)` 就会被调用,即执行组件上的 refresh 方法
162+
每当 `Pager` 组件通过 `$emit` 抛出`nav`事件,对应的 `this.refresh($event)` 就会被调用,执行组件上的 refresh 方法
165163

166-
是的,和DOM事件并无二样。但其中的`$event`代表$emit传入的__第一个__参数
164+
是的,整个过程和 DOM 事件并无二样。但其中的 `$event` 代表 $emit 传入的__第一个__参数
167165

168166

169167

@@ -172,10 +170,10 @@ __Example__
172170
Regular 会在组件实例初始化过程的关键阶段抛出事件
173171

174172
1. `$config`: 会在 compile 之前触发
175-
2. `$init` : 会在 compile 之后触发,此时,dom结构已经生成,你可以通过ref来获取了
173+
2. `$init` : 会在 compile 之后触发,此时,dom 结构已经生成,你可以通过 this.$refs 来获取了
176174
3. `$destroy`: 会在组件被 destroy 时触发
177175

178-
> `$`前缀是为了标示内建事件
176+
> `$`前缀是为了标识内建事件
179177
180178

181179
## 事件的共性

0 commit comments

Comments
 (0)