Использование страницы мониторинга с помощью jQuery/javascript

Question

Я планирую добавить некоторые основные пользовательские использования нескольких html-страниц. Для этого я хочу представить как можно меньше изменений кода на существующие страницы. Вот мой подход:

Импорт .js файл, который содержит операции для добавления слушателей на страницу и когда событие вызывается затем вызвать функцию:

<title>myTitle</title> 
<input id="click" type="submit" value="click"/> 
<input id="test" type="textbox" value="test"/> 
<a id="href">href</a> 

    $('a').click(function(e) { 
     var linker = $(this).attr('id'); 
     var title = $(document).find("title").text(); 
     var url = window.location.href; 
    sendData(linker+'\n'+title+'\n'+url);  
    }); 
    $('input').click(function(e) { 
     var linker = $(this).attr('id'); 
     var title = $(document).find("title").text(); 
     var url = window.location.href; 
     sendData(linker+'\n'+title+'\n'+url);  
    }); 

function sendData(dataToSend) { 
    console.log('Sending data \n '+dataToSend) 
} 

сейчас SendData просто фиктивная функция, но я планируйте изменить это, чтобы отправить запрос ajax на конечную точку сервера с помощью значения dataToSend.

Есть альтернативный способ отслеживания того, что пользователь нажимает, а не код a теги и input теги? Могут быть другие типы ввода, о которых я не знаю, которые могут быть вызваны, которые не будут отслеживаться?

скрипку:

http://jsfiddle.net/g2Rxc/167/

Answer 1

Потому что click события могут быть добавлены после вы импортировали код слушателя, вы захотите использовать делегирование событий в элементе document.

Поскольку вы работаете JQuery V 1.6, вы должны будете использовать метод delegate:

$(document).delegate('*', 'click', function(e) { 
    var linker = $(this).attr('id'), 
     title = $(document).find("title").text(), 
     url = window.location.href; 

    sendData(linker+'\n'+title+'\n'+url);  
    return false; 
}); 

Fiddle 1

Более поздние версии JQuery обрабатывать делегирование событий с использованием метода on :

$(document).on('click', '*', function(e) { 
    var linker = $(this).attr('id'), 
     title = $(document).find("title").text(), 
     url = window.location.href; 

    sendData(linker+'\n'+title+'\n'+url);  
    return false; 
}); 

Fiddle 2

Answer 2

Я вижу, что ваши функции нажмите делать то же самое, так что вы можете вложить все элементы в одном случае, нажмите:

 $('a,input,textare,..,..').click(function(e) { 
      var linker = $(this).attr('id'); 
      var title = $(document).find("title").text(); 
      var url = window.location.href; 
     sendData(linker+'\n'+title+'\n'+url);  
     }); 

Answer 3

Try:

$("body").find("*").on("click",function()... 

Answer 4

Вам просто нужно запланировать, что вы хотите отследить, прежде чем писать код. Делая это, вы обнаружите, какие элементы и события вы действительно хотите отслеживать. Имея это в виду, вы будете писать что-то вроде:

$('everyElementSeparatedByComma').on('everyEventSeparatedByComma', function(){ 
... 
}); 

Реальный пример:

$('a, input, textarea, form').on('click, change, keypress, submit', function(){ 
    ... 
    });