javascript 为什么不委派滚动工作？

why doesn't delegate work for scroll?

提问by Tim

I am trying to use jquery delegate to bind to scroll events.

我正在尝试使用 jquery 委托来绑定滚动事件。

html

html

<div id='parent'>
        <div id='child'>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </div>
</div>

css

css

#parent {
width:200px;
height:200px;
border:2px solid black;
overflow:auto;        
}
#child {
width:300px;
height:300px;
background:red;    
}

javascript

javascript

$('#parent').delegate('#child', 'scroll', function(){
alert(this)
}) 

jsfiddle

提琴手

http://jsfiddle.net/C6DRR/1/

http://jsfiddle.net/C6DRR/1/

Why doesn't it work?

为什么不起作用？

采纳答案by davethecoder

i think this may bind your scroll

我想这可能会绑定你的卷轴

$('#child').live('keyup', function() {
var el = $(this);
if (!el.data("has-scroll")) {
    el.data("has-scroll", true);
    el.scroll(function(){
       //doscrollaction(el);
    });
}
doscrollaction(el);
});

as requested by op:

根据 op 的要求：

i change the css so child overflows and use jquery.scroll and that works, however there is no 'scroll' event like you have for jquery not that i know of anyway, hence the reason why bin, live etc can not be set for scroll and also why your deligate will not work

我更改了 css 以便子级溢出并使用 jquery.scroll 并且可以正常工作，但是没有像 jquery 那样的“滚动”事件，这不是我所知道的，因此无法为滚动设置 bin、live 等的原因还有为什么你的委托不起作用

回答by user1087079

Because scroll event does not bubble. http://www.quirksmode.org/dom/events/scroll.html

因为滚动事件不会冒泡。 http://www.quirksmode.org/dom/events/scroll.html

回答by A. Wolff

why doesn't delegate work for scroll?

为什么不委派滚动工作？

Because scroll event doesn't bubble through the DOM.

因为滚动事件不会在 DOM 中冒泡。

But, on modern browsers (IE>8), you can capturescroll eventto e.g document level or any static container for dynamic element. You have to use javascript addEventListener()method passing trueas useCaptureparameter, jQuery doesn't support capturing phase:

但是，在现代浏览器 (IE>8) 上，您可以将滚动事件捕获到例如文档级别或动态元素的任何静态容器。您必须使用 javascript方法作为参数传递，jQuery 不支持捕获阶段：addEventListener()trueuseCapture

Note:in your example, scrollevent happen to #parentlevel, not #child

注意：在您的示例中，scroll事件发生在#parent级别，而不是#child

document.addEventListener('scroll', function (event) {
    if (event.target.id === 'parent') { // or any other filtering condition        
        console.log('scrolling', event.target);
    }
}, true /*Capture event*/);

-DEMO-

-演示-

For explanation on difference between event capture/propagation, see hereor there.

有关事件捕获/传播之间差异的解释，请参阅此处或此处。

Be aware, a captured event is always fired beforeany other bubbling event of same kind.

请注意，捕获的事件总是在任何其他同类冒泡事件之前触发。