Правильная установка кода на событие onclick

@katjuha6 · Регистрация: 17.01.2013

Студворк — интернет-сервис помощи студентам

Всем добрый день, уважаемые форумчане!
На сайте стоит оформление заказа в один клик.
Оптимизатор дал задание поставить код отслеживая на кнопку.
исходный код

HTML5

1	<span class="btn btn-inverse" onclick="quickOrder.openForm(this)">Купить в один клик</span>

то, что нужно добавить

HTML5

1	onclick="gtag('event', 'clickquickorder', { 'event_category': 'quickorder', 'event_action': 'click', });"

и вторая кнопка

HTML5

1	<input type="submit" class="button" value="Отправить" onclick="return quickOrder.submitForm()">

добавить

HTML5

1	onclick="gtag('event', 'quickorderissued', { 'event_category': 'fastcheckout', 'event_action': 'click', });"

подскажите, пожалуйста, как поставить этот код, чтобы не поломать все? просто я не уверена в том, что на один "onclick" можно навешивать 2 разных события. или можно?

@netBool · 25.12.2017, 17:10

katjuha6,

Javascript

<script>
function myevent(elem)
{
     quickOrder.openForm(elem);
     gtag('event', 'clickquickorder', { 'event_category': 'quickorder', 'event_action': 'click', });
}
</script>

HTML5

1	<span class="btn btn-inverse" onclick="myevent(this)">Купить в один клик</span>

@kalabuni · 25.12.2017, 18:59

Сообщение от katjuha6

я не уверена в том, что на один "onclick" можно навешивать 2 разных события. или можно?

выражаться изволите очень и очень неграмотно:

onclick -- это и есть событие
"навешивать" на одно событие можно не только два, но хоть миллион разных действий / функций
и каждой из "навешиваемых" функций можно передать ЛЮБОЕ количество параметров
проверьте:

PHP/HTML

<style>
li {margin-bottom: 12px; text-decoration: underline; cursor: pointer}
</style>
<script>
function func3 () {alert (3);}
function func4 () {alert (4);}
function funcMulti (a, b, c, d) {alert ([a, b, c, d].join (' - '));}
</script>
<ul>
<li onclick = "alert (1); alert (2);">когда кликнешь здесь, увидишь последовательно два окошка 1 и 2</li>
 
<li onclick = "func3 (); func4 ();">а кликнешь здесь, то тоже увидишь последовательно два окошка 3 и 4</li>
<li onclick = "funcMulti (1, 2, 3, 4);">если же кликнешь здесь,  то увидишь одно длинное окошко 1 - 2 - 3 - 4</li>
</ul>

@Lazy_Den · 25.12.2017, 19:59

Сообщение от kalabuni

onclick -- это и есть событие

Поправочка: событие - click, а onclick - это или же атрибут, или же свойство, в зависимости от способа установки обработчика события.

@kalabuni · 25.12.2017, 20:16

Сообщение от Lazy_Den

Поправочка: событие - click, а onclick - это или же атрибут, или же свойство, в зависимости от способа установки обработчика события.

мелкомягкие с вами поспорят -- см. их документацию, которая так и называется "Событие onclick" ("onclick event" в оригинале)

а атрибут это, свойство или что-то иное -- это, по мелкомягким, всего лишь нюансы синтаксиса

И, кстати, лично я полагаю это абсолютно правильным

@Lazy_Den · 25.12.2017, 20:23

Сообщение от kalabuni

см. доки onclick event

Я тоже инфу читаю не на левых ресурсах. Например, по этой ссылке, читаем первое же предложение:

The onclick property returns the click event handler code on the current element.

HTML-теги могут содержать в себе только атрибуты. Даже checked, selected и т.д., которые по сути являются свойствами, всё равно в рамках HTML-синтаксиса считаются атрибутами. Или, говоря уже о JS, синтаксис кода element.onclick - безоговорочно говорит нам о том, что обращаемся мы к свойству, а не событию. И, лично я, считаю уже это абсолютно правильным.

@kalabuni · 25.12.2017, 20:30

не соглашусь
мозилловские "примочки" типа Window и Document (именно так, с заглавной буквы) вместо нормальных объектов window и document абсолютно ничего не добавляют к картине мира, а лишь излишне усложняют её

Вопрос: чем мозилловский объект GlobalEventHandlers по сути отличается от нормального объекта object?
ответ: принципиально ничем не отличается

Берем бритву Оккама (надеюсь, слышали про такой инструмент, и знаете, для чего он предназначен) и отсекаем ею излишнее усложнение

