Как пользоваться jquery.click по элементам в примерах

Обработчик события как атрибут элемента

Это самый старый способ назначения обработчиков события и наименее используемый на данный момент. Для того чтобы его добавить, необходимо к имени события добавить приставку «on» и записать примерно такой код:

Обработчик события как атрибут

JavaScript

<button onclick=’alert(«Событие произошло!»)’>Нажми меня</button>

1 <button onclick=’alert(«Событие произошло!»)’>Нажмименя<button>

Нажми меня

Можно вызвать функцию, в которую можно передать один или несколько аргументов:

Обработчик события как атрибут элемента

JavaScript

<script>
function change(element, color){
element.style.backgroundColor = color;
}
</script>
<p onclick=»change(this, ‘red’)»>Кликни здесь, и этот абзац станет красным.
Но только один раз.</p>
<p onclick=»change(this, ‘lime’)»>Кликни здесь, и этот абзац станет зеленым.
Но только один раз.</p>

1
2
3
4
5
6
7
8
9

<script>

functionchange(element,color){

element.style.backgroundColor=color;

}
</script>

<ponclick=»change(this, ‘red’)»>Кликниздесь,иэтотабзацстанеткрасным.

Нотолькоодинраз.<p>

<ponclick=»change(this, ‘lime’)»>Кликниздесь,иэтотабзацстанетзеленым.

Нотолькоодинраз.<p>

Пример этого кода:

Кликни здесь, и этот абзац станет красным. Но только один раз.

Кликни здесь, и этот абзац станет зеленым. Но только один раз.

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

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

Элементы, связанные с событием

Чаще всего нужно узнать, на каком элементе сработало событие.

Например, мы поймали на внешнем ‘е и хотим знать, на каком из внутренних элементов оно на самом деле произошло.

В Internet Explorer у объекта для этого есть свойство , в остальных браузерах, работающих по рекомендациям W3C, для этого используется .

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

1

2
3
Ссылка

<div class="d1" 
  onclick="*!*t=event.target||event.srcElement; alert(t.className)*/!*"
>
<span class="number">1</span>
    <div class="d2">
        <span class="number">2</span>
        <div class="d3">
            <span class="number">3</span>
        </div>
        <a class="d2a" href="javascript:void(0)">Ссылка</a>
    </div>
</div>

Javascript-обработчик в примере висит только на внешнем диве и выглядит примерно так:

function(event) {
  // получить объект событие.
  // вместо event лучше писать window.event
  event = event || window.event

  // кросс-браузерно получить target
  var t = event.target || event.srcElement

  alert(t.className)
}

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

Эти свойства — в W3C, и в Internet Explorer.

// Обработчик для mouseover
function mouseoverHandler(event) {
	event = event || window.event
	var relatedTarget = event.relatedTarget || event.fromElement
	// для mouseover
	// relatedTarget - элемент, *!*с которого*/!* пришел курсор мыши
}

// Обработчик для mouseout
function mouseoutHandler(event) {
	event = event || window.event
	var relTarg = event.relatedTarget || event.toElement
	// для mouseout
	// relatedTarget - элемент, *!*на который*/!* перешел курсор мыши
}

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

Поэтому его можно получить для IE, взяв то свойство из , которое не равно :

if (!e.relatedTarget && e.fromElement) {
  e.relatedTarget = (e.fromElement==e.target) ? e.toElement : e.fromElement
}

При всплытии — событие по очереди вызвает обработчики на элементе-триггере и дальше, вверх по документу.

По мере всплытия, текущим элементом каждый раз становится новый. Иначе говоря. текущий элемент — это тот, к которому в данный момент «доплыло» событие.

Стандартный способ получить текущий элемент — использовать переменную .

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

1

2

3

<div class="d1" onclick="highlightMe(this)">1
    <div class="d2" onclick="highlightMe(this)">2
        <div class="d3" onclick="highlightMe(this)">3</div>
    </div>
</div>

Свойства и методы объекта event

В этом разделе мы рассмотрим свойства и методы объекта .

