Есть ли нативный аналог .on() в JavaScript?

Question

[Хазрат Гаджикеримов]

В интернете не нашел информацию об этом, вообщем с помощью Apache Cordova разрабатываем небольшое мобильное приложение. Не хотим подключить всякие библиотеки (jQuery Mobile и другие), что бы увеличить производительность приложения.

1. Теперь же столкнулся с задачей, установить обработчик на набор элементов найденных с помощью document.querySelectorAll('.class'), addEventListener() ставит обработчик только на первый элемент игнорирую остальных, как поставить на все элементы обработчик? неужели перебором элементов и навешивание на них? подскажите пожалуйста как этот процесс сделан в jQuery.

2. Так же необходим аналог следующего кода:

$('body').on('click', '.menu', function(event){
    /* Код */
})

Т.е установить обработчик на BODY и что бы он реагировал на подгруженные Ajax'ом элементы.

Заранее благодарю.

Answer 1

[Ivanq]

1. Только так - например, для новых браузеров:

document.querySelectorAll('.class').forEach(function(elem) {
  elem.addEventListener("click", my_cool_function);
});
// Для старых:
var elems = document.querySelectorAll('.class');
for(var i=0;i<elems.length;i++) {
  elems[i].addEventListener("click", my_cool_function);
}

2.

document.querySelectorAll("body").addEventListener("click", function(event) {
  if(!event.target.classList.contains("menu")) return;
  /* Code */
});

Answer 2

[Денис Малиночкин]

Вы можете использовать «делегирование событий», основанное на всплытии события - когда вместо назначения события для всех элементов вы назначаете его лишь на их общего предка, а дальше проверяете условием. В этом случае jQuery и его аналоги дают более удобный синтаксис.

Статья на русском: Делегирование событий
В блоге DWB: How JavaScript Event Delegation Works

Answer 3

[Александр Аксентьев]

jQuery.fn.extend({

	on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
		var type, origFn;

		// Types can be a map of types/handlers
		if ( typeof types === "object" ) {
			// ( types-Object, selector, data )
			if ( typeof selector !== "string" ) {
				// ( types-Object, data )
				data = data || selector;
				selector = undefined;
			}
			for ( type in types ) {
				this.on( type, selector, data, types[ type ], one );
			}
			return this;
		}

		if ( data == null && fn == null ) {
			// ( types, fn )
			fn = selector;
			data = selector = undefined;
		} else if ( fn == null ) {
			if ( typeof selector === "string" ) {
				// ( types, selector, fn )
				fn = data;
				data = undefined;
			} else {
				// ( types, data, fn )
				fn = data;
				data = selector;
				selector = undefined;
			}
		}
		if ( fn === false ) {
			fn = returnFalse;
		} else if ( !fn ) {
			return this;
		}

		if ( one === 1 ) {
			origFn = fn;
			fn = function( event ) {
				// Can use an empty set, since event contains the info
				jQuery().off( event );
				return origFn.apply( this, arguments );
			};
			// Use same guid so caller can remove using origFn
			fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
		}
		return this.each( function() {
			jQuery.event.add( this, types, fn, data, selector );
		});
	},
	one: function( types, selector, data, fn ) {
		return this.on( types, selector, data, fn, 1 );
	},
	off: function( types, selector, fn ) {
		var handleObj, type;
		if ( types && types.preventDefault && types.handleObj ) {
			// ( event )  dispatched jQuery.Event
			handleObj = types.handleObj;
			jQuery( types.delegateTarget ).off(
				handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
				handleObj.selector,
				handleObj.handler
			);
			return this;
		}
		if ( typeof types === "object" ) {
			// ( types-object [, selector] )
			for ( type in types ) {
				this.off( type, selector, types[ type ] );
			}
			return this;
		}
		if ( selector === false || typeof selector === "function" ) {
			// ( types [, fn] )
			fn = selector;
			selector = undefined;
		}
		if ( fn === false ) {
			fn = returnFalse;
		}
		return this.each(function() {
			jQuery.event.remove( this, types, fn, selector );
		});
	},

	trigger: function( type, data ) {
		return this.each(function() {
			jQuery.event.trigger( type, data, this );
		});
	},
	triggerHandler: function( type, data ) {
		var elem = this[0];
		if ( elem ) {
			return jQuery.event.trigger( type, data, elem, true );
		}
	}
});