@Lazy_Den · 25.12.2017, 20:36

Сообщение от kalabuni

мозилловские "примочки"

Хорошо, пусть будут не мозиловские. Возьмём документацию W3C. Заголовок над списком того, что вы называете событиями, а я атрибутами или свойствами, звучит так: "Attribute definitions".

Добавлено через 1 минуту

Сообщение от kalabuni

отсекаем ею излишнее усложнение

Я не про усложнение, а про обычную терминологию. Хотя, как я понимаю, мы всё равно останемся при своих мнениях.

@kalabuni · 25.12.2017, 21:07

Сообщение от Lazy_Den

Я не про усложнение, а про обычную терминологию.Хотя, как я понимаю, мы всё равно останемся при своих мнениях.

увы,
на данный момент в этом вопросе (про "события") существуют две терминологии, знать (и понимать) надо обе
а о вкусах, действительно, лучше не спорить

возвращаясь к вчерашней теме про конъюнкцию, и, пользуясь вашими наработками:

Javascript

1	if ((W3C === MDN) && (MDN != MSDN)) {alert ('и куда бедному программисту податься?!');}

@Lazy_Den · 25.12.2017, 21:20

kalabuni, да, уже не первый раз сталкиваюсь с тем, что мы (рядовые программисты) становимся заложниками разных интерпретаций понятий тех, к кому стараемся прислушиваться и следовать их рекомендациям.

@kalabuni · 25.12.2017, 21:38

Lazy_Den, кстати, мой пример с алертами выше отказывается работать в jsfiddle, алерты появляются только после первого клика, после второго и далее - страница никак не реагирует

@Lazy_Den · 25.12.2017, 22:20

Сообщение от kalabuni

мой пример с алертами выше отказывается работать в jsfiddle

Не заметил такого бага

@kalabuni · 26.12.2017, 00:04

Сообщение от Lazy_Den

Не заметил такого бага

спасибо, действительно, работает

Добавлено через 5 минут

Сообщение от Lazy_Den

Возьмём документацию W3C. Заголовок над списком того, что вы называете событиями, а я атрибутами или свойствами, звучит так: "Attribute definitions".

признайтесь, что сжульничали маленько -- раздел, где вы нашли заголовок списка "Attribute definitions", называется 18.2.3 Intrinsic events, что переводится как "Внутренние события", об чём и был спич -- то есть все эти onload, onclick, и далее по списку -- это всё же события, которые в html-коде только лишь "выглядят", как атрибуты

@Lazy_Den · 26.12.2017, 02:41

Думал, что тему порехали...

Сообщение от kalabuni

признайтесь, что сжульничали маленько

Даже в мыслях такого не было.
Не буду говорить о других, но для себя лично, я четко распределяю обсуждаемые понятия. Фразу "внутренние события", я понимаю по своему, но никому не хочу навязывать свою точку зрения, т.к. пока она не имеет под собой твердого обоснования. Да, исходя из заголовка в документации, можно воспринимать атрибуты on<event>, как внутренние события, но всё-таки это атрибуты, о чем, собственно, там неоднократно пишется. Если говорить именно о событиях, то есть отдельный раздел W3C, посвященный им - Event Types, полистав который, мы не обнаружим никаких событий с приставкой on. За исключением, например, части Mouse Events, где написано буквально следующее:

The mouse event module originates from the [HTML40] onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, and onmouseout attributes.

Как видим, эти ключевые слова, опять же определятся, как атрибуты.

В конце концов, фиг с ними и пусть каждый называет, как его душе угодно. Главное, что установка обработчиков событий inline, с каждым днём уходит в прошлое, но это уже совсем другая история, достойная нового холивара

@kalabuni супермизантроп 3938 / 2976 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	25.12.2017, 21:38	11
	Lazy_Den, кстати, мой пример с алертами выше отказывается работать в jsfiddle, алерты появляются только после первого клика, после второго и далее - страница никак не реагирует 0