Общие свойства объекта :

  • type — строка, содержащее имя события.
  • target — DOM-элемент, который сгенерировал событие.
  • currentTarget — DOM-элемент, который вызвал обработчик события.
  • eventPhase — число, показывающее на каком этапе произошло событие (1 — этапе погружения (перехвата), 2 — на цели, 3 — на этапе всплытия).
  • timestamp — число (дата), когда произошло событие
  • bubbles — возвращает логическое значение, указывающее может ли данное событие всплывать
  • defaultPrevented — проверяет можно ли вызвать метод для данного события.
  • view — возвращает ссылку на объект window, в котором произошло событие.

Методы объекта :

  • preventDefault() — отменить стандартное действие браузера, если это конечно возможно.
  • stopPropagation() — предотвратить всплытие события (пузырька)

Свойства объекта , предназначенные для получения дополнительной информации о событиях, связанных с клавиатурой и мышью.

  • which (для мыши) — возвращает число, указывающее, какая кнопка мыши была нажата (1 — левая кнопка, 2 — средняя кнопка, 3 — правая кнопка). Это свойство в основном используется вместе с событием . Данное свойство может использоваться для получения дополнительной информации о событие, связанном с нажатием кнопки мыши.
  • button (для мыши) — возвращает число, указывающее, какая кнопка мыши была нажата. Данное свойство может использоваться для получения дополнительной информации о событие, связанном с нажатием кнопки мыши.
  • clientX, clientY (для мыши) — возвращают информацию о положении курсора ( — горизонтальная координата, — вертикальная координата) относительно левого верхнего угла клиентской области.
  • screenX, screenY (для мыши) — возвращают информацию о положении курсора ( — горизонтальная координата, — вертикальная координата) относительно левого верхнего угла экрана.
  • detail (для мыши) — возвращает число, указывающее сколько раз была нажата кнопка мыши в некоторой области за короткий промежуток времени.
  • altKey, ctrlKey, metaKey, shiftKey (для мыши и клавиатуры) — получение дополнительной информации о том была ли нажата соответствующая клавиша alt, ctrl, meta и shift в тот момент когда произошло событие.
  • relatedTarget (для мыши) — возвращает элемент, который связан с элементом, сгенерировавшим события мыши.
    Например, свойство (для мыши) может быть использовано для получения дополнительной информации о событиях или .
    Для события : свойство — указывает на элемент, который сейчас находится под курсором; а свойство — на элемент с которого курсор пришёл.
    Для события : свойство — указывает на элемент с которого курсор пришёл; а (для мыши) — на элемент, который сейчас находится под курсором.
  • charCode (для клавиатуры) — возвращает код символа Unicode нажатой клавиши (для события ). Если данное свойство использовать для получения дополнительной информации о событиях или , то оно всегда вернёт «0».
  • keyCode, which (для клавиатуры) — возвращает код символа Unicode (для события ) или код ключа Unicode (для событий и ).
  • location (для клавиатуры) — возвращает число, указывающее на область клавиатуры или устройства в котором расположена нажатая клавиша (0 — основная область клавиатуры, 1 — область, в которой расположена левая клавиша CTRL или левая клавиша ALT, 2 — область, в которой расположена правая клавиша CTRL или правая клавиша ALT, 3 — область цифровой панели, которая дублирует клавиши основной области для ввода цифр и арифметических операторов).

Например, при перемещении мыши (событие ) по веб-странице, вывести координаты курсора в элемент, имеющий .

<p id="myP"></p>
<script>
document.addEventListener("DOMContentLoaded",function() {
  document.addEventListener("mousemove", function(event) {
    var myP = document.getElementById("myP");
    var X = event.clientX;
    var Y = event.clientY;
    myP.textContent = "X = " + X + "; Y = "+ Y;
  }, false);
},false);  
</script>

Если курсор находится над несколькими элементами одновременно, то его получает элемент, который расположен в DOM наиболее глубоко.
Курсор может быть только над одним элементов — самым глубоким в DOM (и верхним по z-index).

Инсайт от автора

Я люблю изучать языки в жизни – я не имею ввиду языки программирования. Я говорю о языках типа русского, английского, так же я знаю украинский так как родился на Украине, ну и венгерский с немецким, это те языки, которые мне получилось выучить. Чтобы не лукавить, это те языки, на которых я могу уверенно говорить и объясниться, но, если говорить честно, хуже всего я говорю на немецком.

К чему это я?

