需求
做插件的时候,有一个下拉列表框,需要点击下拉列表框的选项,然后获取相应的内容。这就需要给列表框的选项添加事件处理程序了。
误以为是点击事件(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);
}