给元素注册事件时，事件函数中不能使用全局变量

最新推荐文章于 2020-12-15 17:08:17 发布

rj042

最新推荐文章于 2020-12-15 17:08:17 发布

阅读量2.6k

点赞数

分类专栏： js 文章标签： function input file firebug button ie

本文链接：https://blog.csdn.net/rj042/article/details/4482683

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近在做项目的过程中，遇到这样的需求（为了便于说明，我对源需求进行了简化）：需要通过js创建新的file元素，并要对新建的元素注册事件和添加属性。(注册的事件是用来在客户端验证上传的文件的大小和格式的)。

以下的代码并不是我项目中的代码，项目中的代码远比这个要复杂的多，而且摘下来的话，大家看的也费力。所以我就本着通俗易懂的原则，截取了一部分，并加工了一下。以便让大家更容易读懂！代码如下：

var globalOne = 0; // 全局变量

var globalTwo = 0; // 全局变量

/*在此方法中，给新建元素注册的事件函数要用到全局变量的当前*/

function createElement(parentElement){

globalOne++;

globalTwo++;

var tempOne = globalOne; // 保存全局变量globalOne的当前值

var tempTwo = globalTwo; // 保存全局变量globalTwo的当前值

           parentElement.appendChild(document.createTextNode("图片："));
          var textFiled3_pic = document.createElement("<input name=/"surveyOptPicfile_" + globalOne+ "_" +   (globalTwo+ 1) + "/" >");
          textFiled3_pic.setAttribute("type", "file");
          textFiled3_pic.className = "input200";
          textFiled3_pic.setAttribute("id", "surveyOptPicfile_" + globalOne+ "_" + (globalTwo + 1));

// 注册onchange事件
textFiled3_pic.attachEvent("onchange", function(){ var id = "surveyOptPicfile_" + globalOne+ "_" + (globalTwo+ 1); changeSrc(document.getElementById(id), id);}); // 此处不正确，不能用全局变量（本意是取得全局变量当时的值）

textFiled3_pic.attachEvent("onchange", function(){ var id = "surveyOptPicfile_" + tempOne + "_" + (tempTwo + 1); changeSrc(document.getElementById(id), id);}); // 此处正确（本意是取得全局变量当时的值）

parentElement.appendChild(textFiled3_pic); // 把创建的元素追加到父元素中

}

function changeSrc(obj, id){

// 在此做一些验证

}

</script>

在上面的注册onchange事件代码中，为什么红色标明的部分不正确，而绿色标明部分正确呢！

原因是在js中给新创建的元素注册事件时，注册的事件函数并不会在注册的时候就会被元素加载的，而是在元素的注册事件被触发的时候才加载，即执行事件定义的方法；但元素设置的属性，却会在元素定义之后立即被加载。大家可以通过在ie中用调试工具（或火狐的firebug)查看创建的元素的代码；代码中并不会显示事件。

所以，如果大家以红色的代码注册事件。当触发onchange事件时，注册函数中定义的变量id的值并不是当时注册的时候的全局变量的值；而是全局变量的当前值。要想让id的值重现全局变量重现当时注册时候的值，就应该使用绿色标明部分的代码。

说了这么多，也不知道我说明白了没有。下面我就给一简单的完整的例子——这样也算是对我上面说的一种解释吧。下面的代码兼容IE和火狐，其中蓝色标明部分的代码，请根据自己的浏览器注释掉不需要的部分。简单介绍下面的这段代码的作用：该段代码可以创建多个上传文件的file元素，在每个创建的file元素都注册一个onchange事件，用于验证上传的图片格式是否是.jpg或.gif或.png格式的。

<html>
<head>
<script type="text/javascript">
var globalOne = 0; // 全局变量
var globalTwo = 0; // 全局变量

    /*在此方法中，给新建元素注册的事件函数要用到全局变量的当前*/
    function createFileElement(parentElement){
          globalOne++;
          globalTwo++;

var tempOne = globalOne; // 保存全局变量globalOne的当前值
var tempTwo = globalTwo; // 保存全局变量globalTwo的当前值

   parentElement.appendChild(document.createTextNode("新增上传图片组件" + globalOne + "："));
   /** IE创建新元素，并注册事件
          var textFiled3_pic = document.createElement("<input name=/"surveyOptPicfile_" + globalOne + "_" + (globalTwo+ 1) + "/" >");
          textFiled3_pic.className = "input200";
          textFiled3_pic.setAttribute("id", "surveyOptPicfile_" + globalOne+ "_" + (globalTwo + 1));
          // 注册onchange事件
   textFiled3_pic.attachEvent("onchange", function(){ var id = "surveyOptPicfile_" + tempOne + "_" + (tempTwo + 1); changeSrc(document.getElementById(id), id);});
   */

   /** FF创建新元素，并注册事件*/
   var textFiled3_pic = document.createElement("input");
          textFiled3_pic.setAttribute("name", "surveyOptPicfile_" + globalOne+ "_" + (globalTwo+ 1));
          textFiled3_pic.setAttribute("type", "file");
          textFiled3_pic.setAttribute("class", "input200");
          textFiled3_pic.setAttribute("id", "surveyOptPicfile_" + globalOne+ "_" + (globalTwo+ 1));
          textFiled3_pic.addEventListener("change", function(){var id = "surveyOptPicfile_" + tempOne + "_" + (tempTwo + 1); changeSrc(document.getElementById(id), id);}, false);

parentElement.appendChild(textFiled3_pic); // 把创建的元素追加到父元素中

}

// 验证文件格式(当然大家也可在这个函数中做其他一些操作)
function changeSrc(fileObj, fileElementId)
{
var fileName = fileObj.value;
if(!fileName.match(//.jpg|/.gif|/.png/ig)){
alert("您上传的图片格式不正确！");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form1" id="form1">
请选择图片：<input type="file" name="surveyOptPicfile_0_0" id="surveyOptPicfile_0_0" οnchange="changeSrc(this, 'surveyOptPicfile_0_0')">
<input type="button" value="增加上传组件" οnclick="createFileElement(document.form1);">

</form>
</body>
</html>

大家可以直接把上面的代码拷到本地执行！（如果在注册onchange事件的时候不是textFiled3_pic.addEventListener("change", function(){var id = "surveyOptPicfile_" + tempOne + "_" + (tempTwo + 1); changeSrc(document.getElementById(id), id);}, false); 而是使用全局变量textFiled3_pic.addEventListener("change", function(){var id = "surveyOptPicfile_" + globalOne+ "_" + (globalTwo+ 1); changeSrc(document.getElementById(id), id);}, false); 则用新创建的file组件上传图片，不能正确的验证上传的图片格式，即使你上传的格式正确，也会提示你格式错了！大家可以试试！）

另：在注册事件中使用关键字this也将不起作用，而是会把它当做普通的字符串！

rj042

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
给元素注册事件时，事件函数中不能使用全局变量

最近在做项目的过程中，遇到这样的需求（为了便于说明，我对源需求进行了简化）：需要通过js创建新的file元素，并要对新建的元素注册事件和添加属性。(注册的事件是用来在客户端验证上传的文件的大小和格式的)。以下的代码并不是我项目中的代码，项目中的代码远比这个要复杂的多，而且摘下来的话，大家看的也费力。所以我就本着通俗易懂的原则，截取了一部分，并加工了一下。以便让大家
复制链接

扫一扫