diff --git a/dev/App.vue b/dev/App.vue
index 478f339..3f6c7e8 100644
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -3,6 +3,9 @@
         <button @click="addNode">Add Node</button>
         <vue-tree-list
           @click="onClick"
+          @change-name="onChange"
+          @delete-node="onChange"
+          @add-node="onChange"
           :model="data"
           default-tree-node-name="new node"
           default-leaf-node-name="new leaf"
@@ -53,13 +56,17 @@
       }
     },
     methods: {
-      addNode: function () {
+      onChange (data) {
+        console.log(data)
+      },
+
+      addNode () {
         var node = new TreeNode({ name: 'new node', isLeaf: false })
         if (!this.data.children) this.data.children = []
         this.data.addChildren(node)
       },
 
-      getNewTree: function () {
+      getNewTree () {
         var vm = this
         function _dfs (oldNode) {
           var newNode = {}
diff --git a/readme.md b/readme.md
index db0ac51..604ae07 100644
--- a/readme.md
+++ b/readme.md
@@ -9,14 +9,25 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
 ``npm install vue-tree-list``
 
 ```javascript
-<button @click="addNode">Add Node</button>
-<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
-<button @click="getNewTree">Get new tree</button>
-<pre>
-  {{newTree}}
-</pre>
+<div>
+    <button @click="addNode">Add Node</button>
+    <vue-tree-list
+      @click="onClick"
+      @change-name="onChange"
+      @delete-node="onChange"
+      @add-node="onChange"
+      :model="data"
+      default-tree-node-name="new node"
+      default-leaf-node-name="new leaf"
+      v-bind:default-expanded="false">
+    </vue-tree-list>
+    <button @click="getNewTree">Get new tree</button>
+    <pre>
+      {{newTree}}
+    </pre>
+</div>
 ...
-import { VueTreeList, Tree, TreeNode } from '../src'
+import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
 export default {
   components: {
     VueTreeList
@@ -43,7 +54,7 @@ export default {
           name: 'Node 2',
           id: 3,
           pid: 0,
-          dragDisabled: true
+          disabled: true
         },
         {
           name: 'Node 3',
@@ -54,13 +65,17 @@ export default {
     }
   },
   methods: {
-    addNode: function () {
+    onChange (data) {
+      console.log(data)
+    },
+
+    addNode () {
       var node = new TreeNode({ name: 'new node', isLeaf: false })
       if (!this.data.children) this.data.children = []
       this.data.addChildren(node)
     },
 
-    getNewTree: function () {
+    getNewTree () {
       var vm = this
       function _dfs (oldNode) {
         var newNode = {}
@@ -92,8 +107,8 @@ export default {
 
 # props
 **default-tree-node-name**
- 
- Default name for new treenode.
+
+Default name for new treenode.
 
 **default-leaf-node-name**
 
@@ -118,14 +133,11 @@ Default node is expanded or not.
 # events
 **click**
 
-```javascript
-<vue-tree-list @click="onClick" ...
-...
-onClick(model) {
-  console.log(model)
-}
-...
-```
+**change-name**
+
+**delete-node**
+
+**add-node**
 
 # Forbid dragging
 Use `dragDisabled` to forbid dragging:
diff --git a/src/VueTreeList.vue b/src/VueTreeList.vue
index 36071b1..77f2c26 100644
--- a/src/VueTreeList.vue
+++ b/src/VueTreeList.vue
@@ -216,7 +216,7 @@
         var node = new TreeNode({ name, isLeaf })
         this.model.addChildren(node, true)
         var root = this.getRootNode();
-        root.$emit('new-node', node)
+        root.$emit('add-node', node)
       },
 
       dragStart(e) {