zoukankan      html  css  js  c++  java
  • Javascript动态绑定事件的简单方法

    Javascript事件绑定的方法很多,很灵活。不过,作为比较简单的动态绑定,下面的代码看似正确,但得不到预期的效果

    下面是页面的dom结构

    <ul id="test">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
    

    下面是javascript代码

    //根据ID获取对象
    function id(v) { return document.getElementById(v); }
    
    //根据标记获取对象
    function tag(element, t) { return element.getElementsByTagName(t); }
    
    window.onload = function() {
    	//获取test下的所有li对象
    	var li = tag(id("test"), "li");
    	
    	//用循环绑定鼠标单击事件
    	for(var i=0; i<li.length; i++) {
    		li[i].onclick = function() {
    			//期望弹出1,2,3,4
    			//结果弹出的总是5
    			alert("你点击了第" + (i+1) + "项");
    		}
    	}
    }
    
     

    为什么会出现上边的现像呢?原因是“for中的事件绑定并没有马上得到执行”。修改后的代码如下:

    //根据ID获取对象
    function id(v) { return document.getElementById(v); }
    
    //根据标记获取对象
    function tag(element, t) { return element.getElementsByTagName(t); }
    
    window.onload = function() {
    	//获取test下的所有li对象
    	var li = tag(id("test"), "li");
    	
    	//用循环绑定鼠标单击事件
    	for(var i=0; i<li.length; i++) {
    		(function() {
    			var t = i
    			li[i].onclick = function() {
    			  alert("你点击了第" + t + "项");
    			}
    		})();
    	}
    }
    

    测试代码,一切OK,我们正常的将循环变量i传到onclick事件对应的处理函数中。

  • 相关阅读:
    input文本框输入限制(正则表达式)
    SQL Server通用型分页存储过程
    简单易学的数据图表
    HTML中input文本框只读不可编辑的方法
    SQL添加外键约束的方式
    +1 也要睁着眼
    博客园的自定义皮肤
    网站收集整理
    jQuery extend方法介绍
    HTML5本地存储
  • 原文地址:https://www.cnblogs.com/langzs/p/1916300.html
Copyright © 2011-2022 走看看