JAVASCRIPT动态的为元素添加事件

本文详细介绍了如何使用JavaScript为DOM元素动态添加事件监听器,包括直接设置onclick属性、使用attachEvent及addEventListener方法,并对比了不同浏览器下的执行顺序差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现在感觉js很好很强大,随着深入的学习,你就会不会拒绝在客户端使用js。之前也在网上找了点资料,一起看看。

 

 

value="我是 button" /> 
动态添加onclick事件: 
<input type="button" value="我是 button" id="bu"> 
<script type="text/javascript"> 
var bObj=document.getElementById("bu"); 
bObj.onclick= objclick; 
function objclick(){alert(this.value)}; 
</script> 
如果使用匿名函数 function(){},则如下面所示: 
<input type="button" value="我是 button" id="bu"> 
<script type="text/javascript"> 
var bObj=document.getElementById("bu"); 
bObj.onclick=function(){alert(this.value)}; 
</script> 
上面的方法其实原理都一样,都是定义 onclick 属性的值。值得注意的是,如果多次定义 obj.onclick,例如:obj.onclick=method1; obj.onclick=method2; obj.onclick=method3,那么只有最后一次的定义obj.onclick=method3才生效,前两次的定义都给最后一次的覆盖掉了。 
再看 IE 中的 attachEvent: 
<input type="button" value="我是拉登" id="bu"> 
<script type="text/javascript"> 
var bObj = document.getElementById("bu"); 
bObj.attachEvent("onclick",method1); 
bObj.attachEvent("onclick",method2); 
bObj.attachEvent("onclick",method3); 
function method1(){alert("第一个alert")} 
function method2(){alert("第二个alert")} 
function method3(){alert("第三个alert")} 
</script> 
执行顺序是 method3 > method2 > method1 ,先进后出,与堆栈中的变量相似。需要注意的是attachEvent 中第一个参数是on开头的,可以是 onclick/onmouseover/onfocus 等等 
据说(未经确认验证)在 IE 中使用 attachEvent 后最好再使用 detachEvent 来释放内存 
再看看 Firefox 中的的 addEventListener: 
<input type="button" value="我是布什" id="bu"> 
<script type="text/javascript"> 
var bObj = document.getElementById("bu"); 
bObj.addEventListener("click",method1,false); 
bObj.addEventListener("click",method2,false); 
bObj.addEventListener("click",method3,false); 
function method1(){alert("第一个alert")} 
function method2(){alert("第二个alert")} 
function method3(){alert("第三个alert")} 
</script> 
可以看到,在 ff 中的执行顺序是 method1 > method2 > method3 , 刚好与 IE 相反,先进先出。需要注意的是 addEventListener 有三个参数,第一个是不带“on”的事件名称,如 click/mouseover/focus等。

 

目前的的页面布局都是基于XHTML,通过DIV+CSS布局,实现DHTML的样式。所以这个JavaScript动态的为元素添加事件因此而普遍了。下面我说说怎样通过javascript为元素动态的添加事件.
Javascript为元素动态的添加事件包括两种情况:
不带参数的事件和带参数的事件。
一、不带参数的事件:
两种方式:直接给对象添加事件,节点添加事件
例如给一个id为tab1的添加onclick事件
第一种情况:
var t = document.getElementById("NewTitle");
t.onclick = function showmsg(){
    alert('Hello!World');
}
第二种情况 这种情况更加动态,更为实用,而且还能添加多个函数(添加的事件的顺序即执行顺序),呵呵
   var tb = document.getElementById("NewTitle");
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
        td_value.addEventListener('click', alert('cc'), false);
        td_value.addEventListener('click', alert('cc'), false);
    } else { // IE
        td_value.attachEvent('onclick',  function(){alert('changchang');});
        td_value.attachEvent('onclick',  function(){alert('changchang');});
    }
二、带参数的事件
这里的functionName就是事件处理函数,如果是带参数的那该怎么办,
有人说是这样:
element.onclick=function(sb){
        alert(sb);
    }
是不是上面的那种写法呢?答案是不正确的。
解决方法:匿名函数:
    element.onclick=function() {
        functionName(param);
    };
 这样就巧妙的通过匿名方法实现了!

付出最大努力,追求最高成就。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值