事件处理

事件绑定

通过ev-*属性，可以在dom上绑定事件

例如：

<button ev-click={function() { alert('点击了按钮') }}>点击按钮</button>

绑定方法

大多数情况下，事件处理函数都比较复杂，直接写在模板中不太优雅。 一般通过将事件处理传入模板的render方法，来进行绑定

例如：

<button ev-click={onClick.bind(self)}>点击了{count}次</button>

var vdt = Vdt(template);
vdt.render({
  count: 0,
  onClick: function() {
    this.count++;
    // 调用update方法去更新dom
    vdt.update();
  }
})

事件处理函数中this默认指向window，我们可以bind(self)让它指向渲染到模板的数据`

传入参数

你可以通过bind()方法，向事件处理函数中传入参数

<div>
  点击下面的名字
  <ul>
    <li v-for={users} 
      ev-click={onClick.bind(self, value)}
    >{value}</li>
  </ul>
</div>

var vdt = Vdt(template);
vdt.render({
  users: ['Syalvia', 'Shadow', 'Javey'],
  onClick: function(user) {
    alert('你点击的是' + user);
  }
})

事件对象

事件处理函数的最后一个参数为事件对象，通过它我们可以访问事件的属性和方法

<div ev-click={onClickParent.bind(self)}>
  点击父元素
  <p ev-click={onClickChild.bind(self)}>点击子元素</p>
</div>

var vdt = Vdt(template);
vdt.render({
  onClickParent: function(event) {
    alert('你点击的是父元素，target: ' + event.target.tagName);
  },
  onClickChild: function(event) {
    alert('你点击的是子元素，target: ' + event.target.tagName);
  }
})

我们可以通过event.stopPropagation()来阻止冒泡，

<div ev-click={onClickParent.bind(self)}>
  点击父元素
  <p ev-click={onClickChild.bind(self)}>点击子元素</p>
</div>

var vdt = Vdt(template);
vdt.render({
  onClickParent: function(event) {
    alert('你点击的是父元素，target: ' + event.target.tagName);
  },
  onClickChild: function(event) {
    // 让事件冒泡
    event.stopPropagation();
    alert('你点击的是子元素，target: ' + event.target.tagName);
  }
})