admin / 28.12.2017

События мыши javascript

События мыши

Последнее обновление: 1.11.2015

Одну из наиболее часто используемых событий составляют события мыши:

  • : возникает при нажатии указателем мыши на элемент

  • : возникает при нахождении указателя мыши на элементе, когда кнопка мыши находится в нажатом состоянии

  • : возникает при нахождении указателя мыши на элементе во время отпускания кнопки мыши

  • : возникает при вхождении указателя мыши в границы элемента

  • : возникает при прохождении указателя мыши над элементом

  • : возникает, когда указатель мыши выходит за пределы элемента

Например, обработаем события mouseover и mouseout:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″ /> <style> #blueRect{ width:100px; height:100px; background-color:blue; } </style> </head> <body> <div id=»blueRect»></div> <script> function setColor(e){ if(e.type===»mouseover») e.target.style.backgroundColor = «red»; else if(e.type===»mouseout») e.target.style.backgroundColor = «blue»; } var blueRect = document.getElementById(«blueRect»); blueRect.addEventListener(«mouseover», setColor); blueRect.addEventListener(«mouseout», setColor); </script> </body> </html>

Теперь при наведении указателя мыши на блок blueRect он будет окрашиваться в красный цвет, а при уходе указателя мыши — блок будет обратно окрашиваться в синий цвет.

Объект Event является общим для всех событий. Однако для разных типов событий существуют также свои объекты событий, которые добавляют ряд своих свойств. Так, для работы с событиями указателя мыши определен объект MouseEvent, который добавляет следующие свойства:

  • altKey: возвращает , если была нажата клавиша Alt во время генерации события

  • button: указывает, какая кнопка мыши была нажата

  • clientX: определяет координату Х окна браузера, на которой находился указатель мыши во время генерации события

  • clientY: определяет координату Y окна браузера, на которой находился указатель мыши во время генерации события

  • ctrlKey: возвращает , если была нажата клавиша Ctrl во время генерации события

  • metaKey: возвращает , если была нажата во время генерации события метаклавиша клавиатуры

  • relatedTarget: определяет вторичный источник возникновения события

  • screenX: определяет координату Х относительно верхнего левого угла экрана монитора, на которой находился указатель мыши во время генерации события

  • screenY: определяет координату Y относительно верхнего левого угла экрана монитора, на которой находился указатель мыши во время генерации события

  • shiftKey: возвращает , если была нажата клавиша Shift во время генерации события

Определим координаты клика:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″ /> <style> #blueRect{ width:100px; height:100px; background-color:blue; } </style> </head> <body> <div id=»blueRect»></div> <script> function handleClick(e){ console.log(«screenX: » + e.screenX); console.log(«screenY: » + e.screenY); console.log(«clientX: » + e.clientX); console.log(«clientY: » + e.clientY); } var blueRect = document.getElementById(«blueRect»); blueRect.addEventListener(«click», handleClick); </script> </body> </html>

НазадСодержаниеВперед

Введение

В этой статье речь пойдет о Javascript событиях мыши. Эти события являются очень важными в Javascript и используются на каждом шагу. Сначала я расскажу вам о всех стандартных событиях связанных с мышкой: , , , , и, наконец, и .

События mousedown, mouseup и click

Когда пользователь кликает на элемент, то срабатывает не меньше чем 3 события мыши в таком порядке:

  1. , пользователь нажал кнопку мыши на элементе
  2. , пользователь отпустил кнопку мыши на элементе
  3. , обнаружены события mousedown и mouseup на элементе

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

Предположим, что пользователь нажал кнопку на ссылке, потом отвел курсор куда-то в сторону и отпустил кнопку. Ссылка обработала только событие. Также можно возпроизвести и противоположную ситуацию когда пользователь нажимает кнопку мыши, а потом наводит курсор на ссылку и отпускает кнопку. Срабатывает только событие. В остальных случаях срабатывает .

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

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

