select事件处理程序onchange

需求

做插件的时候，有一个下拉列表框，需要点击下拉列表框的选项，然后获取相应的内容。这就需要给列表框的选项添加事件处理程序了。

误以为是点击事件（onclick）

由于选项太多，每个选项都用js去绑定事件感觉太繁琐，代码不够简洁，就打算使用事件冒泡的机制，给选项添加事件处理程序。

<select id="select">
	<option>apple</option>
	<option>banana</option>
	<option>peach</option>
	<option>watermelon</option>
</select>
<script>
	var select = document.getElementById('select');
	select.addEventListener('click',fun,false);//默认false，事件在冒泡阶段执行
	function fun(e){
		console.log(e.target);
	}
</script>

实际上在点击select的时候，就执行了fun方法了，并且点击对象是select：

所以说这样并没有达到要求，当我们点击下拉选项option时，这个事件并没有触发。

其实是改变事件（onchange）

select 事件是注册在自己的标签上的，不是onclick，而是onchange

var select = document.getElementById('select');
select.addEventListener('change',fun,false);//默认false，事件在冒泡阶段执行
function fun(e){
	console.log(e.target.value);
}