是否可以收听来自 jquery 的自定义原型事件?
Is it possible to listen to a custom prototype event from jquery?
如果我在 prototype.js 中触发自定义事件,我可以在 jquery 中监听该事件吗?
我试过了,但没用
$.noConflict();
$('target').observe('custom:event', function(){
console.log("prototype method");
});
jQuery("#target").on("custom:event",function(){
console.log("jquery method");
});
$('target').fire('custom:event');
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target"></div>
可以,但不要使用自定义事件的名称。您将为事件 dataavailable
设置一个事件侦听器,因为这是 Prototype 设置要经历的任何自定义事件的监听器。
if (isCustomEvent(eventName))
observeCustomEvent(element, eventName, responder);
else
observeStandardEvent(element, eventName, responder);
function observeCustomEvent(element, eventName, responder) {
if (element.addEventListener) {
element.addEventListener('dataavailable', responder, false);
} else {
// We observe two IE-proprietarty events: one for custom events that
// bubble and one for custom events that do not bubble.
element.attachEvent('ondataavailable', responder);
element.attachEvent('onlosecapture', responder);
}
}
所以要监听 Prototype 事件,请执行以下操作:
jQuery("#target").on("dataavailable",function(e){
if(e.originalEvent.eventName == "custom:event"){
doWhatever();
}
//Or even do a trigger through jQuery by passing the
//event target and event name
//this will allow you to just set events like you were
//with jQuery and not need a bunch of if statements
jQuery(e.target).trigger(e.originalEvent.eventName);
});
演示
jQuery.noConflict();
var protoTarget = $('target');
var jQueryTarget = jQuery('#target');
protoTarget.observe('custom:event', function(e){
protoTarget.append('Prototype callback');
});
jQuery(document).on("dataavailable",function(e){
jQuery(e.target).trigger(e.originalEvent.eventName);
});
jQueryTarget.on("custom:event",function(){
jQueryTarget.append("<br>jQuery callback");
});
$('target').fire('custom:event');
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target"></div>
如果我在 prototype.js 中触发自定义事件,我可以在 jquery 中监听该事件吗?
我试过了,但没用
$.noConflict();
$('target').observe('custom:event', function(){
console.log("prototype method");
});
jQuery("#target").on("custom:event",function(){
console.log("jquery method");
});
$('target').fire('custom:event');
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target"></div>
可以,但不要使用自定义事件的名称。您将为事件 dataavailable
设置一个事件侦听器,因为这是 Prototype 设置要经历的任何自定义事件的监听器。
if (isCustomEvent(eventName)) observeCustomEvent(element, eventName, responder); else observeStandardEvent(element, eventName, responder);
function observeCustomEvent(element, eventName, responder) { if (element.addEventListener) { element.addEventListener('dataavailable', responder, false); } else { // We observe two IE-proprietarty events: one for custom events that // bubble and one for custom events that do not bubble. element.attachEvent('ondataavailable', responder); element.attachEvent('onlosecapture', responder); } }
所以要监听 Prototype 事件,请执行以下操作:
jQuery("#target").on("dataavailable",function(e){
if(e.originalEvent.eventName == "custom:event"){
doWhatever();
}
//Or even do a trigger through jQuery by passing the
//event target and event name
//this will allow you to just set events like you were
//with jQuery and not need a bunch of if statements
jQuery(e.target).trigger(e.originalEvent.eventName);
});
演示
jQuery.noConflict();
var protoTarget = $('target');
var jQueryTarget = jQuery('#target');
protoTarget.observe('custom:event', function(e){
protoTarget.append('Prototype callback');
});
jQuery(document).on("dataavailable",function(e){
jQuery(e.target).trigger(e.originalEvent.eventName);
});
jQueryTarget.on("custom:event",function(){
jQueryTarget.append("<br>jQuery callback");
});
$('target').fire('custom:event');
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target"></div>