Событие dblclick (двойной клик)

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

Обработка событий

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

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

Mousemove событие

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

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

Mouseover и mouseout события

Давайте рассмотрим небольшой пример. Попробуйте поводить курсор мышки поверх элементов с разным фоном. Элемент 1 должен слегка мигать при наведении на него курсором — это срабатывает событие .

Тем не менее, как Вы видите, это событие срабатывает и при наведении курcора мыши на элемент№2 и даже span.

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

«Откуда пришла мышь?» или свойства relatedTarget, fromElement и toElement

Ребята из W3C добавили свойство для событий и . Свойство содержит в себе элемент от которого пришел курсор мышки в случае и элемент к которому перешла мышь в случае .

Microsoft создали два ствойства чтобы хранить эту информацию:

  • — относится к элементу от которого пришла мышь.
  • — к элементу к которому пришла мышь.

Кроссбраузерный код

И так если Вы хотите знать откуда пришла мышка используя событие , ипользуйте следующий скрипт:

В случае ипользования события (элемент, к которому движется курсор):

Mouseenter и mouseleave

Microsoft предлагает другой способ решения проблемы. Они создали 2 новых события и . Эти события имеют такое же поведение как и . Единственно отличие — это то, что события не «перепрыгивают» на дочерние элементы. Это очень хорошо решает нашу проблему, представленную в примере.

Ну вот и все о чем я хотел рассказать касательно Javascript событий мыши. С удовольствием отвечу на ваши комментарии.

Если Вам понравилась статья, проголосуйте за нее

Голосов: 6  

Методы addEventListener, removeEventListener, attachEvent

Еще одна возможность обработки событий состоит в использовании методов addEventListener (событие, обработчик события, этап события) и removeEventListener (событие, обработчик события, этап события). С помощью этих методов обработчик события можно задать или отменить для любого DOM-элемента в самом скрипте без назначение атрибута on + "событие". Здесь 1-й параметр – это событие без префикса "on" ("click", "mousemove", "blur", "load" …), 2-й параметр – обработчик события, функция которая будет выполняться при события указанной в первом параметре, 3-й параметр – этап события. Если false, то обработчик события будет выполняться на этапе всплытия события (если существуют вложении элементы с тем же обработчиком события), если true — то на этапе перехвата события.

<p id="test">Тест</p>

<script type="text/javascript">

function alerting(){alert(‘Тест’)};

var test=document.getElementById(‘test’);

test.addEventListener(‘click’,alerting,false);

</script>

IE не поддерживает addEventListener () и removeEventListener (), у него есть аналогичные: attachEvent (on + событие, обработчик события) и detachEvent (on + событие, обработчик события).

Для кроссбраузерной привязки обработчиков события надо делать перебор методов, используя операторы if…else:

<script type="text/javascript">

var test=document.getElementById(‘test’);

function alerting(){alert(‘Тест’)}

if(test.addEventListener){//код для всех браузеров

test.addEventListener("click",alerting,false)

}

else{//код для IE

test.attachEvent("onclick",alerting)

}

</script>

Следует заметить, что скрипт с методом addEventListener() оптимально прописывать в конце Html-документа или уже после загрузки всех необходимых для выполнения скрипта DOM-элементов. Можно также использовать метод загрузки скрипта после происшествия window.onload

Исключения: throw/catch/finally

Работа с исключениями в JavaScript организована, как и в C++ или Java:

try {

//…

throw {message: "err!"}

//..

}

catch (e) {

alert("Ошибка!"+e)

}

Блок try{} указывает выполнить код внутри блока. В случае ошибки осуществляется выход из этого блока и переход на блок обработки исключений: catch (e) {}

Оператор throw {} генерирует объект – исключение, после чего осуществляется выход из блока try. Обычно при этом генерируются по­томки встроенного класса Error:

throw new Error("server timeout")

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

