javascript: EventTarget Interface

Original sentence: Https://Wangdoc.Com/javascript/index.Html

EventTarget Interface

Nature of the event is a communication between the various components of the program is also an asynchronous programming. DOM support a large number of events, beginning of the chapter describes the DOM event programming.

Outline

DOM event operation (monitor and trigger), are defined in EventTargetthe interface. All nodes are objects deploying this interface, a number of other events communication needs of the browser built-in objects (such as, XMLHttpRequest, , AudioNode) AudioContextalso deployed this interface.

This interface provides three primary example method.

• addEventListener: Listener function to bind events
• removeEventListener: Remove the event listener function
• dispatchEvent:trigger event

EventTarget.addEventListener()

EventTarget.addEventListener()Used on the current node or object that defines the function of a particular event monitor. Once this event occurs, it will monitor the implementation of the function. This method has no return value.

target.addEventListener(type, listener[, useCapture]);

This method accepts three arguments.

• type: Event name, case sensitive.
• listener: Monitor function. When an event occurs, it will call the listener function.
• useCapture: Boolean value that indicates whether the trigger monitor function ( "communication events" see later section) during the capture phase (capture), the default is false(listen only function is triggered in the bubbling phase). This parameter is optional.

Below is an example.

function hello() {
  console.log('Hello world');
}

var button = document.getElementById('btn');
button.addEventListener('click', hello, false);

The above code, buttonthe node addEventListenermethod binding clicklistener function event hello, the function is only triggered in the bubbling phase.

About parameters, there are two caveats.

First, the second parameter in addition to the listener function, but also may be one having handleEventan object method.

buttonElement.addEventListener('click', {
  handleEvent: function (event) {
    console.log('click');
  }
});

In the above code, addEventListenerthe second parameter of the method is to have a handleEventtarget method.

Secondly, the third parameter in addition to a Boolean value useCapture, may also be a configuration object attribute. The object has the following properties.

• capture: Boolean value that indicates whether the event 捕获阶段to trigger the listener function.
• once: Boolean value that indicates whether the listener function is triggered only once, and then automatically removed.
• passive: Boolean value that indicates monitor function does not call the event preventDefaultmethod. If the listener function calls, the browser will ignore this requirement, and the output line monitoring station warning.

If you want the event listener function is executed only once, you can open the properties of the configuration object onceproperties.

element.addEventListener('click', function (event) {
  // 只执行一次的代码
}, {once: true});

addEventListenerThe method may be for the same event for the current object, add a number of different monitor functions. These functions in accordance with the order of addition of the trigger, which is to add the first trigger. If it is repeatedly add the same listener function the same event, the function only once, the excess will be added automatically removed (without using the removeEventListenermanual method to remove).

function hello() {
  console.log('Hello world');
}

document.addEventListener('click', hello, false);
document.addEventListener('click', hello, false);

The implementation of the above code, click on the document only one line of output Hello world.

If you want to pass parameters to monitor function, it can be packaged with an anonymous function monitor function.

function print(x) {
  console.log(x);
}

var el = document.getElementById('div1');
el.addEventListener('click', function () { print('Hello'); }, false);

The above code via anonymous function, the listener function printpassed parameter.

Monitor internal functions this, current events point to that object resides.

// HTML 代码如下
// <p id="para">Hello</p>
var para = document.getElementById('para');
para.addEventListener('click', function (e) {
  console.log(this.nodeName); // "P"
}, false);

The above code inside the listener function thisobject that points to where the event para.

EventTarget.removeEventListener()

EventTarget.removeEventListenerThe method used to remove addEventListenerevent listener function method to add. This method has no return value.

div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

removeEventListenerMethod parameters, and addEventListenerexactly the same method. Its first parameter "event type" case-sensitive.

Note that the removeEventListenermethod of removing the monitor function, must be addEventListenerthat the listener function method to add, and must be in the same element node, otherwise invalid.

div.addEventListener('click', function (e) {}, false);
div.removeEventListener('click', function (e) {}, false);

The above code removeEventListenerdoes not work, because the listener function is not the same anonymous function.

element.addEventListener('mousedown', handleMouseDown, true);
element.removeEventListener("mousedown", handleMouseDown, false);

In the above code, removeEventListenerthe method is ineffective because the third parameter is not the same.

EventTarget.dispatchEvent()

EventTarget.dispatchEventMethod triggers the specified event on the current node, thereby triggering the execution monitor function. This method returns a Boolean value, as long as there is a listener function calls Event.preventDefault(), the return value falseotherwise true.

target.dispatchEvent(event)

dispatchEventThe method is a parameter Eventinstance object (see "Event objects" section).

para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);

In the code above the current node triggers the clickevent.

If the dispatchEventmethod parameter is null or not a valid event object, an error.

The following code is dispatchEventthe return value of the method, it is determined whether the event is canceled.

var canceled = !cb.dispatchEvent(event);
if (canceled) {
  console.log('事件取消');
} else {
  console.log('事件未取消');
}