Можно ли добавить функцию конкретному элементу в html, как к примеру событие onclick?

Question

[Василий Хрягин]

<div class="main-foto" "zoom()"></div>

Comments

[Stockholm Syndrome]

что значит "добавить функцию элементу"? когда она будет выполняться? зачем?

[Василий Хрягин]

Значит: атрибутом можно добавить скрипт? Чтобы zoom() (функция отдельного фреймворка, который я добавлял только на одной странице) не выдавала ошибку на других страницах.

[Никита Колесников]

Василий Хрягин, а при каком условии скрипт срабатывает?

[Rustam Bainazarov]

Василий Хрягин, это что за синтаксис такой вообще?
<div class="main-foto" "zoom()"></div>

Ну сделайте, например, data-атрибут и к нему привяжите нужную функцию.
<div data-function></div>

Опишите конкретнее, что вам нужно сделать, какое действие и какой триггер.

[Василий Хрягин]

/*!
	Zoom 1.7.21
	license: MIT
	http://www.jacklmoore.com/zoom
*/
(function ($) {
	var defaults = {
		url: false,
		callback: false,
		target: false,
		duration: 120,
		on: 'mouseover', // other options: grab, click, toggle
		touch: true, // enables a touch fallback
		onZoomIn: false,
		onZoomOut: false,
		magnify: 1
	};

	// Core Zoom Logic, independent of event listeners.
	$.zoom = function(target, source, img, magnify) {
		var targetHeight,
			targetWidth,
			sourceHeight,
			sourceWidth,
			xRatio,
			yRatio,
			offset,
			$target = $(target),
			position = $target.css('position'),
			$source = $(source);

		// The parent element needs positioning so that the zoomed element can be correctly positioned within.
		target.style.position = /(absolute|fixed)/.test(position) ? position : 'relative';
		target.style.overflow = 'hidden';
		img.style.width = img.style.height = '';

		$(img)
			.addClass('zoomImg')
			.css({
				position: 'absolute',
				top: 0,
				left: 0,
				opacity: 0,
				width: img.width * magnify,
				height: img.height * magnify,
				border: 'none',
				maxWidth: 'none',
				maxHeight: 'none'
			})
			.appendTo(target);

		return {
			init: function() {
				targetWidth = $target.outerWidth();
				targetHeight = $target.outerHeight();

				if (source === target) {
					sourceWidth = targetWidth;
					sourceHeight = targetHeight;
				} else {
					sourceWidth = $source.outerWidth();
					sourceHeight = $source.outerHeight();
				}

				xRatio = (img.width - targetWidth) / sourceWidth;
				yRatio = (img.height - targetHeight) / sourceHeight;

				offset = $source.offset();
			},
			move: function (e) {
				var left = (e.pageX - offset.left),
					top = (e.pageY - offset.top);

				top = Math.max(Math.min(top, sourceHeight), 0);
				left = Math.max(Math.min(left, sourceWidth), 0);

				img.style.left = (left * -xRatio) + 'px';
				img.style.top = (top * -yRatio) + 'px';
			}
		};
	};

	$.fn.zoom = function (options) {
		return this.each(function () {
			var
			settings = $.extend({}, defaults, options || {}),
			//target will display the zoomed image
			target = settings.target && $(settings.target)[0] || this,
			//source will provide zoom location info (thumbnail)
			source = this,
			$source = $(source),
			img = document.createElement('img'),
			$img = $(img),
			mousemove = 'mousemove.zoom',
			clicked = false,
			touched = false;

			// If a url wasn't specified, look for an image element.
			if (!settings.url) {
				var srcElement = source.querySelector('img');
				if (srcElement) {
					settings.url = srcElement.getAttribute('data-src') || srcElement.currentSrc || srcElement.src;
				}
				if (!settings.url) {
					return;
				}
			}

			$source.one('zoom.destroy', function(position, overflow){
				$source.off(".zoom");
				target.style.position = position;
				target.style.overflow = overflow;
				img.onload = null;
				$img.remove();
			}.bind(this, target.style.position, target.style.overflow));

			img.onload = function () {
				var zoom = $.zoom(target, source, img, settings.magnify);

				function start(e) {
					zoom.init();
					zoom.move(e);

					// Skip the fade-in for IE8 and lower since it chokes on fading-in
					// and changing position based on mousemovement at the same time.
					$img.stop()
					.fadeTo($.support.opacity ? settings.duration : 0, 1, $.isFunction(settings.onZoomIn) ? settings.onZoomIn.call(img) : false);
				}

				function stop() {
					$img.stop()
					.fadeTo(settings.duration, 0, $.isFunction(settings.onZoomOut) ? settings.onZoomOut.call(img) : false);
				}

				// Mouse events
				if (settings.on === 'grab') {
					$source
						.on('mousedown.zoom',
							function (e) {
								if (e.which === 1) {
									$(document).one('mouseup.zoom',
										function () {
											stop();

											$(document).off(mousemove, zoom.move);
										}
									);

									start(e);

									$(document).on(mousemove, zoom.move);

									e.preventDefault();
								}
							}
						);
				} else if (settings.on === 'click') {
					$source.on('click.zoom',
						function (e) {
							if (clicked) {
								// bubble the event up to the document to trigger the unbind.
								return;
							} else {
								clicked = true;
								start(e);
								$(document).on(mousemove, zoom.move);
								$(document).one('click.zoom',
									function () {
										stop();
										clicked = false;
										$(document).off(mousemove, zoom.move);
									}
								);
								return false;
							}
						}
					);
				} else if (settings.on === 'toggle') {
					$source.on('click.zoom',
						function (e) {
							if (clicked) {
								stop();
							} else {
								start(e);
							}
							clicked = !clicked;
						}
					);
				} else if (settings.on === 'mouseover') {
					zoom.init(); // Preemptively call init because IE7 will fire the mousemove handler before the hover handler.

					$source
						.on('mouseenter.zoom', start)
						.on('mouseleave.zoom', stop)
						.on(mousemove, zoom.move);
				}

				// Touch fallback
				if (settings.touch) {
					$source
						.on('touchstart.zoom', function (e) {
							e.preventDefault();
							if (touched) {
								touched = false;
								stop();
							} else {
								touched = true;
								start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
							}
						})
						.on('touchmove.zoom', function (e) {
							e.preventDefault();
							zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
						})
						.on('touchend.zoom', function (e) {
							e.preventDefault();
							if (touched) {
								touched = false;
								stop();
							}
						});
				}
				
				if ($.isFunction(settings.callback)) {
					settings.callback.call(img);
				}
			};

			img.setAttribute('role', 'presentation');
			img.alt = '';
			img.src = settings.url;
		});
	};

	$.fn.zoom.defaults = defaults;
}(window.jQuery));

