是否可以从 jquery 监听自定义原型事件？答案

【问题标题】：Is it possible to listen to a custom prototype event from jquery?是否可以从 jquery 监听自定义原型事件？
【发布时间】：2018-11-12 04:40:10
【问题描述】：

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

【问题讨论】：

标签： javascript jquery prototypejs

【解决方案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>

【讨论】：