监听事件

监听事件使用ev-*指令，它既可以监听原生事件，也能够监听组件事件。

监听原生事件

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

var App = Intact.extend({
    template: template,
    defaults: function() {
        return {count: 0};
    },
    onClick: function(e) {
        this.set('count', this.get('count') + 1);
    }
});
Intact.mount(App, document.getElementById('appevent'));

原生事件的处理函数记得bind(self)，否则函数中this将会指向window

@since v2.2.0 默认会bind(self)，所以无需再次bind

利用bind方法，我们可以往事件处理函数传递参数。

<div>
    <button ev-click={self.onClick.bind(self, 1)}>赞一下</button>
    <button ev-click={self.onClick.bind(self, 2)}>赞两下</button>
    赞{self.get('count')}
</div>

var App = Intact.extend({
    template: template,
    defaults: function() {
        return {count: 0};
    },
    onClick: function(num, e) {
        this.set('count', this.get('count') + num);
    }
});
Intact.mount(App, document.getElementById('appevent1'));

对于原生事件，事件对象将作为最后一个参数传递给事件处理函数。 我们可以通过它访问事件对象的属性和方法，例如，阻止事件的默认行为preventDefault()， 阻止冒泡stopPropagation()等等。

<a href="/" ev-click={self.onClick}>阻止默认行为</a>

var App = Intact.extend({
    template: template,
    onClick: function(e) {
        e.preventDefault();
    }
});
Intact.mount(App, document.getElementById('appevent2'));

监听组件事件

绑定组件暴露的事件，和原生事件一样，例如：

var Component = self.Component;
<div>
    <Component ev-increase={self.add} />
    组件被点击{self.get('count')}次
</div>

var Component = Intact.extend({
    template: '<button ev-click={self.onClick}>+1</button>',
    onClick: function() {
        this.trigger('increase');
    }
});
var App = Intact.extend({
    template: template,
    defaults: {
        count: 0
    },
    _init: function() {
        this.Component = Component;
    },
    add: function() {
        this.set('count', this.get('count') + 1);
    }
});
Intact.mount(App, document.getElementById('appevent3'));

对于组件事件的处理函数，记得bind(self)，否则处理函数的this 指向触发事件的组件实例（上例中：Component实例），而非绑定事件的实例。

@since v2.2.0 无需bind(self)，默认会指向绑定事件的实例