Javascript实现单选框效果

本文实例为大家分享了Javascript实现单选框效果的具体代码，供大家参考，具体内容如下

描述: 点击每一个li 将li的内容赋值给 div 给当前点击的li加上背景色, 点击空白部分隐藏

技术要点:

1.事件委托

事件委托: 事件代理, 将子节点要做的事情交给父元素来做

原理: 将原来要给子元素添加的事件, 加给父元素, 事件中通过 target || srcElement 找到对应的子节点, 子节点处理具体的操作

优点: 避免使用for 后续加进来的元素也有同样的事件处理

使用: 如果子节点有统一的事件(每一个li都加点击事件 每一个li都输出元素)

ul.onclick = function(evs){
 var ev = window.event || evs;
 // console.log(ev.target || ev.srcElement);
 var tar = ev.target || ev.srcElement;
 tar.style.background = 'red';
}

// 创建节点
var li = document.createElement('li');
li.innerHTML = '12345';
// 追加进去
ul.appendChild(li);

2.阻止冒泡

由于冒泡产生的问题 阻止冒泡解决

依赖于事件对象

标准: ev.stopPropagation();

​ ie: ev.cancelBubble = true;

一个是方法 一个是属性 需要做兼容

判断方法是否存在:

ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

不想让哪一个事件冒泡，就在那一个元素的事件上阻止

代码实现：

 
 
 
 


 
 

 

  
HTML
  
CSS
  
JavaScript
  
HTML5
  
CSS3
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。