모바일 웹 앱에 xui js를 사용하고 있습니다. Xui js는 jquery $("#selector").live()과 같은 실시간 이벤트를 지원하지 않습니다. 내가 jquery 사는 것을 대략적으로 쓰고 싶습니다.Xui js jquery 생방송 이벤트가
jquery는 이벤트 위임을 어떻게 처리합니까?
은 브라우저 이벤트 "아래에서 위로"거품을 할 수 있다는 사실을 사용한다, 시간 모든 이벤트 위임 시스템으로맥
당신은 당신이 처리하고합니다 (delegate 않습니다로 을)이 결합 할 요소의 부모를 찾아 더 나은 (을 수행 live로 )를 document에 이벤트 처리를 설정하거나 할 수 있습니다.
다음은 jquery의 delegate 기능을 시뮬레이트하는 플러그인입니다.
xui.extend({
is: function (selector) {
var matchedNodes = x$(selector), i=0;
for (i; i<matchedNodes.length; i++)
if (this[0] == matchedNodes[i]) return true;
return false;
},
delegate: function(selector, event, handler){
this.on(event, function(evt){
var elem = evt.target;
if (x$(elem).is(selector)){
handler.apply(x$(elem), arguments);
}
});
}
});
이 자신의 자손 li 요소에 의해 시작 click 이벤트를 처리 할 ul 요소에 리스너를 바인딩
x$('ul').delegate('li','click', function(){ this.attr('style','color:red'); });
사용.
내가 아니라 바로 아이가 클릭 된 있는지 볼 필요가 ... 개비의 대답에 확장하려면 http://jsfiddle.net/gaby/vhsPU/
주셔서 감사합니다. 우리가
<body>
<div>
<span>foobar 1</span>
<span>foobar 2</span>
<span>foobar 3</span>
</div>
</body>
같은 구조를 가지고 누군가가 내부 foobar 범위를 클릭하면 즉, 의미, 어떤 이벤트 핸들러가 해당 클릭 이벤트의 범위에 바인딩하는 경우 브라우저를 확인합니다. 그렇다면 실행하십시오. 이제 그 사건은 그 부모 (div)에게 "거품을 낸다". 다시 브라우저는 클릭 이벤트 처리기가 바인딩되어 있는지 확인한 후 실행합니다 (document.documentElement까지).
위의 예에서는 각 <span> 요소에 대해 세 개의 이벤트 처리기를 바인딩해야합니다. 위에서 설명한 개념을 알면 하나의 이벤트 핸들러를 부모 노드 <div>에 바인딩하고 event object 내에서 target을 확인할 수 있습니다. 이 목표는 항상 이벤트가 발생한 원래 요소입니다.
몇 가지 더 알아야 할 것이 있습니다. 예를 들어 이벤트의 전파를 중지하여 이벤트가 더 이상 버블 링되지 않도록 할 수 있습니다. 이는 이벤트 객체의 메소드 인 .stopPropagation()을 호출하여 수행 할 수 있습니다.
에서
데모 (는 빨간색에 클릭 요소의 색상을 변경합니다). jQuery에서와 같이 진정한 위임자가 더 많아 지도록 확장 될 수 있습니다. 그러나이 코드는 내 필요에 충분했습니다.
xui.extend({
is: function (selector) {
var matchedNodes = x$(selector), i=0;
for (i; i<matchedNodes.length; i++)
if (this[0] == matchedNodes[i]) return true;
return false;
},
delegate: function(selector, event, handler){
this.on(event, function(evt){
var elem = evt.target;
if (x$(elem).is(selector)){
handler.apply(x$(elem), arguments);
} else{
if (x$(elem.parentElement).is(selector)){
handler.apply(x$(elem.parentElement), arguments);
}
}
});
}
});
나는 매우 비슷한 것을 시도해 줘서 고마워. www.webpoint-server.com/xui – ianmac