javascript - ある要素が別の要素のすべてのイベントを継承できるようにする

Question

たとえば、A と B の 2 つのリンクがあるとします。ユーザーが A にカーソルを合わせると、B のホバー イベントがトリガーされます。onlick、mouseover などの他のすべてのイベントについても同様です。

次のように手動でイベントを追加するつもりはありません。

$('a#A').click(function(){
  $('a#B').trigger('click');
});

ありがとう！

Answer 1

次のように、複数のイベントでこれを行うことができます。

$('a#A').on('click mouseenter mouseleave', function(e){
  $('a#B').trigger(e.type);
});

これにより、 にバインドされた指定されたイベントのいずれかがトリガーされます#B。

$("#B").on({
    mouseenter: function() {
        this.style.color = "#B4B4B4";
    },
    mouseleave: function() {
        this.style.color = "#000";
    }

});

フィドル

これを非常に非効率にするために、バインドされたすべてのイベントを取得して、次のよう#Bにトリガーします#A。

$("#B").on({
    mouseenter: function() {
        this.style.color = "#B4B4B4";
    },
    mouseleave: function() {
        this.style.color = "#000";
    }

});

var events = [];
$.each($._data($("#B").get(0), "events"), function(i, e) {
    events.push(i); //gets all events currently bound to #B
});

$('a#A').on(events.join(' '), function(e){  //and triggers them with #A
  $('a#B').trigger(e.type);
});

フィドル

Answer 2

$('linkDiv').each( function() {
  $('a#A').click( function() {
    $('a#B').trigger('click');}
  });

foreach / each（）jQuery関数を使用して、これら2つのイベントをEVERYで実行するか、これを実行するかを指定し<div class="linkDiv">ます<a class="linkDiv">。あなたのページのリンクは次のようになります。

<div class="linkDiv">
  <a class="link" id="A" href="foo.html">Foo</a>
  <a class="link" id="B" href="fap.html">Fap</a>
</div>