Javascript простая привязка - PullRequest
Новая
       5

Javascript простая привязка

0 голосов
/ 04 мая 2011

Я слышал, что привязка JavaScript - более эффективный способ решения этой проблемы.Я посмотрел на несколько разных примеров, но только запутался.

У меня есть ссылка с событием onclick на моей странице, которое вызывает функцию ajax.

<a href="#" 
   title="#" 
   onclick="ajax('links to a page','div_name','loading...');showdiv('div_name');">
  my link</a>

Работает нормально, однако я хотел бы узнать, как связать это (или любое событие onclick).Из того, что я понимаю, благодаря связыванию событие onclick уже будет загружаться при загрузке страницы, что, возможно, сделает пользовательский опыт лучше.Пожалуйста, не стесняйтесь поправлять меня, если я ошибаюсь.Любая помощь будет оценена.

Ответы [ 3 ]

0 голосов
/ 04 мая 2011

Добавьте идентификатор к тегу a: 

<a href="#" id="linkID" title="#">my link</a>

В javascript вы можете привязать функцию к событию следующим образом: 

document.getElementById("linkID").onclick = function() {
    ajax('links to a page','div_name','loading...');
    showdiv('div_name');
}
0 голосов
/ 04 мая 2011

Когда люди отсылают вас к bind в JavaScript в этом контексте, они, скорее всего, ссылаются на функцию .bind() jQuery, а не Function.bind в ECMAScript 5 (ECMAScript - это JavaScript ... по существу).

Как подсказывает @morgancodes в комментариях, концепция, которую вы на самом деле ищете, - это делегирование событий. Если вы хотите узнать, как сделать это в JavaScript, вам нужно взглянуть на PPK DOM Events и узнать о нормализации объекта события в IE. Это много работы, но в итоге оно того стоит.

С другой стороны, если вы хотите обновить код сейчас, вы можете использовать одну из множества библиотек JavaScript, чтобы справиться с нормализацией для вас:

Например, в jQuery вы можете привязать событие клика к вашей ссылке любым из следующих способов: 

// Bind the event directly to the element.
// Advantages: clear, quick (to code)
// Disadvantages: not good for dynamically added links 
//                or in cases where you have a lot of links.
$("your_link_selector").click(function() { /* do your stuff here */ });
// Alternate:
$("your_link_selector").bind("click",function() { /* do your stuff here */ });

// Bind the event to the body and fire it when the selector matches.
// Advantages: works with dynamic content, lots of links.
// Disadvantages: slower than delegate when you have lots of live events.
$("your_link_selector").live("click",function() { /* do your stuff here */ });

// Bind the event to the selected container elements 
// Fire the event when the event_selector matches.
// Advantages: works with dynamic content, lots of links.
// Disadvantages: There are disadvantages? ;-)
$("your_container_selector").delegate("your_link_selector", 
                                      "click", 
                                      function() { /* do your stuff here */ });

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

0 голосов
/ 04 мая 2011

Ну, вы могли бы использовать JQuery для этого. Или вы можете сделать что-то вроде этого: 

window.onload = function() {

   document.getElementById('yourlinkid').onclick = function() {
    ajax('links to a page... // add rest of your code
    }

}

Вам необходимо добавить атрибут id к якору. Например: 

<a href="#" 
   title="#" 
   id="yourlinkid"
  my link</a>

Или воспользуйтесь другим методом, чтобы найти его. Если вы добавляете в качестве внешнего скрипта, то событие window.onload не нужно, я думаю, но если вы включаете в HEAD вашего документа, это обязательно. Я думаю, что обязательный подход - гораздо более аккуратный способ сделать это.

...