Языки программирования имею практически такую же логику, как и обычный человеческий язык, меняется только синтаксис. Потому если ты умеешь программировать на одном каком-то языке очень хорошо, нужно просто открыть синтаксис и просто использовать его в таком ключе как сказано в документации. 100%-го успеха я не гарантирую, потому что даже в жизни в каждом языке есть свои правила, почему это работает так, а не иначе.

Потому, просто нужно трудиться, потратить большую долю времени на практику, чтобы позже делать все без особого напряга! Кипение мозга при этом неизбежно – это самое важное что нужно понимать!

event.defaultPrevented

Свойство установлено в , если действие по умолчанию было предотвращено, и , если нет.

Рассмотрим практическое применение этого свойства для улучшения архитектуры.

Помните, в главе Всплытие и погружение мы говорили о и упоминали, что останавливать «всплытие» – плохо?

Иногда вместо этого мы можем использовать , чтобы просигналить другим обработчикам, что событие обработано.

Давайте посмотрим практический пример.

По умолчанию браузер при событии (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:

Теперь в дополнение к этому контекстному меню реализуем контекстное меню для всего документа.

При правом клике должно показываться ближайшее контекстное меню.

Проблема заключается в том, что когда мы кликаем по элементу , то мы получаем два меню: контекстное меню для кнопки и (событие всплывает вверх) контекстное меню для документа.

Как это поправить? Одно из решений – это подумать: «Когда мы обрабатываем правый клик в обработчике на кнопке, остановим всплытие», и вызвать :

Теперь контекстное меню для кнопки работает как задумано. Но цена слишком высока. Мы навсегда запретили доступ к информации о правых кликах для любого внешнего кода, включая счётчики, которые могли бы собирать статистику, и т.п. Это слегка неразумно.

Альтернативным решением было бы проверить в обработчике , было ли отменено действие по умолчанию? Если да, тогда событие было обработано, и нам не нужно на него реагировать.

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

event.stopPropagation() и event.preventDefault()

Как мы можем видеть, и (также известный как ) – это две разные функции. Они никак не связаны друг с другом.

Архитектура вложенных контекстных меню

Есть также несколько альтернативных путей, чтобы реализовать вложенные контекстные меню. Одним из них является единый глобальный объект с обработчиком и методами, позволяющими хранить в нём другие обработчики.

Объект будет перехватывать любой клик правой кнопкой мыши, просматривать сохранённые обработчики и запускать соответствующий.

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

Click в jQuery с использованием -> класса(class)

click в jQuery

Нам опять понадобится какая-то кнопка с классом(пусть будет THEclass), чтобы увидеть реальное действие click в jQuery.

<button class=»THEclass»>Кнопка button с классом THEclass</button>

Скрипт клика абсолютно аналогичный, что бы приведен выше! Но только внутри первых скобок помести класс и вместо решетки ставим точку — она, как вы знаете обозначает класс в css

И внутри помещаем тот же скрипт script, который выполнит ту же работу!

Соберем весь код клика по кнопке с классом в jQuery:

<button class=»THEclass»>Кнопка button с классом THEclass</button>

<script>

$( «.THEclass» ).click(function() {

alert( $(«.THEclass»).html() );

});

</script>

jQuery — Удалить обработчик события

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

Вызов метода без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.

Например, отключим все обработчики у элементов с классом link:

$('.link').off();

Например, удалим событие у всех элементов с классом :

$('.link').off('link');

Специальный селектор () позволяет удалить только делегированные события с сохранением не делегированных:

$('.link').off('click','**');

Удалить только указанные делегированные события (с помощью селектора):

// добавление делегированного события
$('ul').on('click','li', function(){
  // выводим в консоль контент элемента li
  console.log($(this).text());
});

// удаление делегированного события
$('ul').off('click','li');

Удалить все обработчики делегированного события в пространстве имён для элементов с классом :

$('body').on('click.modal', '.show', openModal);

Передача данных в обработчик

Если указан аргумент и он не является или , то данные передаются в обработчик в переменную каждый раз при возникновении события. Аргумент может быть любого типа, но если в строке используется селектор, необходимо это указать или передать чтобы данные не воспринимались как селектор. Лучшим выходом является использование простого объекта, чтобы несколько значений могли быть переданы как свойства.

Начиная с версии jQuery 1.4, один и тот же обработчик событий может быть назначен элементу несколько раз. Это особенно полезно, когда в функции используется , или когда другие уникальные данные находятся в окружении функции обработчика событий. Например:

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

При нажатии кнопки будет генерироваться два разных предупреждения.

Использование метода addEventListener()

Самый используемый в последнее время, т.к. позволяет назначить несколько обработчиков одного и того же события. В его синтаксисе не нужно использовать приставку «on», только название самого события:

JavaScript

элемент.addEventListener( «событие», имя_функции, фаза);
Например,
close.addEventListener( «click», removeBlock, false);

1
2
3

элемент.addEventListener(«событие»,имя_функции,фаза);

Например,

close.addEventListener(«click»,removeBlock,false);

Под параметром «фаза» подразумевается фаза прохождения события — всплытие или перехват (почитать подробнее). Поскольку, большинство событий обрабатывают на фазе всплытия, последний параметр будет равен . А поскольку именно таково его значение по умолчанию, то его просто не указывают:

JavaScript

close.addEventListener( «click», removeBlock);

1 close.addEventListener(«click»,removeBlock);

Чтобы отменить назначенный таким образом обработчик события, используют метод removeEventListener(), указывая в скобках и тип события, и функцию, которая вызывалась по нему.

JavaScript

close.removeEventListener( «click», removeBlock);

1 close.removeEventListener(«click»,removeBlock);

В примере ниже при клике на изображении оно сменяется на другое. Пути к изображениям берутся из массива :

JavaScript

<div class=»test»>
<div class=»round»><img src=»twenty-twenty-150×150.jpg» alt=»Image» id=»img»></div>
</div>
<script>
var pics = ;
var img = document.getElementById(«img»), num = 0;

img.addEventListener(«click», changeImg);
function changeImg(){
num<pics.length-1 ? num++ : num=0;
img.src = pics;
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class=»test»>

<div class=»round»><img src=»twenty-twenty-150×150.jpg»alt=»Image»id=»img»><div>

<div>

<script>

varpics=»FitText-150×150.jpg»,»jQuery-Knob-150×150.jpg»,»unislider-150×150.jpg»;

varimg=document.getElementById(«img»),num=;

img.addEventListener(«click»,changeImg);

functionchangeImg(){

num<pics.length-1?num++num=;

img.src=picsnum;

}

</script>

Пример «вживую»:

Еще один пример обработки событий с помощью метода addEventListener() вы найдете в статье «Обработка события onmousemove на примере поздравительной открытки».

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

See the Pen JavaScript Events by Elen (@ambassador) on CodePen.18892

Если вы изучаете не только нативный JavaScript, но и библиотеку jQuery, то в статье  «Обработка событий в jQuery» вы можете найти несколько способов добавления и удаления обработчиков событий.

Просмотров:
2 351

Типы событий JavaScript

Рассмотрим наиболее стандартные и часто используемые javaScript события:

Обработчик
события

Поддерживающие HTML- элементы и объекты

Описание

onBlur

a, area, button, input,
label, select, textarea

Потеря текущим элементом фокуса. Возникает при
щелчке мышью вне элемента либо нажатии клавиши табуляции

onChange

Input, select, textarea

Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur

onClick

Практически все

Одинарный щелчок (нажата и отпущена кнопка мыши)

onFocus

a, area, button, input, label, select, textarea

Получение элементом фокуса

onLoad

body, frameset

Закончена загрузка документа

onMouseDown

Практически все

Нажата кнопка мыши в пределах текущего элемента

onMouseOut

Практически
все

Курсор мыши выведен за пределы
текущего элемента

onMouseOver

Практически все

Курсор мыши наведен на текущий элемент

onMouseUp

Практически все

Отпущена кнопка мыши в пределах текущего элемента

onMove

window

Перемещение окна

onResize

window

Изменение размеров окна

onSelect

textarea, input

Выделение текста в текущем элементе

onSubmit

form

Отправка данных формы

onUnload

body, frameset

Попытка закрытия окна браузера и выгрузки документа

Пример:Onclick В JavaScript, используя метод addEventListener()

И последний элемент теории Onclick — использование метода addEventListener

Нам опять понадобится кнопка

<button id=»onclick_v_addEventListener»>Это второй способ реализации Onclick в JavaScript</button>

Опять применяем querySelector — обращаемся к нашей кнопке, добавляем метод addEventListener, во внутрь помещаем событие click И второй параметр — это функция myFoo.

document.querySelector(«#onclick_v_addEventListener») .addEventListener(«click», myFoo);

Далее нам понадобится функция:

function myFoo() { alert(«Это третий способ реализации Onclick в JavaScript через addEventListener и вывод через alert»); }

Соберем весь код вместе:

<button id=»onclick_v_addEventListener»>Это третий способ реализации Onclick в JavaScript</button>

<script>

document.querySelector(«#onclick_v_addEventListener») .addEventListener(«click», myFoo);

function myFoo()

{

alert(«Это третий способ реализации Onclick в JavaScript через addEventListener и вывод через alert»);

}

</script>

Результат:

Это третий способ реализации Onclick в JavaScript

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример ниже демонстрирует получение координат мыши из объекта события:

Некоторые свойства объекта :

Тип события, в данном случае .
Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у , но если обработчик является функцией-стрелкой или при помощи привязан другой объект в качестве , то мы можем получить элемент из .
Координаты курсора в момент клика относительно окна, для событий мыши.

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

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать объект , вот так:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: . То есть, её первый аргумент называется , а тело взято из атрибута.

Делаем по другому

Не пишем вообще ничего лишнего в HTML, а ниже списка вставляем сценарий.

Что здесь делаем? Перебираем все элементы списка и содержащиеся в них пары ссылка-блок. Для каждой пары вызываем функцию linkAD(). Функция linkAD() связывает ссылку и блок (по нажатии ссылки открывается блок).

Что здесь нового? То что связывая ссылку и блок внутри linkAD() мы имеем дело с одной ссылкой и одним блоком. И нам абсолютно при этом не интересно сколько ещё таких блоков существует, сколько из них будут параллельно раскрываться с нашим текущим блоком и прочая и прочая…

Вызывая для каждой пары функцию мы каждый раз создаём отдельный контекст. Отдельный контекст со своими отдельными данными (timer, height, dh, cheight, a, div) привязанными только к нашему конкретному блоку.

Вложенные функции onclick() и clock() через замыкание связаны с этим контекстом. И внутри обработчика мне не нужно думать, а тот ли это timer, который относится к моему блоку и та ли это height, которая содержит высоту моего блока.

То есть мы произвели инкапсуляцию данных относящихся к одной сущности в одном месте. Маленький пример для тех, кто не понимает почему замыкания считаются аналогом ООП.

Особенности применения onclick для ссылки HTML

HTML код написания этого атрибута в теге ссылки выглядит так:

PHP

<a title=»Ссылка» href=»#» onclick=» alert(‘Ку-ку!’)»»>Нажми на меня!</a>

1 <atitle=»Ссылка»href=»#»onclick=» alert(‘Ку-ку!’)»»>Нажминаменя!<a>

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

Вы наверное спросите: «А зачем тогда вообще оставлять атрибут href? Удалили его и все дела!»

В принципе такой вариант тоже возможен и он будет работать, НО с точки зрения валидности HTML кода это не есть хорошо, так как этот атрибут является основным и неотъемлемым для ссылки и удаляя его вы коварно лишаете ссылку важнейшей части её «тела». Валидаторы вам этого не простят!

Внутри атрибута href можно задать следующие значения:

  • оставить его пустым href=»»
  • поставить в нём решётку href=»#»
  • написать href=»javascript://»
  • указать реальную ссылку своего сайта href=» //impuls-web.ru/»

Мне больше нравится вариант с javascript:// и #.

Так же артибут onclick можно применять и к любым другим HTML тегам, но это будет скорее из области изощрений и извращений, так как в HTML для событий клика предназначены кнопки и ссылки, поэтому тулить события щелчка к другим тегам как то не очень целесообразно.

Вешаем onclick на элемент из javascript-кода

Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.

Код в действии:

Нажмите на ссылку:

Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:

//выбираем нужные элементы
var a = document.querySelectorAll('.link');
    
//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
    //вешаем событие
    el.onclick = function(e) {
        //производим действия
    }
});
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector