第十篇 事件处理器（上）

         讲到事件，在这之前我们就已经使用过了，像什么绑定事件，点击事件等这些，那么现在我们就来简单讲讲这个事件处理器，一如既往先由简入手：

函数名（自动传事件对象）

简单写一个点击事件：

<div id="app">
	<button type="button" @click="handleClick">点击</button>
</div>
<script>
	new Vue({
		el:'#app',
		methods:{
			handleClick(){
				console.log('点击');  // 输出：点击
			}
		}
	})
</script>

        这里我们用的就是函数名，那么将 handleClick 改成 handleClick()呢？那在写的时候是什么时候用handleClick和handleClick()呢？

        在这里@click="handleClick"没有添加小括号时，它为自动为我们传递一个事件对象evt，上一段代码没写呢时用不到，那么下面是来简单看看这个传递的对象，可以在控制台上看到事件对象。

<div id="app">
	<button type="button" @click="handleClick">点击</button>
</div>

<script>
	new Vue({
		el:'#app',
		methods:{
			handleClick(evt){
				console.log(evt.target)
			}
		}
	})
</script>

 函数表达式（手动传递参数）

接下来就是我们之前讲到一些的使用函数表达式；先来一个简单的例子：

<div id="app">
	<button type="button" @click="handleClick(1)">点击</button>
</div>
<script>
	new Vue({
		el:'#app',
		methods:{
			handleClick(opt){
				console.log(opt); // 输出：1
			}
		}
	})
</script>

handClick()中传递参数"1"进去，将传递过去的参数进行打印在控制台上；

---

小结：

        那么什么时候需要写小括号和不写，也即是使用"函数名"或"函数表达式"呢，就是要考虑是否需要传递我们自己所需要的参数，如果不需要的话可以直接使用（handleClick），如果需要手动传递自己的参数时，则可以用函数表达式的方式传递（handleClick(参数)）；

函数表达式（手动传递参数 & 事件对象）

        在传递参数的同时也希望将我们的事件对象一并传过去，如下：（$evevt是固定写法）

<div id="app">
	<button type="button" @click="handleClick($event,1)">点击</button>
</div>
<script>
	new Vue({
		el:'#app',
		methods:{
			handleClick($event,opt){
				console.log($event); // 输出：事件对象
				console.log(opt);  // 输出：1
			}
		}
	})
</script>

        以上就是事件处理中的方法事件处理器-写函数名( handleClick )的方式 ，以及内联处理器方法 - 执行函数表达式( handleClick($event,data) )的方式，监听事件的方式在之前的操作中已经使用过，例如监听input框当中的value的变化，从而来触发某些事件。那么还有这个事件修饰来进行事件的处理，我们放到下一篇内容讲解事件处理中用事件修饰符进行处理冒泡事件。