script中事件的代码优化
我是最近在学习web相关知识的学生，也是一名小白中的小白。希望我能够通过这个平台交到更多对计算机感兴趣的朋友，我们可以一起交流学习的心得和感悟！
我们都知道我们自己编写的代码一直都随着我们的水平提高而在不断的优化！
今天我们就来说一说，事件的触发事件的优化的问题！今天我们使用onblur事件作为实例来使用—onblur我们都知道是文本框失去焦点触发的事件。在我们刚学习的时候我们在写的时候应该都是这样写的<input type="text" name="name" id="id" onclick="(这里面是我们自己在script中定义函数)">这应该是我们在刚开始学习的时候使用的语句。
我们现在把这个事件的代码进行优化一下。在进行优化之前我先把没有优化的代码和优化过后的代码粘贴出来，我们来比较一下。
没有优化之前的代码如下：<input type="password" id="na" name="pas" onblur="testpaw()"> <input type="text" id="ph" name="aa" onblur="testext()"> <input type="button" id="s" value="登录" onblur="checking()"> 假设里面是我们定义的函数testpaw(),testext(),checking() 后面是我们的优化的全部代码可以直接运行的<html> <head> <meta charset="UTF-8"> <title>动态代码测试</title> <script> window.onload=function(){ var inputs=document.getElementsByTagName("input");//获取数组 //然后我们循环使用 并对节点对象添加事件 for(var i=0;i<inputs.length;i++){ alert(i); inputs[i].onblur=function(){ if(this.value==""||this.value==null) { alert("请输入数据"+i); return; } if (this.type!="button"||this.type=="reset") { alert(this.id+" "+this.value); } } alert("代码运行到此处"); } }//当我们的文档加载完成之后 我们的的函数开始调用 </script> </head> <body> 账号：<input type="text" name="a1" id="a1"> 密码：<input type="password" name="a2" id="a2"> 电话：<input type="text" name="a1" id="a3"> <input type="button" id="a4" value="测试"> <input type="reset" id="a5" value="重置"> </body> </html>
我们把代码的图片上传一下，方便我们的查看！跟我们的上面的代码一模一样！
下面我们来解析一下这段代码的使用：先贴出来运行的图片吧！
在上面的图片界面运行出来之前会交替出现alert(i); alert(“代码运行到此处”); 这两行代码。这两行是我在测试代码的时候使用的！（补充一下）。最后我们开始讲解代码的运行！
我们都知道代码的运行是从上到下的，先执行我们的script里面的代码 然后在运行我们body里面的代码。也许会有人问：我们document.getElementsByTagName(“input”); 这一句代码在body里面的代码没有运行的情况下，能不能获取到节点的对象呢？答应当然是不能的！我们在代码的解决方法有两种方法：1：按照代码的执行顺序来写代码，也就是说把我们的script代码写道body的下面，先让我们的body执行，然后在执行我们的script。（并不推荐这种写法，因为太乱了）2：我们使用window.onload的方法来解决这个问题，window.onload我们是这样解释的，让我们的文档加载完成之后在触发的事件。(推荐这种方法。这中方法写出来的代码美观！)
说明白这个问题以后我们在接着往下运行代码—我们获取到了对象document.getElementsByTagName(“input”); 并赋值给我们的var inputs
因为我们获取到的是数组，所以我们在input后面加上了s。for(var i=0;i<inputs.length;i++)，然后我们开始循环便利数组来了，遍历每一个节点对象。inputs[i].onblur 给我们的每一个对象添加一个事件onblur,相当于给我们对象贴上一个接收器，当我们的对象接受事件的触发时我们开始执行里面的代码了！inputs[i].οnblur=function(){
if(this.value==""||this.valuenull)
{
alert(“请输入数据”);
return;
}
if (this.type!=“button”||this.type"reset") {
alert(this.id+" "+this.value);
}
}有人会注意，我们的代码里面使用的时this，对于学过java的同学应该比较容易理解。这个this就表示我们当前的对象！那么有一个新的问题，为什么我们要使用this而不继续使用inputs[i]呢（this.value替换掉inputs[i].value）？因为我们在触发相应的事件的时候我们的 i 是在不断改变的，无法确定你使用的i是谁的值。你在触发里面的代码的时候我们的inputs[i].onblur中的inputs[i]和this替代的inputs[i]是不一样的。（如果有更好的讲解可以下方留言，咱们一起交流）。至于最后的运行效果可以粘贴运行看一下！
我们优化后的代码比优化之前的看上去要简洁很多。在优化之前，我们需要写三个obblur="xxx"现在我们只定义一个就行了！或许，有的小伙伴有更简洁的代码，可以下方留言！咱们一起学习互相进步！祝各位学习快乐！
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
