$(...).on()

Навешивает обработчик событий с заданными параметрами на каждый узел текущей FlyNode.

$(...).on(name, [selector], [data], handler, [context])


                                    FlyDomNode: {
                        __constructor: function(context) {
                            var array = fnNodeList.makeDomNodeArray(context);
                            for (var a = 0, al = array.length; a < al; a++) {
                                this[a] = array[a];
                            }
                            this.length = al;
                        },

                        size: function() {
                            return this.length;
                        },

                        get: function(index) {
                            return $.isNumber(index) ? this[index] : [].slice.call(this);
                        },

                        addNode: function(flyNode) {
                            return fnNodeList.changeNodeContext(this, flyNode, function(child, context) {
                                context.indexOf(child) === -1 && context.push(child);
                            });
                        },

                        removeNode: function(flyNode) {
                            return fnNodeList.changeNodeContext(this, flyNode, function(child, context) {
                                var position = context.indexOf(child);
                                if (position !== -1) context.splice(position, 1);
                            });
                        },

                        eq: function(index) {
                            if (index < 0) index = index + this.length;
                            return new this.__self(this[index]);
                        },

                        lt: function(index) {
                            return new this.__self(this.slice(0, index));
                        },

                        gt: function(index) {
                            return new this.__self(this.slice(index));
                        },

                        last: function(selector) {
                            var element = this[this.length - 1];
                            return new this.__self(fnStyle.isMatch(element, selector) ? element : []);
                        },

                        first: function(selector) {
                            var element = this[0];
                            return new this.__self(fnStyle.isMatch(element, selector) ? element : []);
                        },

                        normalize: function() {
                            return fnNodeList.transformNodeContext(this, function(item, context) {
                                if ($.isNode(item)) context.push(item);
                            });
                        },

                        each: function(callback, context) {
                            $.each(this, callback, context);
                            return this;
                        },

                        name: function() {
                            return this[0].tagName.toLowerCase() || null;
                        }
                    }

Помните, что обработчики, назначенные с помощью метода $(...).on() можно убрать только с помощью метода $(...).off().

$(...).on(name, [selector], [data], handler, [context])
Возвращает: FlyNode^[$]

Навешивает обработчик событий с заданными параметрами на каждый узел текущей FlyNode.

name: String^ABC

Названия событий.

selector: String^ABC

Селектор CSS для делегирования события.

data: Object^{}

Дополнительная информация, передаваемая через объект события event.

handler: Function⁽⁾

Обработчик, вызываемый каждый раз при появлении события.

context: Any^*

Контекст выполнения обработчика handler.

Аргумент name является строкой с названиями событий, которые будут обрабатываться функцией handler. Эти названия должны быть разделены пробелом. При использовании пространств имён разделителем является точка .. Например, параметр name может иметь следующий вид: click.my.name.space mouseenter.namespace mouseover.

Аргумент selector является CSS селектором, который будет использован для делегирования событий, что является хорошей практикой в клиентской web-разработке. Если селектор отсутствует, обработчик будет обрабатывать все события, произошедшие на DOM узле.

Аргумент data является объектом, который доступен через свойство event.data, где event - объект события (первый аргумент обработчика handler). При использовании метода $(...).emit() объект data может быть изменён.

Аргумент handler является функцией, которая будет вызвана всякий раз при возникновении событий, удовлетворяющим заданным условиям. Первым аргументом handler всегда является event - объект события. Через него можно получить много полезной информации (читайте об этом ниже).

Наконец, аргумент context задаёт контекст исполнения обработчика. По умолчанию он совпадает со свойством event.flyTarget, в которое записывается элемент, инициировавший вызов обработчика.

Будьте внимательны! Fly.js всегда использует для обработки событий делегирование. Это значит, что на самом деле все обработчики вызываются искусственно одной глобальной функцией. Для удобства программистов было бы логично в таком случае переопределить свойства event.target и event.currentTarget, но это невозможно, поэтому выставляются новые свойства event.flyTarget (инициатор, вызывающий обработчик события) и event.delegateTarget (узел, делегирующий события).

Если прошлый абзац не дал Вам понимания работы событий во Fly.js, то нужно просто использовать вместо свойства event.target другое свойство event.flyTarget.

Вместо событий mouseover и mouseout можно использовать mouseenter и mouseleave, однако между ними есть разница, которую следует учитывать.

Пример: Назначение обработчика событий.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <title>Fly.js - $(...).on()</title>

        <script src="/scripts/fly.js"></script>
    </head>
    <body>
        <button>Click me!</button>
        <b></b>

        <script>
            $('button').on('click', function() {
                this.html('Current timestamp: ' + $.time().getTime());
            }, $('b'));
        </script>
    </body>
</html>

Пример: Делегирование событий.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <title>Fly.js - $(...).table()</title>

        <script src="/scripts/fly.js"></script>
    </head>
    <body>
        <div>
            <button id="first">Click me!</button>
            <button id="second">Click me!</button>
            <button id="third">Click me!</button>
        </div>
        <b></b>

        <script>
            $('div').on('click', 'button', function(e) {
                var id = $(e.flyTarget).attr('id');
                $('b').html('I am the ' + id + ' button!');
            });
        </script>
    </body>
</html>

$(...).on()

$(...).on(name, [selector], [data], handler, [context])Возвращает: FlyNode [$]

name: String ABC

selector: String ABC

data: Object {}

handler: Function ()

context: Any *