JavaScript实现单选框效果示例：事件委托与阻止冒泡

本文主要介绍了如何使用JavaScript实现单选框效果，通过实例演示了一个动态创建并操作HTML列表项（li）的场景。主要内容包括： 1. **事件委托**： - 事件委托是一种优化的JavaScript编程技术，它允许将事件处理器添加到父元素而非所有子元素上。这样做的好处是可以避免为新添加到页面的元素重复添加事件监听器，提高性能。 - 通过在`ul`元素上监听点击事件，然后在事件处理函数中使用`target`或`srcElement`属性来确定触发事件的特定`li`元素。例如： ```javascript ul.onclick = function(evs) { var ev = window.event || evs; var tar = ev.target || ev.srcElement; tar.style.background = 'red'; // 为点击的li设置背景色 }; ``` - 当动态创建新的`li`元素时，只需将其添加到`ul`，原有的事件处理机制依然有效。 2. **阻止冒泡**： - JavaScript中的事件冒泡是指事件从最具体的元素开始，逐级向上传递到文档对象。这可能导致不必要的事件处理。 - 为了防止默认的冒泡行为，可以在事件处理函数中添加`event.stopPropagation()`或`ev.cancelBubble = true`（IE浏览器）。考虑到浏览器兼容性，通常会使用条件判断： ```javascript ev.stopPropagation? ev.stopPropagation() : ev.cancelBubble = true; ``` - 阻止某个元素的事件冒泡，可以在该元素的事件处理函数中调用阻止冒泡方法。 3. **CSS样式**： - 文档中还提供了一些基本的CSS样式，用于美化单选框效果，如设置`div`的宽度、高度、边框、内边距以及字体等。 4. **模拟单选框功能**： - 通过这个示例，你可以理解如何利用JavaScript动态地改变列表项的外观，模拟用户选择的效果，例如给选中的`li`元素添加背景色，而点击其他地方则隐藏选中状态。 总结起来，本文主要展示了如何通过JavaScript事件委托实现单选框选择效果，并结合CSS样式提供了简洁的交互设计。同时，对阻止事件冒泡的概念进行了讲解，有助于开发者编写更高效、兼容的JavaScript代码。