javascript注册的DOM事件侦听器的数量或大小有限制吗？
我正在开发需要定义治疗步骤的web应用程序。每个治疗步骤最多可包括三个阶段：准备阶段、主要阶段和完成阶段，其中主要阶段是强制性的，准备阶段和完成阶段是可选的。为了记录时间，我需要为每个阶段定义阶段的最小、标准和最大持续时间，这将导致用户端的9个输入。我想让它可视化，这样用户就可以使用可调整大小的条来设置所需的时间 我使用的是html和JavaScript，但应用程序本身基本上是用php、JavaScript和数据库编写的。我的目标平台是Firefox，可能还有Google Chrome，IE根本不受支持 我遇到了一个使div元素触发一些调整大小事件成为可能的方法，因为浏览器不支持这种方法。我使用JSFIDLE创建了这样一种视觉解释，它可以更改输入框中的值，并且应该检查最小值和最大值的大小/持续时间与标准值的比较，这样我就不会得到比标准值长的最小持续时间或比标准值短的最大持续时间。现在让我困惑的是，即使在玩过之后，我也不能让它在所有三个阶段都工作。准备阶段在FireFox中按预期工作，但主阶段和完成阶段不起作用，主要是只调整到输入框工作。由于调整大小和完成，填充值根本不起作用。我甚至试过firebug来寻找问题，但最终无能为力，因为我看不到任何错误的迹象。我在想，对于可以注册为事件处理程序的函数数量或它们的sizeof代码是否有任何限制？当然，到目前为止我计算出的JavaScript中可能存在一些错误，但在花了这么多晚上之后，我可能没有看到它们 HTML 知道我做错了什么吗？或者有什么想法可以为我提供这样的功能，我想用可调整大小的元素提供最小、标准、最大时间的视觉设置？在jQuery中也可能有建议的解决方案，我不是这方面的专家，但如果它能工作的话，我会完成所需的部分javascript注册的DOM事件侦听器的数量或大小有限制吗？,javascript,jquery,html,Javascript,Jquery,Html,我正在开发需要定义治疗步骤的web应用程序。每个治疗步骤最多可包括三个阶段：准备阶段、主要阶段和完成阶段，其中主要阶段是强制性的，准备阶段和完成阶段是可选的。为了记录时间，我需要为每个阶段定义阶段的最小、标准和最大持续时间，这将导致用户端的9个输入。我想让它可视化，这样用户就可以使用可调整大小的条来设置所需的时间 我使用的是html和JavaScript，但应用程序本身基本上是用php、JavaScript和数据库编写的。我的目标平台是Firefox，可能还有Google Chrome，IE根本
我目前的进展可以在上找到，不，对事件处理程序或代码大小没有真正的限制。更可能的是，您在某个地方出现了逻辑错误。您是否考虑过使用JQuery来解决这个问题？它只需要一小部分代码就可以完成同样的工作，并且通常可以跨浏览器工作，而无需调整。我本来试图避免使用jQuery，但它似乎工作得更好。谢谢@TrueBlueAussie。其结果可在以下网址找到：
<div>
<p>Step definition</p>
<p> <pre>
Priprava
Min:<input id='input1min' name='phase1_min' value='39' />
Std:<input id='input1std' value='39' />
Max:<input id='input1max' value='39' />
</pre>
</p>
<div id="wrap_prep" class="horizontal" align="left" style="position:relative;">
<div id="wrap_prep_max" class="horizontal max">MAX <span id="prep_max_val">39m</span>
<ul id="prep_max" >
<li style="color:rgb(255,0,0);">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
</div>
<br/>
<div id="wrap_prep_std" class="horizontal std">STD <span id="prep_std_val">39m</span>
<ul id="prep_std">
<li style="color:rgb(50,155,50);">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
</div>
<br/>
<div id="wrap_prep_min" class="horizontal min">MIN <span id="prep_min_val">39m</span>
<ul id="prep_min">
<li style="color:rgb(0,0,255);">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
</div>
<br/>
<ul id="prep">
<li style="color:white;">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
<p style="position:absolute;bottom:0;right:0;">Príprava </p>
</div>
<p> <pre>
Vykon
Min:<input id='input2min' name='phase2_min' value='39' />
Std:<input id='input2std' value='39' />
Max:<input id='input2max' value='39' />
</pre>
</p>
<div id="wrap_main" class="horizontal" align="left" style="position:relative;">
<div id="wrap_main_max" class="horizontal max">MAX <span id="main_max_val">39m</span>
<ul id="main_max">
<li style="color:rgb(255,0,0);">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
</div>
<br/>
<div id="wrap_main_std" class="horizontal std">STD <span id="main_std_val">39m</span>
<ul id="main_std">
<li style="color:rgb(50,155,50);">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
</div>
<br/>
<div id="wrap_main_min" class="horizontal min">MIN <span id="main_min_val">39m</span>
<ul id="main_min">
<li style="color:rgb(0,0,255);">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
</div>
<br/>
<ul id="main1">
<li style="color:white;">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
<p style="position:absolute;bottom:0;right:0;">Výkon </p>
</div>
<p> <pre>
Ukoncenie
Min:<input id='input3min' name='phase3_min' value='39' />
Std:<input id='input3std' value='39' />
Max:<input id='input3max' value='39' />
</pre>
</p>
<div id="wrap_fin" class="horizontal" align="left" style="position:relative;">
<div id="wrap_fin_max" class="horizontal max">MAX <span id="fin_max_val">39m</span>
<ul>
<li id="fin_max" style="color:rgb(255,0,0);">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
</div>
<br/>
<div id="wrap_fin_std" class="horizontal std">STD <span id="fin_std_val">39m</span>
<ul>
<li id="fin_std" style="color:rgb(50,155,50);">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
</div>
<br/>
<div id="wrap_fin_min" class="horizontal min">MIN <span id="fin_min_val">39m</span>
<ul>
<li id="fin_min" style="color:rgb(0,0,255);">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
</div>
<br/>
<ul>
<li id="fin" style="color:white;">xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x x x x x x xx xxx x xxxxxx xxx xx x x xx x xxxxxx xx x x xxxxx x xx x xxxxxxx x x x x x xxx xxxx x xxx x x x</li>
</ul>
<p style="position:absolute;bottom:0;right:0;">Ukončenie </p>
</div>
//----------------resize magic----code---
function addFlowListener(element, type, fn) {
var flow = type == 'over';
element.addEventListener('OverflowEvent' in window ? 'overflowchanged' : type + 'flow', function (e) {
if (e.type == (type + 'flow') || ((e.orient === 0 && e.horizontalOverflow == flow) || (e.orient == 1 && e.verticalOverflow == flow) || (e.orient == 2 && e.horizontalOverflow == flow && e.verticalOverflow == flow))) {
e.flow = type;
return fn.call(this, e);
}
}, false);
}
function fireEvent(element, type, data, options) {
var options = options || {},
event = document.createEvent('Event');
event.initEvent(type, 'bubbles' in options ? options.bubbles : true, 'cancelable' in options ? options.cancelable : true);
for (var z in data) event[z] = data[z];
element.dispatchEvent(event);
}
function addResizeListener(element, fn) {
var resize = 'onresize' in element;
if (!resize && !element._resizeSensor) {
var sensor = element._resizeSensor = document.createElement('div');
sensor.className = 'resize-sensor';
sensor.innerHTML = '<div class="resize-overflow"><div></div></div><div class="resize-underflow"><div></div></div>';
var x = 0,
y = 0,
first = sensor.firstElementChild.firstChild,
last = sensor.lastElementChild.firstChild,
matchFlow = function (event) {
var change = false,
width = element.offsetWidth;
if (x != width) {
first.style.width = width - 1 + 'px';
last.style.width = width + 1 + 'px';
change = true;
x = width;
}
var height = element.offsetHeight;
if (y != height) {
first.style.height = height - 1 + 'px';
last.style.height = height + 1 + 'px';
change = true;
y = height;
}
if (change && event.currentTarget != element) fireEvent(element, 'resize');
};
if (getComputedStyle(element).position == 'static') {
element.style.position = 'relative';
element._resizeSensor._resetPosition = true;
}
addFlowListener(sensor, 'over', matchFlow);
addFlowListener(sensor, 'under', matchFlow);
addFlowListener(sensor.firstElementChild, 'over', matchFlow);
addFlowListener(sensor.lastElementChild, 'under', matchFlow);
element.appendChild(sensor);
matchFlow({});
}
var events = element._flowEvents || (element._flowEvents = []);
if (events.indexOf(fn) == -1) events.push(fn);
if (!resize) element.addEventListener('resize', fn, false);
element.onresize = function (e) {
events.forEach(function (fn) {
fn.call(element, e);
});
};
}
function removeResizeListener(element, fn) {
var index = element._flowEvents.indexOf(fn);
if (index > -1) element._flowEvents.splice(index, 1);
if (!element._flowEvents.length) {
var sensor = element._resizeSensor;
if (sensor) {
element.removeChild(sensor);
if (sensor._resetPosition) element.style.position = 'static';
delete element._resizeSensor;
}
if ('onresize' in element) element.onresize = null;
delete element._flowEvents;
}
element.removeEventListener('resize', fn);
}
//----------------resize magic----init---
var inp1min = document.getElementById('input1min');
var inp1std = document.getElementById('input1std');
var inp1max = document.getElementById('input1max');
var inp2min = document.getElementById('input2min');
var inp2std = document.getElementById('input2std');
var inp2max = document.getElementById('input2max');
var prep_std = document.getElementById('prep_std');
var prep_min = document.getElementById('prep_min');
var prep_max = document.getElementById('prep_max');
var prep_min_val = document.getElementById('prep_min_val');
var prep_std_val = document.getElementById('prep_std_val');
var prep_max_val = document.getElementById('prep_max_val');
var w_prep_std = document.getElementById('wrap_prep_std');
var w_prep_min = document.getElementById('wrap_prep_min');
var w_prep_max = document.getElementById('wrap_prep_max');
var w_prep = document.getElementById('wrap_prep');
var w_prep1 = document.getElementById('prep');
var main_std = document.getElementById('main_std');
var main_min = document.getElementById('main_min');
var main_max = document.getElementById('main_max');
var main_min_val = document.getElementById('main_min_val');
var main_std_val = document.getElementById('main_std_val');
var main_max_val = document.getElementById('main_max_val');
var w_main_std = document.getElementById('wrap_main_std');
var w_main_min = document.getElementById('wrap_main_min');
var w_main_max = document.getElementById('wrap_main_max');
var w_main = document.getElementById('wrap_main');
var w_main1 = document.getElementById('main1');
var fin_std = document.getElementById('fin_std');
var fin_min = document.getElementById('fin_min');
var fin_max = document.getElementById('fin_max');
var fin_min_val = document.getElementById('fin_min_val');
var fin_std_val = document.getElementById('fin_std_val');
var fin_max_val = document.getElementById('fin_max_val');
var w_fin_std = document.getElementById('wrap_fin_std');
var w_fin_min = document.getElementById('wrap_fin_min');
var w_fin_max = document.getElementById('wrap_fin_max');
var w_fin = document.getElementById('wrap_fin');
var w_fin1 = document.getElementById('fin');
function computeValue1(obj1) {
return Math.round(obj1.offsetWidth / 10) - 2;
}
function updateInpValue(inp1, obj1, disp1) {
var aval = computeValue1(obj1);
inp1.value = (aval > 0 ? aval : "off");
disp1.innerHTML = (aval > 0 ? aval + 'm' : "--");
}
function checkSizeMSM(wrap_min, wrap_std, wrap_max, wrap, wrap_content) {
//check size MSM= Min Standard Max
//due to css style we have border 3px and padding 2px on both sides this means offsetWidth is in total 10px more than style.width
var correction = 10;
var margin1 = 5;
var min1 = wrap_min.offsetWidth;
var std1 = wrap_std.offsetWidth;
var max1 = wrap_max.offsetWidth;
var wrap1 = wrap_content.offsetWidth;
//console.log('check MSM, min1:'+min1+', std1:'+std1+', max1:'+max1+', wrap1:'+wrap1);
if (min1 > std1) wrap_min.style.width = (std1 - correction) + 'px';
if (std1 < min1) wrap_min.style.width = (std1 - correction) + 'px';
if (max1 < std1) wrap_max.style.width = (std1 - correction) + 'px';
if (std1 > max1) wrap_max.style.width = (std1 - correction) + 'px';
if (max1 < wrap1 - correction - margin1) wrap.style.width = (max1 + correction + margin1) + 'px';
if (max1 > wrap1) wrap.style.width = (max1 + correction + margin1) + 'px';
}
addResizeListener(prep_std, function (e) {
//console.log(e);
updateInpValue(inp1std, prep_std, prep_std_val);
checkSizeMSM(w_prep_min, w_prep_std, w_prep_max, w_prep, w_prep1);
});
addResizeListener(prep_min, function (e) {
updateInpValue(inp1min, prep_min, prep_min_val);
checkSizeMSM(w_prep_min, w_prep_std, w_prep_max, w_prep, w_prep1);
});
addResizeListener(prep_max, function (e) {
updateInpValue(inp1max, prep_max, prep_max_val);
checkSizeMSM(w_prep_min, w_prep_std, w_prep_max, w_prep, w_prep1);
});
addResizeListener(main_std, function (e) {
//console.log(e);
updateInpValue(inp2std, main_std);
checkSizeMSM(w_main_min, w_main_std, w_main_max, w_main, w_main1);
});
addResizeListener(main_min, function (e) {
updateInpValue(inp2min, main_min);
checkSizeMSM(w_main_min, w_main_std, w_main_max, w_main, w_main1);
});
addResizeListener(main_max, function (e) {
updateInpValue(inp2max, main_max);
checkSizeMSM(w_main_min, w_main_std, w_main_max, w_main, w_main1);
});
addResizeListener(fin_std, function (e) {
//console.log(e);
updateInpValue(inp3std, fin_std);
checkSizeMSM(w_fin_min, w_fin_std, w_fin_max, w_fin, w_fin1);
});
addResizeListener(fin_min, function (e) {
updateInpValue(inp3min, fin_min);
checkSizeMSM(w_fin_min, w_fin_std, w_fin_max, w_fin, w_fin1);
});
addResizeListener(fin_max, function (e) {
updateInpValue(inp3max, fin_max);
checkSizeMSM(w_fin_min, w_fin_std, w_fin_max, w_fin, w_fin1);
});
body {
padding: 5px;
margin: 0;
background: #fff;
font-family: Arial;
}
#wrap {
margin: 20px 0 0;
background: #f0f0f0;
border: 1px solid #d0d0d0;
}
#list {
display: block;
margin: 10px;
background: #CAE8F9;
}
.resize-sensor, .resize-sensor > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
div.horizontal {
overflow: hidden;
width: 463px;
height: 150px;
resize: horizontal;
border: 3px solid rgb(222, 222, 222);
background: none repeat scroll 0% 0% rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
padding: 2px;
display: inline-block;
}
div.max {
overflow: hidden;
width: 450px;
min-width: 55px;
height: 20px;
resize: horizontal;
border: 3px solid rgb(222, 0, 0);
background: none repeat scroll 0% 0% rgb(255, 0, 0);
color: white;
border-radius: 10px 10px 10px 10px;
padding: 2px;
display: inline-block;
}
div.std {
overflow: hidden;
width: 450px;
min-width: 55px;
height: 20px;
resize: horizontal;
border: 3px solid rgb(35, 122, 35);
background: none repeat scroll 0% 0% rgb(50, 155, 50);
color: black;
border-radius: 10px 10px 10px 10px;
padding: 2px;
display: inline-block;
}
div.min {
overflow: hidden;
width: 450px;
min-width: 55px;
height: 20px;
resize: horizontal;
border: 3px solid rgb(0, 0, 222);
background: none repeat scroll 0% 0% rgb(0, 0, 255);
color: white;
border-radius: 10px 10px 10px 10px;
padding: 2px;
display: inline-block;
}