diff --git a/docs/demos/views/nav-bar.vue b/docs/demos/views/nav-bar.vue
index adc2f58f5..c2ebc4100 100644
--- a/docs/demos/views/nav-bar.vue
+++ b/docs/demos/views/nav-bar.vue
@@ -6,6 +6,8 @@
         :leftText="$t('back')"
         :rightText="$t('button')"
         leftArrow
+        @click-left="onClickLeft"
+        @click-right="onClickRight"
       />
     </demo-block>
 
@@ -16,3 +18,16 @@
     </demo-block>
   </demo-section>
 </template>
+
+<script>
+export default {
+  methods: {
+    onClickLeft() {
+      Toast(this.$t('back'));
+    },
+    onClickRight() {
+      Toast(this.$t('button'));
+    }
+  }
+}
+</script>
diff --git a/docs/markdown/en-US/nav-bar.md b/docs/markdown/en-US/nav-bar.md
index 27425dd40..ed1fc1bb7 100644
--- a/docs/markdown/en-US/nav-bar.md
+++ b/docs/markdown/en-US/nav-bar.md
@@ -17,9 +17,24 @@ Vue.component(NavBar.name, NavBar);
   leftText="Back"
   rightText="Button"
   leftArrow
+  @click-left="onClickLeft"
+  @click-right="onClickRight"
 />
 ```
 
+```js
+export default {
+  methods: {
+    onClickLeft() {
+      Toast('Back');
+    },
+    onClickRight() {
+      Toast('Button');
+    }
+  }
+}
+```
+
 #### Advanced Usage
 
 ```html
@@ -44,4 +59,11 @@ Vue.component(NavBar.name, NavBar);
 |-----------|-----------|
 | title | Custom title |
 | left | Custom left side content |
-| right | Custom right side content |
\ No newline at end of file
+| right | Custom right side content |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| click-left | Triggered when click left button | - |
+| click-right | Triggered when click right button | - |
\ No newline at end of file
diff --git a/docs/markdown/zh-CN/nav-bar.md b/docs/markdown/zh-CN/nav-bar.md
index ae5c48fea..4e8a8dd4f 100644
--- a/docs/markdown/zh-CN/nav-bar.md
+++ b/docs/markdown/zh-CN/nav-bar.md
@@ -17,9 +17,24 @@ Vue.component(NavBar.name, NavBar);
   leftText="返回"
   rightText="按钮"
   leftArrow
+  @click-left="onClickLeft"
+  @click-right="onClickRight"
 />
 ```
 
+```js
+export default {
+  methods: {
+    onClickLeft() {
+      Toast('返回');
+    },
+    onClickRight() {
+      Toast('按钮');
+    }
+  }
+}
+```
+
 #### 高级用法
 通过 slot 定制内容
 
@@ -45,4 +60,11 @@ Vue.component(NavBar.name, NavBar);
 |-----------|-----------|
 | title | 自定义标题 |
 | left | 自定义左侧区域内容 |
-| right | 自定义右侧区域内容 |
\ No newline at end of file
+| right | 自定义右侧区域内容 |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| click-left | 点击左侧按钮时触发 | - |
+| click-right | 点击右侧按钮时触发 | - |
diff --git a/packages/nav-bar/index.vue b/packages/nav-bar/index.vue
index cb2e99e17..09789dbc5 100644
--- a/packages/nav-bar/index.vue
+++ b/packages/nav-bar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="van-nav-bar van-hairline--top-bottom" :class="{ 'van-nav-bar--fixed': fixed }">
-    <div class="van-nav-bar__left" @click="$emit('clickLeft')">
+    <div class="van-nav-bar__left" @click="$emit('click-left')">
       <slot name="left">
         <van-icon v-if="leftArrow" class="van-nav-bar__arrow" name="arrow" />
         <span v-if="leftText" v-text="leftText" class="van-nav-bar__text" />
@@ -9,7 +9,7 @@
     <div class="van-nav-bar__title">
       <slot name="title">{{ title }}</slot>
     </div>
-    <div class="van-nav-bar__right" @click="$emit('clickRight')">
+    <div class="van-nav-bar__right" @click="$emit('click-right')">
       <slot name="right">
         <span v-if="rightText" v-text="rightText" class="van-nav-bar__text" />
       </slot>