↑ События и обработчики событий в jQuery. | ||||
Урок - Метод jQuery.proxy(). | ||||
← Предыдущий урок Урок - Метод jQuery.on() - назначение обработчиков событий.
|
Следующий урок → Урок - jQuery.ready()
|
Метод jQuery.proxy() возвращает функцию с измененным контекстом this.
Синтаксис метода jQuery.proxy().
Метод jQuery.proxy() может выполнять празличные действия, в зависимости от количества передаваемых аргументов:
- jQuery.proxy( function, context)
- jQuery.proxy( context, name)
- jQuery.proxy( function, context, additionalArguments)
- jQuery.proxy( context, name, additionalArguments)
где
- function - функция, контекст которой должен быть изменен.
- context - объект, на который должен указывать контекст (this).
- name - строка, имя метода чей контекст должен быть изменён (должен быть свойством объекта контекста).
- additionalArguments - любое число аргументов, для передачи в качестве аргументов функции.
Описание метода jQuery.proxy().
Метод jQuery.proxy() полезен для назначения обработчиков событий к элементу, когда контекст указывает на другой элемент. Кроме того, jQuery гарантирует правильное удаление функции назначенной jQuery.proxy(), если она указана с оригинальным контекстом.
Необходимо понимать, что jQuery, при назначении подсистемы, присваивает уникальный идентификатор каждой функции, чтобы отслеживать её, для определения самой функции, которая назначается. Функция в jQuery.proxy() рассматриваются как функции из подсистемы событий, даже когда разные контексты. Чтобы избежать не правильного удаления обработчика, используйте уникальное пространство имен для назначения и удаления обработчиков (например: 'click.myproxy1') вместо указания прокси функции во время назначения.
Начиная с версии jQuery 1.6, любое количество дополнительных аргументов может быть передано в jQuery.proxy() и они будут переданы функции контекст которой был изменен.
Наичная с версии jQuery 1.9, когда контекст является null или не определен, то функция будет вызвана с тем же объектом в качестве контекста, для которого вызвается метод jQuery.proxy(). Это позволяет использовать метод jQuery.proxy() частично применять аргументы функции, без изменения контекста.
Примеры использования метода jQuery.proxy().
Пример 1: Изменить контекст функции связанный с обработчиком click используя "function, contexts". Первый обработчик отключается после первого клика.
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <script> jQuery(function(){ var me = { type: "zombie", test: function(event) { // без использования jQuery.proxy() контекст this должен указывать на элемент события. // что бы получить элемент необходимо использовать event.target var element = event.target; $(element).css("background-color", "red"); // при использовании jQuery.proxy() контекст this меняется. $("#log").append( "From me.test. this type: " + this.type + "<br>" ); // удаляем текущий обработчик $("#test").off("click", this.test); } }; var you = { type: "person", test: function(event) { $("#log").append('From you.test(). this.type: ' + this.type + "<br>" ); } }; /* execute you.test() in the context of the `you` object */ /* no matter where it is called */ /* i.e. the `this` keyword will refer to `you` */ var youClick = $.proxy( you.test, you ); // назначем обработчики для кнопки $("#test") // в этом обработчике, основаном на me.test(), this будет указывать на me. // this.type равен "zombie" // обработчик будет удален после первого клика .on( "click", $.proxy( me.test, me ) ) // в этом обработчике, основаном на you.test(), this будет указывать на you. // т.е. this.type равен "person" .on( "click", youClick ) // в этом обработчике, основаном на you.test(), this будет указывать на me. // т.е. this.type равен "zombie" .on( "click", $.proxy( you.test, me ) ) // в этом обработчике, основаном на you.test(), this будет указывать на элемент к которому прикреплен обработчик. // т.е. this.type равен "button" .on( "click", you.test ) ; }); </script> </head> <body> <p><button type="button" id="test">Test</button></p> <div id="log"></div> </body> </html>
Пример 2: принудительный контекст функции с помощью "context, function name". Отключение обработчика после первого клика.
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> jQuery(function(){ var obj = { name: "John", test: function() { $("#log").append( this.name ); $("#test").off("click", obj.test); } }; $("#test").on( "click", jQuery.proxy( obj, "test" ) ); }); </script> </head> <body> <p><button id="test">Test</button></p> <p id="log"></p> </body> </html>
Пример 3: Изменить контекст функции с вязанный с обработчиком click.
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> jQuery(function(){ var main = { type: "mainType", // Обратите внимание, что событие задано после аргументов one и two test: function(one, two, event) { // после выполнения команды var proxy = jQuery.proxy( main.test, main, first, second ); // контекст this будет указывать на main // аргумент one указывает на first // аргумент two указывает на second jQuery("#log") // выводим информацию о контексте this .append( "this.type: " + this.type + "<br>") // выводим информацию из первого аргумента .append( "one.type: " + one.type + "<br>") // выводим информацию из второго аргумента .append( "two.type: " + two.type + "<br>") // выводим информацию о типе события .append( "event.type: " + event.type + "<br>") // информация о элементе к которому привязано событие .append( "event.target.type: " + event.target.type + "<br>") ; } }; var first = { type: "firstType" }; var second = { // тип "рыб" type: "secondType" }; // первый аргумент - обработчик у которого заменяем контекст this: main.test() // второй аргумент - переменная на которую будет указывать контекст this: main // третий и четвертый аргументы - дполнительные параметры передаваемые в обработчик: first и second var proxy = jQuery.proxy( main.test, main, first, second ); jQuery("#test").on( "click", proxy ); }); </script> </head> <body> <button type="button" id="test">Test</button> <div id="log"></div> </body> </html>