目前的的页面布局都是基于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);
};
这样就巧妙的通过匿名方法实现了!
相关文章
- 用jquery在元素上添加的样式,对当前ajax动态加载过来的一样的元素无效
- 事件委托:给多个元素和动态添加的元素绑定js事件,
- 为DOM元素动态添加class,解决addclass的覆盖问题
- jquery中给动态生成的标签添加点击事件(div绑定点击事件的额多种用法)
- JavaScript实现动态添加的元素添加点击事件
- JavaScript中给二维数组动态添加元素的质朴方法
- 怎么把element的tootip设置为点击后出现提示框,且在提示框里面放其他元素,vue2动态给对象添加属性并实现响应式应答,样式穿透,获取年月日
- JavaScript采用append添加的元素错误
- 利用AJAX动态生成的标签如何添加监听事件
- 项目中使用jQuery动态添加html并绑定click事件,事件无法触发methods中方法的解决办法