优化 这段代码 <form> <p>请选择您喜欢的颜色：</p> <input type="radio" name="color" value="red"> 红色<br> <input type="radio" name="color" value="green"> 绿色<br> <input type="radio" name="color" value="blue"> 蓝色<br> <br> <p>请选择您喜欢的水果：</p> <input type="radio" name="fruit" value="apple"> 苹果<br> <input type="radio" name="fruit" value="banana"> 香蕉<br> <input type="radio" name="fruit" value="orange"> 橙子<br> <br> <input type="submit" value="提交"> </form> <script> function onHHH(e) { console.log(e); } </script>

这段代码可以进行以下优化：

1. 使用 label 标签来关联选项和文本，提高可访问性。
2. 将 input 标签的 type 属性设置为 button，避免表单默认提交行为。
3. 使用事件委托，将事件处理程序绑定到父元素上，减少事件处理程序的数量。

优化后的代码如下：

<form>
<p>请选择您喜欢的颜色：</p>
<label><input type="radio" name="color" value="red"> 红色</label><br>
<label><input type="radio" name="color" value="green"> 绿色</label><br>
<label><input type="radio" name="color" value="blue"> 蓝色</label><br><br>
<p>请选择您喜欢的水果：</p>
<label><input type="radio" name="fruit" value="apple"> 苹果</label><br>
<label><input type="radio" name="fruit" value="banana"> 香蕉</label><br>
<label><input type="radio" name="fruit" value="orange"> 橙子</label><br><br>
<input type="button" value="提交">
</form>

<script>
document.querySelector('form').addEventListener('click', function(e) {
if (e.target.tagName === 'INPUT' && e.target.type === 'button') {
console.log(e);
}
});
</script>