try {

// код …

} catch(e) {

// ловим нужное исключение

if (e instanceof ConnectionError) {

// обрабатываем его

} else {

// пробрасываем незнакомое исключение дальше

throw e

}

} finally {

//finally выполняется вне зависимости — было исключение или нет

}

В этом примере присутствует блок finally, взятый в javascript из java. В стандартной схеме try..catch..finally, код в finally выполнится при лю­бом результате работы try/catch, и туда удобно ставить чистки, уведомления о конце процесса.

<!— пример pr18 —>

<html>

<head>

<title>Наша начальная страница</title>

</head>

<body>

<script type="text/javascript">

function showErrorInfo(e) {

document.write(e, ":<BR>");

document.write("Источник ошибки: ", (e.number >> 16) & 0x1FFF, "<BR>");

document.write("Номер ошибки: ", e.number & 0xFFFF, "<BR>");

document.write("Описание ошибки: ", e.description);

}

var x;

try {

x = y; // Ошибка: переменная y не определена

}

catch (e) { // Создает локальный объект e класса Error

showErrorInfo(e);

}

</script>

</body></html>

Будет выведено:

[objectError]: Источник_ошибки:10 Номер_ошибки:5009 Описание ошибки: ‘y’ — определение отсутствует

Объектная модель

В JavaScript используются следующие виды объектов:

· пользовательские объекты, которые создаются пользовате­лями с помощью конструктора и объекта Object или с помощью инициализации;

· встроенные объекты языка JavaScript: String — строка; Array — массив; Date — дата и время; Math — математические функции;

объекты браузера, которые создаются автоматически при загрузке документа: window — объект верхнего уровня в иерархии объектов; location —описывает местонахождение текущего документа; history — содержит информацию о ресурсах, к которым пользователь обращался во время текущего сеанса; navigator — содержит информацию о версии браузера.

Кроме этого, имеются объекты frames, screen а также методы setTi­meout() и setInterval().

Объекты, связанные с тэгами HTML и стилями CSS. В соответствии с моделью DOM большинство тэгов HTML и стилей CSS соответствуют свойствам объекта document. Например, document — содержит свойства innerText, innerHTML, textContent, которые относятся к текущему HTML-документу и сами также являются объектами. Методы: getElementById(), getElementByTopName.

Пользовательские объекты

Объектно-ориентированные языки (например, Java и C++) основаны на базовых понятиях классов объектов и экземпляров (instances) объектов. JavaScript основан на прототипах и в нем есть только объекты. Вверху иерархии находится объект Object с методами toString() и свойством prototype. Прототип объекта определяет некоторый начальный набор свойств объекта. В процессе работы объект может получать новые свойства через прототип и может сам выступать в качестве прототипа при создании новых объектов.

Существует два основных способа создания новых объектов в JavaScript:

1. Использование конструктора объектов.

2. Использование инициализатора объекта.

При создании объектов в JavaScript используют специальные методы, называемые конструкторами. Имя конструктора определяет имя класса. Декларация конструктора совпадает с декларацией класса. Иными словами, мы определяем конструктор как функцию, которая создает объекты с заданным начальным набором свойств и их значений. Затем создаем объекты вызовом операции: new имя_конструктора(). Например:

<DOCTYPE html>

<!— пример #pr1: шаблон HTML для скрипта —>

<html>

<head>

<title> Объект HTML </title>

</head>

<body >

<script language="javascript" type="text/javascript">

alert("Begin");

function Book() {//конструктор

this.paper = true;

}

var myBook = new Book(); //Объект

alert(myBook.paper); //выведет true

alert("MyBooktype "+typeof(myBook)); //object

alert(Book.prototype); // [object Object]

alert(Object.getPrototypeOf(myBook)) //[object Object]

for (var i in myBook)

alert(‘myBook’+i ) //myBook.paper

alert("End");

</script>

</body></html>

