Можно ли вызвать 2 события одновременно, используя JavaScript?

Question

Я пытаюсь вызвать 2 события одновременно, нажав ссылку «Прошлые местоположения» на правой стороне навигации, чтобы перейти на нижнюю страницу к разделу «Прошлые местоположения» и направить карту изображения по умолчанию (карта Индианаполиса)) в то же время.

В настоящее время он просто переходит на нижнюю часть страницы, но карта изображений исчезает - просто ничего не отображается в заполнителе карты.

HTML - две другие маршруты рабочих ссылоккарты изображений

<li class="j_linkHover">
  <a href="#mapCO-asp" class="j_linkThumb">Aspen, CO</a>
  <p class="j_accordion-panel"><span class="j_dateLocation">Central Regions<br>May 29 - June 3</span></p>
</li>

<li class="j_linkHover">
  <a href="#mapOR" class="j_linkThumb">Salem, OR</a>
  <p class="j_accordion-panel"><span class="j_dateLocation">Oregon School for the Deaf,<br>Washington School for the Deaf, <br> Non-Profit Community Event<br>June 3 - 6</span></p>
</li>

<li  class="j_linkHover">
  <a href="javascript: document.body.scrollIntoView(false);" id="location-color" class="j_linkThumb  is-active">Past Locations</a> <--- jumps to the bottom, but cannot route image map at the same time
</li>

JavaScript - это маршруты изображений карт в заполнителе

$(document).ready(function(){

  //Default Action
  $(".mapActive").css({'display':'none'});
  $("ul.j_linkLocation li#mapIN").addClass("active").show(); //Activate first tab
  $(".mapActive#mapIN").show(); //Show first tab content

  //On Click Event
  $("ul.j_linkLocation li").click(function() {
    $("ul.j_linkLocation li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".mapActive").css({'display':'none'}); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn('fast'); //Fade in the active content
    return false;
  });

});

Answer 1

Да ... С jQuery, которая является библиотекой JavaScript ... Вы можете присоединить несколько event к элементу.

$([element selector]).on([events... space separated], [Delegated selector], function([arg]){
  //  Whatever to execute
});

Более конкретный пример (полезно для синтаксиса):

$("#myDiv").on("click mouseenter mouseleave tap touchstart touchend", ".innerBox", function(event){
  //  Whatever to execute
});

Прочтите об обработчике событий jQuery .

А вот самый полный список событий Я знаю.

Extraчтение будет о делегировании события ...

Answer 2

Для повторного использования той же функциональности определите ее в функции:

function routeImages (elem) {
  $("ul.j_linkLocation li").removeClass("active"); //Remove any "active" class
    $(elem).addClass("active"); //Add "active" class to selected tab
    $(".mapActive").css({'display':'none'}); //Hide all tab content
    var activeTab = $(elem).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn('fast'); //Fade in the active content
} 

Так что теперь ваш старый код становится таким:

//On Click Event
  $("ul.j_linkLocation li").click(function() {
    routeImages($(this));
  });

Затем добавьте прослушиватель щелчка для спискапункт:

$('#location-color').parent('li').on('click', function() {
  //the first event
  $('body').scrollIntoView(false);

  //call the function for routing images
  routeImages($('ul.j_linkLocation li:first'));
});