Метод eventtarget.removeeventlistener()

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Свойства

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

Отображает, какие клавиши были нажаты во время движения мыши.


Только для чтения
Отображение X координат курсора мыши в локальной системе координат (DOM контент).
Только для чтения
Отображение Y координат курсора мыши в локальной системе координат (DOM контент).
Только для чтения
Возвращает значение  если клавиша control была нажата во время движения мыши.
Возвращает значение  если клавиша meta была нажата во время движения мыши.
Отображает X координат указателя мыши относительно позиции последнего события.
Отображает Y координат указателя мыши относительно позиции последнего события.
Только для чтения
Отображает X координат указателя мыши относительно позиции границы отступа целевого узла.
Отображает Y координат указателя мыши относительно позиции границы отступа целевого узла.
Только для чтения
Отображает X координат указателя мыши относительно всего документа.
Отображает Y координат указателя мыши относительно всего документа.
Возвращает id затронутого событием региона. Если ни какой регион затронут не был, возвращает null.
Второстепенная цель события, если таковая есть.
Только для чтения
Отображает X координат указателя мыши в пространстве экрана.
Отображает Y координат указателя мыши в пространстве экрана.
Только для чтения
Возвращает true если клавиша shift была нажата, когда произошло событие мыши.
Только для чтения
Возвращает код последней нажатой клавиши, когда произошло событие мыши.
Отображает давление которое было осуществленно при нажатии. Значение будет между (минимальное давление) и (максимальное давление).

The type of device that generated the event (one of the constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).

Отображает количество приложенного давления при клике.
Alias для .
Alias для 

Объект «событие» (event)

Объект событие всегда передается обработчику и содержит массу полезной информации о том где и какое событие произошло.

Способов передачи этого объекта обработчику существует ровно два, и они зависят от способа его установки и от браузера.

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

Например:

function doSomething(event) {
	// event - будет содержать объект события
}

element.onclick = doSomething;

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

Можно назначить и вот так:

element.onclick = function(event) {
	// event - объект события
}

Интересный побочный эффект — в возможности использования переменной при назначении обработчика в HTML:

<input type="button" onclick="alert(event)" value="Жми сюда не ошибешься"/>

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

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

То есть, все должно работать так:

// обработчик без аргументов
function doSomething() {
	// window.event - объект события
}

element.onclick = doSomething;

Обратите внимание, что доступ к при назначении обработчика в HTML (см. пример выше) по-прежнему будет работать

Такой вот надежный и простой кросс-браузерный доступ к объекту события.

Можно кросс-браузерно получить объект события, использовав такой приём:

function doSomething(event) {
    event = event || window.event

    // Теперь event - объект события во всех браузерах.
}

element.onclick = doSomething

Как мы уже говорили раньше, при описании обработчика события в HTML-разметке для получения события можно использовать переменную с названием .

<input type="button" onclick="alert(event.type)" value="Нажми меня"/>

Этот код в действии:

Это совершенно кросс-браузерный способ, так как по стандарту — название первого аргумента функции-обработчика, которую автоматом создаст браузер; ну а в IE значение будет взято из глобального объекта .

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


В этом разделе мы рассмотрим следующий вопрос: «Влияет ли на всплытие события то, что мы отменили выполнение стандартного действия браузера, которое с ним связано?»

Чтобы разобраться в этом вопросе, давайте рассмотрим следующий пример:

<div>
  <!-- Этому элементу мы отменим стандартное действие, которое выполняет браузер -->
  <a id="myAnchor" href="https://www.yandex.ru/">
    Перейти на сайт Яндекс
  </a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var allElements = document.getElementsByTagName("*");
  for (var i=0; i < allElements.length; i++) {
    allElements.addEventListener("click",function() {
      console.log(this.tagName);
      //если элемент имеет id="myAnchor"
      if (this.id === "myAnchor") {
        console.log("Мы отменили стандартное действие браузера");
        //отменить стандартное действие браузера
        //(прервать выполнение обработчика, связанного с этим событием)
        event.preventDefault();
      }
    },false);
  };
  document.addEventListener("click",function() {console.log(this);},false);
  window.addEventListener("click",function() {console.log(this);},false);
});
</script>

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

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

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

element.addEventListener("click",function(event) {
  ...
  //отменить стандартные действия браузера
  еvent.рreventDefault();
  //отменить всплытие события, т.е. проткнуть пузырь
  event.stopPropagation();
},false);

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

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

示例

添加一个简单的监听器

下面这个例子用来展示如何使用  监听鼠标点击一个元素。

<table id="outside">    
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>
// 改变t2的函数
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 为table添加事件监听器
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

在上个例子中, 是一个  事件的监听器,通过使用注册到table对象上。在表格中任何位置单击都会触发事件并执行。

带有匿名函数的监听器