Конструктор вызывается с при создании объекта с помощью оператора new. Оператор new создает пустой объект и передает ссылку this на него конструктору. Конструктор может обращаться к создаваемому объекту, используя указатель this, таким образом, мы можем добавить свойство создаваемому объекту. В конструктор можно передавать параметры, чтобы задать начальные свойства создаваемого объекта. Новое свойство объекта создается просто присваиванием ему значения. Имеется только одна копия прототипа, которую используют все объекты, созданные с помощью одного конструктора.

Обработка событий

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

<DOCTYPE html>

<html>

<head>

<title> Объект HTML </title>

</head>

<body >

<script language="javascript" type="text/javascript">

function Book(isPaper, name, version) {//конструктор с параметрами

if (isPaper) this.paper = true;

else this.paper = false;

this.name = name; this.version = version;

this.aboutBook = function() {

document.write("Book: " + this.name + " " + this.version); }

}

var myBook = new Book(true, "Programming","3");

myBook.price = 100;//добавление свойства объекту

Book.prototype.benifit = 20;// добавление свойства прототипу объект

alert(myBook.price); //100

alert(myBook.benifit)//20

alert(Object.getPrototypeOf(myBook));//[object Object]

var myBook1 = new Book(false, "Progr","5");

alert(myBook1.price); //undefined

alert(myBook1.benifit)//20

for (var i in myBook1)//отсутствует price

alert(‘myBook1’+i )//paper, name,version, aboutbook, benifit

</script>

</body></html>

Свойство price добавлено только для объекта myBook, а свойство benefit для всего прототипа. Свойство, являющееся функцией, называется методом.

Объект JavaScript представляет набор свойств, образующих ассоциированный массив. Для доступа к свойству объекта используется синтаксис: имя_объекта.имя_свойства. Если название свойства задано текстовой строкой, то доступ к свойству возможен и так: имя_объекта["имя_свойства"]

Мы можем удалить свойство или ранее созданный объект с помощью операции delete, например: delete myBook;

Прототипы

Каждый объект имеет свойство prototype, которое определяет его структуру. Прототип относится к порождающему объекту и немного похож на указатель super в языке Java. Свойство prototype является свойством конструктора, прототипированные свойства относятся ко всем объектам (аналогично static в Java). Пример прототипирования объектов приведен ниже:

Book.prototype.paper = false;

Book.prototype.isPaperBook = function() {

if (this.paper) alert("This is a paper book");

else alert("This is not a paper book");

}

function Book(isPaper) {

if (isPaper) this.paper = true;

}

var myBook = new Book(true);

myBook.isPaperBook(); //выведет фразу «This is a paper book»

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

JavaScript позволяет нам задать новый прототип для класса пользовательских объектов (прототипы встроенных объектов доступны только для чтения). Рассмотрим такой пример:

function Circle(radius) {//констуктор1

this.radius = radius;

}

Circle.prototype.dl = function() {

return Math.PI * 2*this.radius;

}

function OCircle(x, y, radius) {

this.x = x;

this.y = y;

this.radius = radius;

}

OCircle.prototype = Circle.prototype;

var myCircle = new OCircle(0, 0, 1);

document.write(myCircle.dl());

В этом примере сначала определяется класс объектов Circle со свойством radius и методом dl(). Затем определяется класс OCircle, конструктор которого дополнительно содержит координаты центра окружности. Затем указывается, что он наследует прототип класса Circle. После этого создается объект myCircle и вызывается метод dl(), унаследованный от прототипа класса Circle. JavaScript поддерживает наследование, основанное на прототипах.

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

Хеш-таблицы в JavaScript

Объект Object в JavaScript находится в вершине иерархии и в то же время представляет собой обычный ассоциатив­ный массив или "хэш". Он хранит любые соответствия "ключ => значе­ние" и имеет несколько методов. Следующие два варианта создания объ­екта эквивалентны:

var o = new Object()

var o = {}

Есть два способа добавления свойств в объект. Первый — точка, вто­рой — квадратные скобки:

o.test = 6// эквивалентные записи

