javascript - 是否可以从 jquery 监听自定义原型(prototype)事件？

Question

如果我在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>

Answer 1

可以，但不能使用自定义事件的名称。您可以为 dataavailable 事件设置一个事件监听器，因为 Prototype 设置任何自定义事件都要经过该监听器。

https://github.com/sstephenson/prototype/blob/560bb59414fc9343ce85429b91b1e1b82fdc6812/src/prototype/dom/event.js#L635

if (isCustomEvent(eventName))
  observeCustomEvent(element, eventName, responder);
else
  observeStandardEvent(element, eventName, responder);

https://github.com/sstephenson/prototype/blob/560bb59414fc9343ce85429b91b1e1b82fdc6812/src/prototype/dom/event.js#L654

 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>