@@ -5,11 +5,11 @@ Regular 中事件分为两类
5
5
- DOM事件
6
6
- 组件事件
7
7
8
- 在大部分情况下,它们的使用和表现都一致 。
8
+ 在大部分情况下,它们的使用方式和表现一致 。
9
9
10
10
## DOM 事件 {#dom}
11
11
12
- > 所有 __ DOM节点上__ 以 ` on- ` 开头的属性都会被当做DOM事件处理
12
+ > __ DOM节点上__ 所有以 ` on- ` 开头的属性都会被当做DOM事件处理
13
13
14
14
15
15
@@ -50,11 +50,11 @@ __Arguments__
50
50
- elem: 被绑定节点
51
51
- fire: 触发事件函数
52
52
53
- 注意如果需要做 __ 销毁工作__ ,与指令一样,你需要返回一个销毁函数
53
+ 注意如果需要做 __ 销毁工作__ ,与指令一样,你需要在 fn 中返回一个函数用来做销毁工作
54
54
55
55
__ Example__
56
56
57
- 定义` on-enter ` 事件处理回车逻辑
57
+ 定义 ` on-enter ` 事件处理回车逻辑
58
58
59
59
60
60
``` js
@@ -69,30 +69,28 @@ Regular.event('enter', function(elem, fire){
69
69
}
70
70
dom .on (elem, " keypress" , update);
71
71
});
72
-
73
- // use in template
74
-
75
72
```
76
73
77
74
``` html
75
+ <!-- use in template -->
78
76
<textarea on-enter ={this.submit($event)} ></textarea >
79
77
```
80
78
81
- __ Tip:__ 模板 ` this ` 指向组件本身,回车后实际会运行组件的submit方法
79
+ __ Tip:__ 模板中出现的 ` this ` 指向组件实例本身,回车后会运行实例的submit方法
82
80
83
81
<script async src =" //jsfiddle.net/leeluolee/3ac62L4g/embed/js,result/ " ></script >
84
82
85
83
查看 [ $event] ( #$event ) 了解更多
86
84
87
- > 注意除非是自定义事件,其它事件无论浏览器支持 ,都会通过addEventListener进行绑定
85
+ > 注意:除非是自定义事件,其它事件无论浏览器是否支持 ,都会通过addEventListener进行绑定
88
86
89
87
90
88
### 事件代理支持
91
89
92
90
93
- ` on-* ` 会直接在当前节点绑定事件 ,在某些情况下(比如大列表),这种方式不是很高效。
91
+ ` on-* ` 会在当前节点绑定事件 ,在某些情况下(比如大列表),这种方式不是很高效。
94
92
95
- 可以使用 ` delegate- ` 代替 ` on- ` ,来避免一些场景下的性能问题,它只会绑定一次事件到 父节点 上
93
+ 在这种情况下,我们可以尝试使用 ` delegate- ` 代替 ` on- ` ,来避免潜在的性能问题, ` delegate- ` 只会绑定一次事件到 父节点 上
96
94
97
95
98
96
__ Example__
@@ -103,12 +101,12 @@ __Example__
103
101
```
104
102
105
103
106
- 但是,需要注意的是,` delegate- ` 并非是「银弹」
104
+ 但是,需要注意的是,` delegate- ` 并非是「银弹」
107
105
108
- 1 . 避免使用在高频触发的事件( ` mouseover ` ),这样反而会产生性能问题
106
+ 1 . 避免在高频触发的事件中使用( 比如 ` mouseover ` ),这样反而会产生性能问题
109
107
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 ` 等
112
110
113
111
### $event 对象 {#event}
114
112
@@ -151,19 +149,19 @@ __Example__
151
149
### 模板里声明组件事件绑定
152
150
153
151
154
- 与DOM事件绑定类似,声明式组件以` on- ` 开头的属性都会被视作事件绑定
152
+ 与DOM事件绑定类似,声明式组件以 ` on- ` 开头的属性都会被视作事件绑定
155
153
156
- 假设已经注册了一个名为` Pager ` 的翻页器组件
154
+ 假设已经注册了一个名为 ` Pager ` 的翻页器组件
157
155
158
156
``` html
159
157
<Pager on-nav ={ this.refresh($event) } />
160
158
```
161
159
162
160
<script async src =" //jsfiddle.net/leeluolee/8pfa43ms/embed/js,result/ " ></script >
163
161
164
- 每当` Pager ` 组件通过 ` $emit ` 抛出` nav ` 事件,对应的 ` this.refresh($event) ` 就会被调用,即执行组件上的 refresh 方法
162
+ 每当 ` Pager ` 组件通过 ` $emit ` 抛出` nav ` 事件,对应的 ` this.refresh($event) ` 就会被调用,执行组件上的 refresh 方法
165
163
166
- 是的,和DOM事件并无二样 。但其中的` $event ` 代表$emit传入的 __ 第一个 __ 参数
164
+ 是的,整个过程和 DOM 事件并无二样 。但其中的 ` $event ` 代表 $emit 传入的 __ 第一个 __ 参数
167
165
168
166
169
167
@@ -172,10 +170,10 @@ __Example__
172
170
Regular 会在组件实例初始化过程的关键阶段抛出事件
173
171
174
172
1 . ` $config ` : 会在 compile 之前触发
175
- 2 . ` $init ` : 会在 compile 之后触发,此时,dom结构已经生成,你可以通过ref来获取了
173
+ 2 . ` $init ` : 会在 compile 之后触发,此时,dom 结构已经生成,你可以通过 this.$refs 来获取了
176
174
3 . ` $destroy ` : 会在组件被 destroy 时触发
177
175
178
- > ` $ ` 前缀是为了标示内建事件
176
+ > ` $ ` 前缀是为了标识内建事件
179
177
180
178
181
179
## 事件的共性
0 commit comments