Зачем использовать метод on() при назначении событий в джейквери?

369
05 января 2017, 08:01

Какие преимущества дает назначение событий через универсальный метод on() перед назначением событий, например, методами click(), hover(), keydown()?

Answer 1

Данный метод не дает никаких преимуществ, просто потому, что все перечисленные методы внутри используют этот метод:

jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup contextmenu" ).split( " " ),
    function( i, name ) {
    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
} );

Правда, можно отметить, что при создании используются не все параметры метода on. Подробнее прочитать о данном методе можно в справке.

Не используется параметр selector, позволяющий указать от какого из вложенных элементов ловить событие. Если null или пропущен, события будут ловиться, только на элементах из набора.

Для сравнения:

Одинаковое поведение

$(selector).click(function(){...});
$(selector).on('click',null,function(){...});

Все еще одинаковое поведение

$('parent child').click(function(){...});
$('parent child').on('click',null,function(){...});

Поведение будет отличаться, так как сам обработчик навешан на родителя, поэтому не важно в какой момент был добавлен элемент child по которому кликнули.

$('parent').on('click','child',function(){...});
Answer 2

Например есть структура

<div id="container">
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
</div>

задача - ловить клики на элементы

можно просто

$('.elem').click(f)

но тогда создается МНОГО хендлеров

вместо этого лучше сделать вот так

$('#container').on('click', '.elem', f)

в этом случае хендлер создается только один допольнительно ловиться добавленные ПОСЛЕ подключения хендлера элементы, типа live

READ ALSO
Ошибка : illegal break statement

Ошибка : illegal break statement

Вот так должно работать

402
Сжатие фото на javascript

Сжатие фото на javascript

Как сжать фото и после отправить его на сервер?

313
Google extension parser [требует правки]

Google extension parser [требует правки]

Please help me!!! Can you write me what do rows, from 1 to end

273