o["test"] = 6

var name = ‘test’

o[name] = 6

Имя свойства "test" является ключом в ассоциативном массиве, по которому лежит значение 5. Еще один пример:

var obj = new Object();

obj.property = 10;

alert(obj[‘property’]);// то же самое, что и obj.property.

Удаление свойств осуществляется с помощью оператора delete:

alert(delete obj[‘property’]); //выведет true

alert(obj[‘property’]); //выведет undefined

Последний пример – перебор всех свойств объекта:

var obj = new Object();

var prop = »;

for(var i in h)

prop += i + ‘ : ‘ + h[i] + ‘\n’;

alert(props);

Переменная i внутри цикла содержит имя свойства, а не значение.

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

Последнее обновление: 1.11.2015

Встроенные обработчики

В прошлой теме были рассмотрены встроенные обработчики (inline event handler), которые определяются в коде элемента с помощью атрибутов:

<div id=»rect» onclick=»handler(event)»></div>

Хотя этот подход прекрасно работает, но он имеет кучу недостатков:

  • Код html смешивается с кодом JavaScript, в связи с чем становится труднее разрабатывать, отлаживать и поддерживать приложение

  • Обработчики событий можно задать только для уже созданных на веб-странице элементов. Динамически создаваемые элементы в этом случае лишаются возможности обработки событий

  • К элементу для одного события может быть прикреплен только один обработчик

  • Нельзя удалить обработчик без изменения кода

Свойства обработчиков событий

Проблемы, которые возникают при использовании встроенных обработчиков, были призваны решить свойства обработчиков. Подобно тому, как у html-элементов есть атрибуты для обработчиков, так и в коде javascript у элементов DOM мы можем получить свойства обработчиков, которые соответствуют атрибутам:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″ /> <style> #rect{ width:50px; height:50px; background-color:blue; } </style> </head> <body> <div id=»rect»></div> <script> function handler(e){ alert(e.type); } document.getElementById(«rect»).onclick = handler; </script> </body> </html>

В итоге нам достаточно взять свойство и присвоить ему функцию, используемую в качестве обработчика. За счет этого код html отделяется от кода javascript.

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

Мышь: клики, кнопка, координаты

Поэтому также мы можем получить этот объект в функции обработчика в качестве параметра.

Слушатели событий

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

Еще один способ установки обработчиков событий представляет использование слушателей.

Для работы со слушателями событий в JavaScript есть объект EventTarget, который определяет методы addEventListener() (для добавления слушателя) и removeEventListener() для удаления слушателя. И поскольку html-элементы DOM тоже являются объектами EventTarget, то они также имеют эти методы. Фактически слушатели представляют те же функции обработчиков.

Метод принимает два параметра: название события без префикса on и функцию обработчика этого события. Например:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″ /> <style> #rect{ width:50px; height:50px; background-color:blue; } </style> </head> <body> <div id=»rect»></div> <script> var rect = document.getElementById(«rect»); rect.addEventListener(«click», function (e) { alert(e.type); }); </script> </body> </html>

То есть в данном случае опять же обрабатывается событие click. И также можно было бы в качестве второго параметра название функции:

function handler(e){ alert(e.type); } var rect = document.getElementById(«rect»); rect.addEventListener(«click», handler);

Удаление слушателя аналогично добавлению:

rect.removeEventListener(«click», handler);

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

var clicks = 0; function handlerOne(e){ alert(e.type); } function handlerTwo(e){ clicks++; var newNode = document.createElement(«p»); newNode.textContent = «произошло нажатие » + clicks; document.body.appendChild(newNode); } var rect = document.getElementById(«rect»); // прикрепляем первый обработчик rect.addEventListener(«click», handlerOne); // прикрепляем второй обработчик rect.addEventListener(«click», handlerTwo);

НазадСодержаниеВперед

FILED UNDER : IT

admin

Submit a Comment

Must be required * marked fields.

:*
:*