论坛首页 Web前端技术论坛

关于zkjbeyond blog里的一个JS例子,我提些问题

浏览 3270 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2006-05-29  
这是个绑定Node事件的例子:
<input type="button" id="btn" value="hello"/>

<script language="JavaScript">
<!--
function associateObjWithEvent(obj, methodName);{
    return (function(e);{  // e ??? event ???
        var _e = e||window.event;
        obj[methodName](_e, this);;
    });;
}
function DhtmlObject(elementId);{
    var el = document.getElementById(elementId);;
    if(el);{
        el.onclick = associateObjWithEvent(this, "doOnClick");;  // 这句
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");;
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");;
    }
}
DhtmlObject.prototype.doOnClick = function(e, element);{
    alert(element.type);;
}
DhtmlObject.prototype.doMouseOver = function(e, element);{
    
}
DhtmlObject.prototype.doMouseOut = function(e, element);{
    
}

new DhtmlObject('btn');;
//-->
</script>


问题1:
el.onclick 这句代码,我做了个实验,也是绑定事件的
<input type="button" id="btn" value="1234" />
<script language="JavaScript">
<!--
function test(arg1); {
	alert(arg1.tagName);;
}
//btn.onclick = function(); { test.call(this, this);; }  // 可以正常执行
//btn.onclick = test;  // 可以执行,但没有参数
btn.onclick = test(this);;  // 像el.onclick那样传递参数,但会报错
//-->
</script>

如果像 el.onclick 那样传递参数,就会报错(尚未实现),为什么 el.onclick 那样写就不会报错 ??? 

问题2:
在associateObjWithEvent这个函数里面,return值是一个function,我想问那个参数e是怎么传进去的???

var _e = e||window.event;  先取e参数的值,按理说这个值必须在执行函数时传进去,但是在声明onclick事件 el.onclick 不能传event进去,为什么在执行函数里面又能得到event???


上面的疑问是在看了zkjbeyond 的blog的 “闭包(续)”这篇文章后搞不懂的地方,希望各位指点一下
   发表时间:2006-05-29  
谢谢支持.
btn.onclick = test(this);  // 像el.onclick那样传递参数,但会报错
btn.onclick要求的类型是函数类型。而你给它的是函数执行结果。


var _e = e||window.event;
跨浏览器的实现,ie的事件机制和dom差别很大。ie中用每个事件都用window.event访问。而dom标准每个事件参数传递到函数中。
可以看看prototype.js中的代码实现。

使用闭包,把浏览器中元素传到函数里ie可能会有内存泄露,我正在研究中。

建议楼上看看ajax in action附录。我估计彻底讲解javascript设计模式的书快出了。
0 请登录后投票
   发表时间:2006-05-30  
谢谢zkj_beyond回复,昨晚我看了ajax in action附录,的确有很详细的解释,不过有些东西还不能一下子接受,今晚回去再好好看看

ajax in action 的确是好书
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics