English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
На самом деле эту статью я написал давно, но из-за бага в сохранении на sf, я тогда написал много, но не сохранял, считаю, что это большая жальба, что это не было завершено. Сегодня у меня есть время, чтобы дополнить это, и это также будет заключительным эпилог моего обучения JavaScript.
Здесь мы рассмотрим события, связанные с JavaScript:
Обработчик событий
В DOM определены некоторые события, а функция, отвечающая на определенное событие, называется обработчиком событий (или детектором событий). Название обработчика событий обычно начинается с "on", например: onclick и т.д.
Перетекание событий и захват
Поток событий указывает на порядок приема событий на странице, IE, Firefox и Chrome браузеры являются перетеканием событий, под перетеканием событий понимается то, что событие сначала принимается наиболее конкретным элементом, а затем постепенно передается на менее конкретные узлы. Напротив, захват событий был предложен Netscape, и перетекание событий и захват показаны на рисунке ниже:
Хотя модель потока событий捕获 поддерживается только Netscape, в настоящее время IE9, Firefox и Google Chrome также поддерживают эту модель потока событий.
Преимущества перетекания событий
Поскольку события имеют механизм перетекания, мы можем использовать принцип перетекания, чтобы добавить события к родительскому уровню и запустить эффект выполнения. Конечно, это улучшает производительность.
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
for(var i = 0; i < aLi.length; i++){
aLi[i].onmouseover = function () {
this.style.backgroundColor = "blue";
};
ali[i].onmouseout = function () {
this.style.backgroundColor = "";
}
}
};
</script>
</head>
<body>
<div>
<ul id = "bubble">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
Таким образом, мы можем добавить события мыши к элементам li. Но если у нас много элементов li, это может повлиять на производительность.
Теперь мы можем реализовать такой эффект с помощью делегирования событий. HTML не изменяется:
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
// В любом событии, если элемент, на котором вы работаете, является источником события.
// IE: window.event.srcElement
// Стандарт: event.target
aUl.onmouseover = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "blue";
}
};
aUl.onmouseout = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() = "li"){
target.style.background = "";
}
}
};
</script>
Как предотвратить переброс событий? Вот пример:
<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//После предотвращения итерации события, если вы нажмете на灰色 коробку,整个过程 будет弹出一次对话框（обратите внимание на сравнение с стандартной ситуацией)
function showMsg(obj, e)
{
alert(obj.id);
stopBubble(e);
}
//Функция для предотвращения итерации события
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation();
else
window.event.cancelBubble = true
}
</script>
Нажмите на效果图外围的黑色:
Обработчики событий уровня DOM 0
Обычно назначение обработчика события с помощью js - это присвоение функции callback этому свойству обработчика события. У каждого элемента свои свойства обработчиков событий (свойства в是小ых буквах, например: onclick)
btn.onclick = function() {
console.log('hello');
};
Использование обработчиков событий уровня DOM 0 считается методом элемента. Поэтому this указывает на текущий элемент:
var btn = document.getElementById('myDiv');
//Событие, вызванное на DOM, создает объект события event
btn.onclick = function (event) {
alert(this.id); //myDiv
};
DOM level 1
DOM level 1 сосредоточен на модели документа HTML и XML. Он содержит функции навигации и обработки документов.
DOM level 1 стал рекомендованным стандартом W3C 1 октября 1998 года.
Рабочий проект второго издания был опубликован 29 сентября 2000 года.
Стоит отметить, что DOM level 0 не является规范ом W3C, а всего лишь определением эквивалентной функциональности в Netscape Navigator 3.0 и IE 3.0.
Обработчики событий DOM 2-го уровня
DOM 2-го уровня определяет два метода для指定ации и удаления операций обработчиков событий: addEventListener() и removeEventListener(), они принимают три параметра:
1. Название события. Например, click, как в примере выше
2. Функция в качестве обработчика события.
3. Булево значение (true означает вызов обработчика события на этапе перехвата, false - на этапе переброса)
С помощью метода addEventListener объекта Element можно также определить функцию回调 для события.
//element.addEventListener(event, function, useCapture)
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
console.log(this.id);
},false);
Обработчики событий в IE
Браузеры IE до версии 9 не поддерживают addEventListener() и removeEventListener().
В отличие от других браузеров, IE использует методы attachEvent() и detachEvent() для добавления обработчиков событий к DOM, так как IE8 и более ранние версии поддерживают только распространение событий, они принимают только два параметра:
1、Название обработчика события (до него должно быть добавлено on)
2、Функция обработчика события
Обработчики событий, добавленные с помощью attachEvent() выглядят следующим образом:
var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
console.log(this.id);
});
Стоит отметить, что при использовании метода attachEvent() обработчик событий выполняется в глобальном контексте, поэтому в этот момент this = window
Объект события
При вызове события на каком-либо узле DOM возникает объект события event, который содержит все相关信息, связанные с событием. Включая элемент, вызвавший событие, тип события и другие相关信息, связанные с конкретным событием. Объект события передается в качестве первого параметра в callback-функцию, слушающую событие. Мы можем использовать этот объект события event, чтобы получить的大量当前 события相关信息:
type (Строка) — Название события
target (узел) — Узел DOM, из которого произошло событие
currentTarget?(узел) — Текущий узел DOM, на котором вызывается текущий callback-функция (будет дано более подробное описание)
bubbles (булево) — Указывает, является ли это событие событием распространения (объяснение будет дано позже)
preventDefault (функция) — Эта функция предотвращает запуск defaultManager behavior пользователя агента браузера для текущего события. Например, предотвращает загрузку новой страницы по click событию элемента <a>
cancelable (булево) — Эта переменная указывает, можно ли предотвратить defaultManager behavior этого события с помощью вызова event.preventDefault
stopPropagation (функция) — Отменяет дальнейшее перехват или распространение события, использовать этот метод, когда bubbles = true
eventPhase: возвращает цифру, которая показывает текущую фазу события, 0 - это этап, когда событие начинается от表层 DOM до целевого элемента, 1 - это этап перехвата, 2 - это этап, когда событие достигает целевого элемента, 3 - это этап бубблинга.
Кроме того, объект события может иметь множество других свойств, но они все предназначены для конкретного события. Например,鼠标 события содержат свойства clientX и clientY, которые показывают положение мыши в текущем окне.
Кроме того, метод stopPropagation() используется для немедленного прекращения распространения события в DOM, то есть отмены дальнейшего бубблинга или перехвата событий.
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
alert("clicked");
event.stopPropagation();
};
// предотвращение вызова обработчика событий на document.body
document.body.onclick = function (event) {
alert("Body clicked");
};
Объект event существует только в процессе выполнения обработчика событий, после выполнения обработчика событий объект event автоматически удаляется.
Объект события в IE
При добавлении обработчика событий в DOM 0-го уровня, объект event существует как свойство объекта window:
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
var event = window.event;
alert(event.type); // click
};
Объект event в IE также содержит свойства и методы, связанные с созданным им событием.
cancleBubble: логический тип, по умолчанию false, но может быть установлен в true для отмены бубблинга событий, как и метод stopPropagation() в dom.
returnValue: логический тип, по умолчанию true, когда устанавливается в false, используется для отмены поведения事件的 по умолчанию, как и preventDefault() в dom.
srcElement: элемент целевая цель события, как и свойство target в dom.
type: строка, тип события, который был вызван.
Событие click
После того, как пользователь кликнет, объект event будет содержать следующие свойства.
pageX, pageY: координаты места клика по отношению к элементу html, единицы измерения - пиксели.
clientX, clientY: координаты места клика по отношению к окну просмотра (viewport), единицы измерения - пиксели.
screenX, screenY: координаты положения клика относительно экрана устройства, единица измерения - пиксели оборудования
clientX, clientY
иллюстрация: clientX и clientY, их значения представляют собой координаты水平和 вертикального положения курсора мыши в окне просмотра (без области прокрутки)
смещение
путем использования следующих 4 характеристик можно получить смещение элемента.
(1) offsetHeight: размер элемента в вертикальном направлении в пикселях. Включает высоту элемента, высоту видимой горизонтальной ленты прокрутки, высоту верхнего и нижнего полей.
(2) offsetWidth: размер элемента в горизонтальном направлении в пикселях. Включает ширину элемента, ширину видимой вертикальной ленты прокрутки, ширину левого и правого полей.
(3) offsetLeft: расстояние в пикселях от левого внешнего края элемента до левого внутреннего края его содержащего элемента.
(4) offsetTop: расстояние в пикселях от верхнего внешнего края элемента до верхнего внутреннего края его содержащего элемента.
pageX, pageY
эти характеристики представляют собой положение курсора мыши на странице, при отсутствии прокрутки значения pageX и pageY равны значениям clientX и clientY
размер прокрутки
размер прокрутки指的是 размер элемента, содержащего прокручиваемый контент.
ниже приведены 4 характеристики, связанные с размером прокрутки.
(1) scrollHeight: общая высота содержимого элемента без滚动条的.
(2) scrollWidth: общая ширина содержимого элемента без滚动条的.
(3) scrollLeft: количество пикселей, скрытых слева от области контента. Изменение этой характеристики позволяет изменить положение элемента.
(4) scrollTop: количество пикселей, скрытых над областью контента. Изменение этой характеристики позволяет изменить положение элемента.
события фокуса
события фокуса возникают при получении или потере фокуса элементом страницы, есть следующие 4 события фокуса:
1.blur: событие возникает, когда элемент теряет фокус, данное событие не всплывает.
2.focus: событие возникает, когда элемент получает фокус, не всплывает.
3.focusin: событие возникает, когда элемент получает фокус, всплытие.
4.focusout: событие возникает, когда элемент теряет фокус, всплытие.
события мыши
DOM 3 уровня определяет 9 событий мыши:
click: когда пользователь нажимает основную кнопку мыши, обычно это левая кнопка мыши или клавиша Enter, событие возникает.
dbclick: событие возникает при двойном клике мыши.
mousedown: когда пользователь нажимает любую кнопку мыши, событие возникает, данное событие не может быть вызвано с помощью клавиатуры.
mousemove: когда курсор мыши перемещается вокруг элемента, событие возникает повторно, данное событие не может быть вызвано с помощью клавиатурных событий.
mouseout: Возникает при выходе мыши из элемента, это событие не может быть инициировано клавиатурой.
mouseover: Возникает при входе мыши в элемент, это событие не может быть инициировано клавиатурой.
mouseenter: Подобно mouseover, но не бубнится и не срабатывает, когда курсор перемещается на потомков元素.
mouseleave: Подобно mouseout, но не бубнится. Не срабатывает над элементом.
mouseup: Возникает при отпуске клавиши мыши, не может быть инициирован клавиатурой.
Объект события, передаваемый обработчику события мыши, имеет свойства clientX и clientY, которые указывают на координаты курсора мыши по отношению к окну контейнера. Добавьте смещение прокрутки окна, чтобы преобразовать положение мыши в координаты документа.
Все элементы на странице поддерживают события мыши. За исключением mouseenter и mouseleave, все события бубнятся, и их можно отменить по умолчанию. Однако отмена поведения по умолчанию для событий мыши может повлиять на другие события, так как некоторые события мыши взаимозависимы.
События拖拉
(1) Событие drag
Событие drag возникает в процессе тяги исходного объекта.
(2) События dragstart, dragend
Событие dragstart возникает, когда пользователь начинает тянуть объект мышью, и событие dragend возникает, когда тяга заканчивается.
(3) События dragenter, dragleave
Событие dragenter возникает, когда исходный объект тянет в целевой объект, и срабатывает на целевом объекте. Событие dragleave возникает, когда исходный объект уходит от целевого объекта, и срабатывает на целевом объекте.
(4) Событие dragover
Событие dragover возникает, когда исходный объект тянет над другим объектом, и срабатывает на последнем.
(5) Событие drop
Когда исходный объект тянется над целевым объектом, и пользователь отпускает мышь, событие drop возникает на целевом объекте.
Вот и все, что у нас есть в этой статье. Надеюсь, это поможет вам в изучении, и希望大家 поддержат наш сайт呐喊 учебник.