现在我们来看看如何使用匿名函数来为事件监听器进行传参。

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>
// 改变t2值的函数
function modifyText(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
 
// 为table对象添加事件监听器
var el = document.getElementById("outside");
el.addEventListener("click", function(){modifyText("four")}, false);

请注意,侦听器是一个匿名函数,它封装了代码,然后代码可以将参数发送到函数,该函数负责实际响应事件。

带有箭头函数的监听器

这个例子用来展示如何通过箭头函数来实现一个监听器。

HTML

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

JavaScript

// Function to change the content of t2
function modifyText(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
 
// Add event listener to table with an arrow function
var el = document.getElementById("outside");
el.addEventListener("click", () => { modifyText("four"); }, false);

请注意尽管匿名函数和箭头函数有些类似,但是他们绑定不同的对象。匿名函数(和所有传统的Javascript函数)创建他们独有的对象,而箭头函数则继承绑定他所在函数的对象。

这意味着在使用箭头函数时,原函数中可用的变量和常量在事件处理器中同样可用。

options用法示例

HTML

<div class="outer">
    outer, once & none-once
    <div class="middle" target="_blank">
        middle, capture & none-capture
        <a class="inner1" href="https://www.mozilla.org" target="_blank">
            inner1, passive & preventDefault(which is not allowed)
        </a>
        <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
            inner2, none-passive & preventDefault(not open new page)
        </a>
    </div>
</div>

CSS

    .outer, .middle, .inner1, .inner2 {
        display:block;
        width:520px;
        padding:15px;
        margin:15px;
        text-decoration:none;
    }
    .outer{
        border:1px solid red;
        color:red;
    }
    .middle{
        border:1px solid green;
        color:green;
        width:460px;
    }
    .inner1, .inner2{
        border:1px solid purple;
        color:purple;
        width:400px;
    }

JavaScript

let outer  = document.getElementsByClassName('outer') ;
    let middle = document.getElementsByClassName('middle');
    let inner1 = document.getElementsByClassName('inner1');
    let inner2 = document.getElementsByClassName('inner2');

    let capture = {
        capture : true
    };
    let noneCapture = {
        capture : false
    };
    let once = {
        once : true
    };
    let noneOnce = {
        once : false
    };
    let passive = {
        passive : true
    };
    let nonePassive = {
        passive : false
    };
    
    
    outer .addEventListener('click', onceHandler, once);
    outer .addEventListener('click', noneOnceHandler, noneOnce);
    middle.addEventListener('click', captureHandler, capture);
    middle.addEventListener('click', noneCaptureHandler, noneCapture);
    inner1.addEventListener('click', passiveHandler, passive);
    inner2.addEventListener('click', nonePassiveHandler, nonePassive);

    function onceHandler(event)
    {
        alert('outer, once');
    }
    function noneOnceHandler(event)
    {
        alert('outer, none-once, default');
    }
    function captureHandler(event)
    {
        //event.stopImmediatePropagation();
        alert('middle, capture');
    }
    function noneCaptureHandler(event)
    {
        alert('middle, none-capture, default');
    }
    function passiveHandler(event)
    {
        // Unable to preventDefault inside passive event listener invocation.
        //在调用passive事件监听器内部不能使用preventDefault
        event.preventDefault();
        alert('inner1, passive, open new page');
    }
    function nonePassiveHandler(event)
    {
        event.preventDefault();
        //event.stopPropagation();
        alert('inner2, none-passive, default, not open new page');
    }

语法

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, useCapture, wantsUntrusted );  // Gecko/Mozilla only

参数

表示监听事件类型的字符串。 当所监听的事件类型触发时,会接收到一个事件通知(实现了  接口的对象)对象。 必须是一个实现了 接口的对象,或者是一个函数。有关回调本身的详细信息,请参阅  options 可选

一个指定有关 属性的可选参数对象。可用的选项如下:

  • :  ,表示  会在该类型的事件捕获阶段传播到该 时触发。
  • :  ,表示    会在其被调用之后自动移除。
  • : ,设置为true时,表示  永远不会调用 。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。查看  了解更多.
  • : 只能在 XBL 或者是 Firefox’ chrome 使用,这是个 ,表示 被添加到 system group。

  可选

,在DOM树中,注册了listener的元素, 是否要先于它下面的EventTarget,调用该listener。 当useCapture(设为true) 时,沿着DOM树向上冒泡的事件,不会触发listener。当一个元素嵌套了另一个元素,并且两个元素都对同一事件注册了一个处理函数时,所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看  及  文档。 如果没有指定,  默认为 false 。 

注意: 对于事件目标上的事件监听器来说,事件会处于“目标阶段”,而不是冒泡阶段或者捕获阶段。在目标阶段的事件会触发该元素(即事件目标)上的所有监听器,而不在乎这个监听器到底在注册时 参数值是true还是false。

注意:  仅仅在现代浏览器最近的几个版本中是可选的。 例如 Firefox 6以前的版本都不是可选的。为了能够提供更广泛的支持,你应该提供这个参数。

如果为 , 则事件处理程序会接收网页自定义的事件。此参数只适用于 Gecko(chrome的默认值为true,其他常规网页的默认值为false),主要用于附加组件的代码和浏览器本身。

Действие браузера по умолчанию

Браузер имеет своё собственное поведение по умолчанию для различных событий.

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

element.onclick = function(event) {
    event = event || window.event 

    if (event.preventDefault) {
        // Вариант стандарта W3C: 
        event.preventDefault()
    } else {
        // Вариант Internet Explorer:
        event.returnValue = false
    }
}

Вместо можно записать одну строчку:

..
event.preventDefault ? event.preventDefault() : (event.returnValue=false)
...

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

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

При клике перехода не произойдет, а рамка вокруг ссылки появится.

Код примера:

var a = document.getElementById('my-focus-a')
a.onfocus = a.onclick = function(e) {
    e = e || window.event
    // другая кроссбраузерная запись остановки события
    e.preventDefault ? e.preventDefault() : (e.returnValue=false)
}

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()


С этим читают