![](/img/trans.png)
[英]JavaScript - document.getElementByID with onClick
[英]How to add onclick event to exist element by Javascript? (document.getElementbyID)
我的项目中有一个按钮,当您单击它时会调用一个函数并将onclick
事件添加到我项目中的所有某些元素并显示我隐藏的弹出元素容器。
我有一个函数可以搜索页面中所有存在的元素,并将onclick
事件添加到它们具有特定类的一些元素中。
我的元素存储在列表数组中。 在这个数组的每个单元格(数组名称是list
)中存储了一个如下所示的元素:
list[0] = document.getElementById("my_div_id");
list[1] = document.getElementById("my_div_id_1");
list[2] = document.getElementById("my_div_id_2");
...
list[n] = document.getElementById("my_div_id_n");
我的 Javascript 代码顶部有一个如下所示的函数:
function say_hello(e, msg) {
if (e == null) e = window.event;
//now e handler mouse event in all browser !!!
alert (e + "::" + msg);
}
我有一个函数可以将onclick
事件添加到数组中的每个元素。 我在下面的类型中添加了onclick
事件(用 (*) 注释分隔),但它们中的任何一个都不起作用:
function search_and_add_events_to_all_dragable_elements (list) {
for (var z = 0; z < list.length; z++) {
list[z].href = "javascript:;";
var e;
var test_msg = "VAYYYYYYYYYY";
/**************
element.onclick = new Function { alert ('hi'); };
element.onclick = new Function () { alert ('hi'); };
element.onclick = new function { alert ('hi'); };
element.onclick = new function () { alert ('hi'); };
element.onclick = new function () { return alert ('hi'); };
element.onclick = function () { return alert ('hi'); };
element.onclick = alert ('hi');
element.onclick = "alert ('hi');";
element.onclick = say_hello(e, test_msg);
element.onclick = "say_hello();";
element.onclick = (function (e, test_msg) { return function(e) { sib(e, test_msg); };
element.onclick = (function () { return function() { alert("ahaaay"); };
**************/
list[z].style["padding"] = "20px";
list[z].style["border"] = "solid 10px";
list[z].style["backgroundColor"] = "#CCC";
}
}
我在代码末尾更改style
以执行我的代码是工作并真正结束。 每次都更改样式,但onclick
事件不会添加到我的div
。
只有一种方式将onclick
添加到我的项目中。 与下面相同:
list[z].setAttribute("onclick", "alert(\"hi\");");
但有更好的方法吗?
有个更好的方法。 我的第一个错误是在页面上加载所有元素之前使用 JavaScript。 要解决它,您必须在页面加载结束时调用 element 或将您的 javascript 代码放在您的项目结束时。 那么当您的元素存在于您的页面中时,您的代码将完全执行。
有关它的更多详细信息,请参阅以下链接:
页面加载后执行的 JavaScript
http://www.w3schools.com/jsref/event_onload.asp
我的第二个错误是受伤了:(
我有一个 div,它本身包含我所有的其他元素。 它的样式display: none;
负载。 当我调用我的函数时,它显示为 none 并且所有的 Thins 都运行良好(就像我的新样式一样)但是onclick
事件不起作用 :(( 我花了两天时间来解决这个问题 :((
只是要小心你的元素不应该被display: none
当你向它添加你的onclick
事件时display: none
样式。
那么您可以将这种类型的创建onclick
事件动态用于您的项目:
list[z].onclick = (function (e, test_msg) {
return function(e) {
sib(e, test_msg);
};
})(e, test_msg);
这是我所知道的最好的方法。 您可以管理事件处理程序并将您的参数也发送到您的函数。
我多次使用另一种方式在我的项目中动态添加onclick
事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.