jQuery事件绑定与封装对象作用域实战解析

jQuery事件绑定与封装对象作用域实战解析

基础示例代码如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var text="test";
var t=new functionTest(text);
function functionTest(text)
    {
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
    });             
this.AlertTest= function ()
     {      
alert(alertText);
     } 
function alertTestInnert()
     {
alert(alertText);
     } 
    } 
function alertTestOuter()
   {
alert(text);
   }
</script>
<body>
<input type="button" id="btnSave" class="button" value="保存" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
</body>
</html>

事件绑定与$(document).ready的关系

执行保存和取消操作时，初始代码逻辑如上所述。

点击保存按钮时没有任何反应，这令人困惑，因为最常用的jQuery事件绑定竟然失效了。经过对比排查发现，问题在于忘记将事件绑定代码包裹在$(document).ready(function () {})中。

var text="test";
$(document).ready(function () {
var t=new functionTest(text);
 });   
function functionTest(text)
    {
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
    });             
this.AlertTest= function ()
     {      
alert(alertText);
     } 
function alertTestInnert()
     {
alert(alertText);
     } 
    } 
function alertTestOuter()
   {
alert(text);
   }

修改后，点击保存按钮即可正常响应，且参数传递正确，从而确保了在不同场景下能够传递不同的参数值。

动态生成元素的事件处理与变量作用域

然而还存在另一种情况：页面动态生成了一些标签，这些标签的点击事件同样需要处理。再次以取消按钮为例，由于是动态生成的，就不能沿用与保存按钮相同的方法。

因此进行了如下测试：

修改

<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />

点击后没有反应，修改如下：

<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter;" />

点击依然没有反应，且未报错，再次修改如下：

<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter();" />

这次有了反应，看来是少了一对括号。将其修改为封装的方法调用形式如下：

<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest();" />

看起来是变量t没有定义，这体现了作用域的影响。于是修改JS代码，将变量t的声明移到外部，而赋值操作放在内部，具体如下：

var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
 });   
function functionTest(text)
    {
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
    });             
this.AlertTest= function ()
     {      
alert(alertText);
     } 
function alertTestInnert()
     {
alert(alertText);
     } 
    } 
function alertTestOuter()
   {
alert(text);
   }

封装对象方法的参数传递实现

第一步修改JS代码，即将取消按钮调用的函数改为需要传递参数的方法，代码如下：

var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
 });   
function functionTest(text)
    {
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
    });             
this.AlertTest= function (text)
     {      
alert(text);
     }
function alertTestInnert()
     {
alert(alertText);
     } 
    } 
function alertTestOuter()
   {
alert(text);
   }

<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />

点击测试，确认参数是否正确传递，一切正常，看来这样便完成了需求。

代码分离与最终整理方案

将通用的JS代码放入一个独立的JS文件中，此处命名为common.js，而页面特定的代码放在HTML文件中，修改后的完整代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
<script type="text/javascript">
var t;//需要定义在外边，否则点击取消时，无法访问到变量t
var text="test"; //传递的参数
$(document).ready(function () {
t=new functionTest(text); //给t赋值，定义不能放在这里边
 });
</script>
<body>
<input type="button" id="btnSave" class="button" value="保存" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />
</body>
</html>

common.js的代码内容如下：

function functionTest(text)
    {
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
    });             
this.AlertTest= function (text)
     {      
alert(text);
     }
function alertTestInnert()
     {
alert(alertText);
     } 
    }