Можно ли прослушать пользовательское событие прототипа из jquery? - PullRequest
0 голосов
/ 02 июня 2018

Если я запускаю пользовательское событие в 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>

1 Ответ

0 голосов
/ 02 июня 2018

Можно, но вы не используете имя пользовательского события.Вы бы установили прослушиватель событий для события 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);
});

Demo

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...