【新莆京注册】JS脚本实现动态给标签控件添加事件的方法,js实现为a标签添加事件的方法

正文实例陈述了js完成为a标签增多事件的主意。分享给大家供大家参谋,具体如下:

 var aLi = document.querySelectorAll(‘.article-tab li’);
  for (var i = 0; i <= aLi.length; i++) {      
  (function(){      
    var p = i     
    aLi[i].onclick = function() {      
【新莆京注册】JS脚本实现动态给标签控件添加事件的方法,js实现为a标签添加事件的方法。      alert(p);      
    }  
  })();  
}

js化解循环加多事件的两种艺术小计算


常常里多少难题也会考虑考虑,比方循环增加事件的那几个梗,初入前端的对象可能就能踩到这些坑,后天专程总括,今后好提示自身!话相当少说平素进去正题~

标题标来头:变量i是var注解的,在大局范围内都灵验。所以每二遍巡回,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值

/*html*/
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>

/*style*/
     li{
     width: 300px;
     height: 48px;
     line-height: 48px;
     background: #218868;
     color: #fff;
     list-style: none;
     margin-top: 5px;
     text-align: center;
     }

JS脚本完毕动态给标签控件增多事件的法门,js标签控件

正文实例叙述了JS脚本落成动态给标签控件增加事件的不二法门。分享给我们供大家仿照效法,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript">
function set()
{
var obj = document.getElementById("fy");
//obj.attachEvent('onfocus', add); //在原先事件上添加
//obj.setAttribute('onfocus',add); //会替代原有事件方法
//obj.onfocus=add;
//等效obj.setAttribute('onfocus',add);
if(window.addEventListener)
{
//其它浏览器的事件代码: Mozilla, Netscape, Firefox
//添加的事件的顺序即执行顺序
//注意用addEventListener 添加带on的事件,不用加on
obj.addEventListener('focus', add, false);
}
else
{
//IE 的事件代码 在原先事件上添加 add 方法
obj.attachEvent('onfocus',add);
}
}
function add(){alert("已经成功添加事件");}
</script>
<body>
<input type="text" onfocus="alert('预设事件');" id="fy" />
<input type="button" onclick="set();" value="sssss"/>
</body>
</html>

PS:代码排版貌似不太正中下怀,这里小编给大家推荐五款代码格式化学工业具,相信在后头的编程开采中能够用赢得:

C语言风格/HTML/CSS/json代码格式化美化学工业具:

在线JavaScript代码美化、格式化学工业具:

JavaScript代码美化/压缩/格式化/加密工具:

在线JSON代码核算、查证、美化、格式化学工业具:

json代码在线格式化/美化/压缩/编辑/转变工具:

越来越多关于JavaScript相关内容可查阅本站专项论题:《JavaScript中ajax操作本领总括》、《JavaScript中json操作工夫总括》、《JavaScript切换特效与技巧计算》、《JavaScript查找算法技艺总计》、《JavaScript动画特效与才具汇总》、《JavaScript错误与调治才干计算》、《JavaScript数据结构与算法技能计算》、《JavaScript遍历算法与手艺计算》及《JavaScript数学运算用法总计》

期望本文所述对大家JavaScript程序设计有着扶助。

本文实例陈述了JS脚本达成动态给标签控件加多事件的措施。分享给咱们供大家参照他事他说加以考察…

以示范表达:

化解方法一:闭包
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
      (function(a){
            lis[a].onclick = function(){
                alert(lis[a].innerText);
            }
       })(i);
    }

兑现效果与利益:循环为带有ml-praise样式类的a标签增加事件,并且在点击a标签后,相应的数据扩张1。

减轻形式二:用变量记录

   var lis = document.querySelectorAll('li');
               for(var i = 0; i < lis.length; i++) {
                   lis[i].num = i;
                   lis[i].onclick = function() {
                       alert(this.num);
                   }
               }

相关文章