[Василий Хрягин]

Рустам Байназаров, это скрипт зумирующий в области картинки, получается что при наведении эта функция работает, но mouseover не работает. Я код этого скрипта скинул

Answer 1

[zylkov]

Во-первых кажется ваш тег не правильный. Во-вторых прочитайте что такое события на Dom элементах . Да и вообще что такое DOM

Comments

[Василий Хрягин]

ничего из этого не дало мне ответ на вопрос)

[zylkov]

Василий Хрягин, Либо вы не поняли, либо у вашего вопроса не достаточно информации и вы хотите совсем другое

Answer 2

[Сергей c0re]

Смотрите ссылку на описание - jQuery Zoom в начальных комментариях скрипта.

там перечислены настройки, в таблице внизу, из чего следует, что вызывать надо примерно так:

$(document).ready(function(){
  $('.main-foto').zoom({url: 'photo-big.jpg', on: 'click'});
});

PS: но это все jQuery и его обертки, а про события и DOM все же следует почитать (ИМХО).

Comments

[Василий Хрягин]

чего я не знаю про dom? Это просто html разметка, вложенность тегов. Вот все определение dom. Читал я статьи, и не понимаю зачем мне советовать прочитать это. А события это манипуляция мышкой с каким-то элементом на странице

[Сергей c0re]

Василий Хрягин, а ну понятно, тогда ладно )

[Сергей c0re]

Василий Хрягин, так такой вариант работает или нет?

$(document).ready(function(){
  $('.main-foto').zoom({url: 'photo-big.jpg', on: 'click'});
});

[Василий Хрягин]

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

<div class="main-foto" function="zoom({url: 'photo-big.jpg', on: 'click'})"></div>

[Сергей c0re]

Василий Хрягин, нет такого аттрибута, по крайней мере в нативном HTML, в смысле можно написать какие угодно аттрибуты и повесить скрипт обрабатывающий их соответственно.
кроме того непонятно как они должны отрабатывать эти скрипты?

Но есть стандартные аттрибуты, которые отрабатывают по событиям, такие как:
onclick – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
oncontextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
onmouseover / onmouseout – когда мышь наводится на / покидает элемент.
onmousedown / onmouseup – когда нажали / отжали кнопку мыши на элементе.
onmousemove – при движении мыши.

например использование будет так:

<div onclick="alert(this.textContent)">something text</div>

При клике на текст выведется алерт.

других вариантов нет, только самостоятельные обработчики аттрибутов.

[Василий Хрягин]

Сергей, спасибо за развернутый ответ