js--dom--添加事件的时候传递参数的方法
2013-03-05 16:30
447 查看
1.js的位置必须是dom节点之后,否则就会说找不到节点。
<html>
<head>
</head>
<body>
<h1 id="myHeader">click here</h1>
</body>
<script type="text/javascript">
init();
function init()
{
document.getElementById("myHeader").onclick = test(33);
//必须放在这,如果放在head中的话,就会说找不到myHeader节点
}
function test(index){
return function(){
alert(index);
}
}
</script>
</html>
2. 之前添加事件的时候不能传递参数是因为添加参数的时候,需要用括号括起来,方法名字一看见括号,那它就执行了。而我们不是要方法执行,而是要一个等待执行的方法。
添加事件的时候传递参数的方法
a. 就是上面的代码,通过添加闭包的方法。
现在终于理解闭包了,闭包的作用就是通过返回一个 函数,而不是一个具体的结果。
如果上面代码的执行过程是:
本意是: 添加click事件,只有当当点击的时候才去执行test方法。所以如果写成test(33)的话,那test方法就马上执行了。
怎么办呢,通过闭包,闭包的作用返回的是一个函数---这样,而不是一个函数执行的结果。
function test(args){
return function(){
alert(args);
}
}
当点击的时候才执行。
闭包的经典回答应该是:延长局部变量的生命周期
b.addEvent:function(aeTag, asEvt, afHandler,args){
function action(args){
return function(){
afHandler(args);
}
}
if (!aeTag) {
return false;
}
if (navigator.userAgent.indexOf("IE") != -1) {
aeTag.attachEvent("on" + asEvt, action());
} else {
aeTag.addEventListener(asEvt, action(), false);
}
},
这是我改装的能执行传递参数的添加事件的方法。
作用就是能直接传递参数了
文章出自:http://blog.csdn.net/jaycxing/article/details/5136377
<html>
<head>
</head>
<body>
<h1 id="myHeader">click here</h1>
</body>
<script type="text/javascript">
init();
function init()
{
document.getElementById("myHeader").onclick = test(33);
//必须放在这,如果放在head中的话,就会说找不到myHeader节点
}
function test(index){
return function(){
alert(index);
}
}
</script>
</html>
2. 之前添加事件的时候不能传递参数是因为添加参数的时候,需要用括号括起来,方法名字一看见括号,那它就执行了。而我们不是要方法执行,而是要一个等待执行的方法。
添加事件的时候传递参数的方法
a. 就是上面的代码,通过添加闭包的方法。
现在终于理解闭包了,闭包的作用就是通过返回一个 函数,而不是一个具体的结果。
如果上面代码的执行过程是:
本意是: 添加click事件,只有当当点击的时候才去执行test方法。所以如果写成test(33)的话,那test方法就马上执行了。
怎么办呢,通过闭包,闭包的作用返回的是一个函数---这样,而不是一个函数执行的结果。
function test(args){
return function(){
alert(args);
}
}
当点击的时候才执行。
闭包的经典回答应该是:延长局部变量的生命周期
b.addEvent:function(aeTag, asEvt, afHandler,args){
function action(args){
return function(){
afHandler(args);
}
}
if (!aeTag) {
return false;
}
if (navigator.userAgent.indexOf("IE") != -1) {
aeTag.attachEvent("on" + asEvt, action());
} else {
aeTag.addEventListener(asEvt, action(), false);
}
},
这是我改装的能执行传递参数的添加事件的方法。
作用就是能直接传递参数了
文章出自:http://blog.csdn.net/jaycxing/article/details/5136377
相关文章推荐
- react.js 点击事件传递参数的方法
- js 与 android 的交互(方法互调用) 和android向 js传递值, js向android传参数 事件拦截看上一篇
- Delphi动态事件深入分析(对象方法在调用的时候会传递一个隐含的Self指针,而该指针的值在EAX中。即左边第一个参数)
- js用for循环为对象添加事件并传递参数
- JS实现动态添加DOM节点和事件的方法示例
- javascript动态添加事件方法详解 || Javascript attachEvent传递参数的办法
- 给dom事件方法传递参数,有多少种方法?
- 给dom元素添加事件处理的两种方法
- [置顶] Android调用js方法传递参数自动计算问题的解决
- js 方法传递对象参数
- Js事件详解(1)事件类型及几种添加事件处理程序的方法
- JQuery 绑定事件时传递参数的实现方法
- js给对象标签添加事件&方法的封装
- as/flex 中添加事件addEventListener()时传递参数
- EXT.NET-gridpanel 行双击事件,js带参数调用后台方法
- js的request方法,对“获取静态文件传递参数的函数” 进行了优化
- js中onclick事件里面传递参数
- 01 JS-DOM之--事件以及绑定方法
- src引入js时添加时间戳参数方法
- .net中js向后台传递包含中文的参数,后台获取到的中文乱码的解决方法。