Javascript动态事件处理，而不是Jquery
[英]Javascript Dynamic Event Handling, Not Jquery
问题描述
这是我的代码
<html>
<head>
<script type="text/javascript">
window.onload = function(){
sel = document.getElementsByTagName('select');
for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');}
}
</script>
</head>
<body>
<div id="ss"></div>
<select></select>
<input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'))"/>
</body>
</html>
用于静态标签的“onclick”事件“选择”但不适用于动态创建的“选择”。 换句话说，我想知道在Javascript中JQuery的.live的替代品。
5 个解决方案
解决方案1
6 已采纳 2012-03-10 19:51:57
将事件绑定到DOM中已存在的父元素：
document.body.addEventListener('click', function (e) {
if (e.target.tagName.toLowerCase() == 'select') {
alert('You clicked a select!');
}
});
JS小提琴演示 。
将点击绑定到“更靠近” form的元素会更加明智，如果使用getElementById()而不是getElementByTagName() ，则更简单，因为您不必担心数字的索引你有约束力。
解决方案2
3 2012-03-10 20:10:31
每次添加时，都不需要将onclick处理程序绑定到每个选择。
我不打算重新输入整个页面，但是通过阅读以下片段，您将看到正在发生的事情：
function handler() {
alert('You clicked a select!');
}
window.onload = function(){
sel = document.getElementsByTagName('select');
for(int i= 0; i < sel.length; i++) {
sel[i].onclick = handler;
}
}
function addSelect() {
var slt = document.createElement("select");
document.getElementById('ss').appendChild(slt);
slt.onclick = handler;
}
<input type="button" onclick="addSelect();"/>
解决方案3
3 2012-03-10 20:17:34
jQuery的live函数使用“ Event Delegation ”。 基本思想是在父元素上绑定一个侦听器，该元素在页面加载时保证存在。 下面的任何元素（ 除了一些元素）都将触发一个可以被父监听器捕获的事件。 从那里你需要检索事件的target / sourceElement并确定它是否是你关心的事件。
像这样的东西可用于收听点击。 只需确保您添加的任何新元素都位于正确的父容器中，并且具有将其与其他可点击元素区分开的属性。
<html>
<head>
<script type="text/javascript">
window.onload = function(){
// get the relevant container
var eventContainer = document.getElementById("EventContainer");
// bind a click listener to that container
eventContainer.onclick = function(e){
// get the event
e = e || window.event;
// get the target
var target = e.target || e.srcElement;
// should we listen to the click on this element?
if(target.getAttribute("rel") == 'click-listen')
{
alert("You clicked something you are listening to!");
}// if
};
};
</script>
</head>
<body>
<div id="EventContainer">
<input type="button" rel="click-listen" name="myButton" value="Listening to this button." />
<input type="button" name="anotherButton" value="Not listening." />
<p>I'm also listening to this a element: <a href="#" rel="click-listen">listening to this</a></p>
</div>
</body>
</html>
解决方案4
1 2012-03-10 19:59:49
您只在窗口加载时设置onclick。 您需要做的就是将当前在window.onload中的代码放入命名函数中，然后在每次添加新选择时调用它。
这是愚蠢的做法：
<html>
<head>
<script type="text/javascript">
function update () {
sel = document.getElementsByTagName('select');
for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');}
}
window.onload = update;
</script>
</head>
<body>
<div id="ss"></div>
<select></select>
<input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'));update();"/>
</body>
</html>
解决方案5
0 2012-03-10 20:12:41
您可以使用如下所示的跨浏览器解决方案动态添加事件处理程序
sel = document.getElementsByTagName('select');
for( i=0; i<sel.length; i++){
if (sel[i].addEventListener){
sel[i].addEventListener("click", clickHandler, false);
} else if (sel[i].attachEvent){
sel[i].attachEvent("onclick", clickHandler);
}else{
sel[i].onclick = clickHandler;
}
}
function clickHandler(event){
}
在jquery / javascript中处理From和To date进行动态循环
[英]Handling From and To date in jquery/javascript for dynamic loop
如何使用jQuery / javascript将事件的处理限制为每X秒一次？
[英]How to limit handling of event to once per X seconds with jQuery / javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.