javascript - javascript 注册的 DOM 事件侦听器的数量或大小是否有任何限制？

Question

我正在开发需要定义治疗步骤的网络应用程序。每个治疗步骤最多可包括三个阶段：准备、主要和完成，其中主要是强制性的，准备和完成是可选的。出于时间记录的目的，我需要为每个阶段定义该阶段的最小、标准和最大持续时间，这会导致来自用户侧的 9 个输入。我想让它可视化，以便用户可以使用可调整大小的条来设置所需的时间。

我使用的是 html 和 JavaScript，但应用程序本身是用 Yii 编写的（基本上是 php、JavaScript、数据库）。我的目标平台是 Firefox，也许是 Google Chrome，IE 根本不被认为是受支持的。

我偶然发现了一个博客这使得 div 元素可以触发一些调整大小事件，因为浏览器不支持。我使用 jsfiddle 来创建这样的视觉解释，它会更改输入框中的值，并且应该检查与标准相比的最小值和最大值的大小/持续时间（这样我最终不会得到最小值长于标准或最大值短于标准持续时间）。现在让我感到困惑的是，即使在玩过之后，我也无法让它在所有三个阶段都工作。准备阶段在 FireFox 中按预期工作，但主要和完成阶段不是，主要仅调整输入框的大小（作为调整大小的结果填充值），完成根本不起作用。我什至尝试使用 firebug 来查找问题，但最终束手无策，因为我没有看到任何错误的迹象。我在想是否对可以注册为事件处理程序的函数数量或其大小（代码）有任何限制？当然，到目前为止我开发的 JavaScript 中可能存在一些错误，但是在花了这么多晚上之后，我可能看不到它们。

HTML

<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 &nbsp;&nbsp;</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 &nbsp;&nbsp;</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 &nbsp;&nbsp;</p>
</div>

JavaScript

//----------------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);
});

CSS

   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;
}

知道我在做什么错吗？或者任何可以为我提供我想要提供的功能的东西的想法（最小、标准、最大时间的视觉设置和可调整大小的元素）？也可以在 jQuery 中提出解决方案，我不是这方面的专家，但如果它可以工作，我会通过所需的部分。

我目前的进展可以在http://jsfiddle.net/vtXRQ/ 15/ 找到

javascript - javascript 注册的 DOM 事件侦听器的数量或大小是否有任何限制？

0 回答 0

Related

Reference