@Lazy_Den 3322 / 2842 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	26.12.2017, 02:41	14
	Думал, что тему порехали... Сообщение от kalabuni признайтесь, что сжульничали маленько Даже в мыслях такого не было. Не буду говорить о других, но для себя лично, я четко распределяю обсуждаемые понятия. Фразу "внутренние события", я понимаю по своему, но никому не хочу навязывать свою точку зрения, т.к. пока она не имеет под собой твердого обоснования. Да, исходя из заголовка в документации, можно воспринимать атрибуты `on<event>`, как внутренние события, но всё-таки это атрибуты, о чем, собственно, там неоднократно пишется. Если говорить именно о событиях, то есть отдельный раздел W3C, посвященный им - Event Types, полистав который, мы не обнаружим никаких событий с приставкой `on`. За исключением, например, части Mouse Events, где написано буквально следующее: The mouse event module originates from the [HTML40] onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, and onmouseout attributes. Как видим, эти ключевые слова, опять же определятся, как атрибуты. В конце концов, фиг с ними и пусть каждый называет, как его душе угодно. Главное, что установка обработчиков событий inline, с каждым днём уходит в прошлое, но это уже совсем другая история, достойная нового холивара 0

@Lazy_Den 3322 / 2842 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	25.12.2017, 19:59	4
	Сообщение от kalabuni onclick -- это и есть событие Поправочка: событие - `click`, а `onclick` - это или же атрибут, или же свойство, в зависимости от способа установки обработчика события. 0

@kalabuni супермизантроп 3938 / 2976 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	25.12.2017, 20:16	5
	Сообщение от Lazy_Den Поправочка: событие - click, а onclick - это или же атрибут, или же свойство, в зависимости от способа установки обработчика события. мелкомягкие с вами поспорят -- см. их документацию, которая так и называется "Событие onclick" ("onclick event" в оригинале) а атрибут это, свойство или что-то иное -- это, по мелкомягким, всего лишь нюансы синтаксиса И, кстати, лично я полагаю это абсолютно правильным 0

@Lazy_Den 3322 / 2842 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	25.12.2017, 20:23	6
	Сообщение от kalabuni см. доки onclick event Я тоже инфу читаю не на левых ресурсах. Например, по этой ссылке, читаем первое же предложение: The onclick property returns the click event handler code on the current element. HTML-теги могут содержать в себе только атрибуты. Даже checked, selected и т.д., которые по сути являются свойствами, всё равно в рамках HTML-синтаксиса считаются атрибутами. Или, говоря уже о JS, синтаксис кода `element.onclick` - безоговорочно говорит нам о том, что обращаемся мы к свойству, а не событию. И, лично я, считаю уже это абсолютно правильным. 0

@kalabuni супермизантроп 3938 / 2976 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	25.12.2017, 20:30	7
	не соглашусь мозилловские "примочки" типа Window и Document (именно так, с заглавной буквы) вместо нормальных объектов window и document абсолютно ничего не добавляют к картине мира, а лишь излишне усложняют её Вопрос: чем мозилловский объект GlobalEventHandlers по сути отличается от нормального объекта object? ответ: принципиально ничем не отличается Берем бритву Оккама (надеюсь, слышали про такой инструмент, и знаете, для чего он предназначен) и отсекаем ею излишнее усложнение 0

@Lazy_Den 3322 / 2842 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	25.12.2017, 20:36	8
	Сообщение от kalabuni мозилловские "примочки" Хорошо, пусть будут не мозиловские. Возьмём документацию W3C. Заголовок над списком того, что вы называете событиями, а я атрибутами или свойствами, звучит так: "Attribute definitions". Добавлено через 1 минуту Сообщение от kalabuni отсекаем ею излишнее усложнение Я не про усложнение, а про обычную терминологию. Хотя, как я понимаю, мы всё равно останемся при своих мнениях. 0

@Lazy_Den 3322 / 2842 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	25.12.2017, 21:20	10
	kalabuni, да, уже не первый раз сталкиваюсь с тем, что мы (рядовые программисты) становимся заложниками разных интерпретаций понятий тех, к кому стараемся прислушиваться и следовать их рекомендациям. 0

@Lazy_Den 3322 / 2842 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	25.12.2017, 22:20	12
	Сообщение от kalabuni мой пример с алертами выше отказывается работать в jsfiddle Не заметил такого бага 0

@kalabuni супермизантроп 3938 / 2976 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	26.12.2017, 00:04	13
	Сообщение от Lazy_Den Не заметил такого бага спасибо, действительно, работает Добавлено через 5 минут Сообщение от Lazy_Den Возьмём документацию W3C. Заголовок над списком того, что вы называете событиями, а я атрибутами или свойствами, звучит так: "Attribute definitions". признайтесь, что сжульничали маленько -- раздел, где вы нашли заголовок списка "Attribute definitions", называется 18.2.3 Intrinsic events, что переводится как "Внутренние события", об чём и был спич -- то есть все эти onload, onclick, и далее по списку -- это всё же события, которые в html-коде только лишь "выглядят", как атрибуты 0

Правильная установка кода на событие onclick

Решение