The event object

onmousemove

• This event is triggered when the mouse moves over the element

The event object

• When the response function to an event is fired, the browser passes an event object as an argument to the response function each time
• The event object encapsulates all information related to the current event, such as: the coordinates of the mouse, which key was pressed on the keyboard, and the direction of the mouse wheel

ClientX and clientY

• clientX
• Returns the horizontal coordinates of the mouse pointer when the event is triggered
• clientY
• Returns the vertical coordinates of the mouse pointer when the event is raised

ClientX and clientY are used to get the coordinates of the current visible window

The offset of div is relative to the entire page

PageX and pageY can get the coordinates of the mouse relative to the current page

These two properties are not supported in IE8, so do not use them if you want to be IE8 compatible

In IE8, the browser does not pass event objects when the response function is penalized. In IE8 and below, event objects are saved as properties of the Window object.

Resolve compatibility issues with event objects

event = event || window.event;

The event bubbling

The bubbling of events

• Bubbling is the upward propagation of events, so that when an event on a descendant element is triggered, the same event on its ancestor element is also triggered
• Most bubbling is useful in development, and if you don’t want events to occur, you can use event objects to cancel bubbling

cancelBubble

CancelBubble can be cancelled by setting cancelBubble on the event object to true

Delegate to events

• A common ancestor element that binds events to an element uniformly, so that when an event on a descendant element fires, it bubbles all the way to the ancestor element, thus processing the event through the ancestor element’s response function
• Bubble is used in event delegation, which can reduce the number of event binding and improve the performance of the program

target

• The target in event represents the object that triggered the event

Binding of events

addEventListener()

• Bind the response function using the form object. Event = function
• Only one response function can be bound to an event of an element
• You cannot bind more than one. If you bind more than one, the previous one will be overwritten

• The response function can also be bound to an element through the addEventListener() method

  • Parameters:
    • 1. Event string, not on
    • 2. The callback function, which is called when an event is triggered
    • 3. Whether the event is triggered during replenishment requires a Boolean value, which is generally passed as false

    

• Using addEventListener(), you can bind multiple response functions to the same event on an element at the same time, so that when the event is fired, the response functions are executed in the order in which they were bound.

• This method does not support Internet Explorer 8 and below

• attachEvent()

  • In IE8 you can use attachEvent() to bind events
  • Parameters:
    • 1. The event string must be on
    • 2. Callback functions
  • This method can also bind multiple handlers to an event at the same time, except that it is executed after binding, in the reverse order as addEventListener()

AddEventListener cancels browser default properties (special)

• Use the addEventListener() method to bind the response function. Return false cannot be used when canceling the default behavior.
• You need to use event to cancel the default behavior event.parentDefault();
• However, IE8 does not support event.parentDefault(); This property will return an error if called directly
• The solution

AddEventListener in this

• This in addEventListener() is the object to which the event is bound
• AttachEcent () this is window
• You need to unify this for both methods

Define a function

• Used to bind the response function to the specified element
• Parameters:
• Obj The object to which the event is bound
• EventStr String of events (not on)
• Callback callback function

Complete bind

Binding practice

Transmission of events

• Netscape and Microsoft have different understandings about the spread of events

• Microsoft believes that events should be propagated from the inside out, meaning that when an event is fired, it should fire on the current element and then propagate to the current element’s ancestor, meaning that the event should be executed in the bubble phase

• Netscape believes that events should be propagated from the outside in, that is, when the current event is triggered, the event of the outermost ancestor element of the current element should be triggered first, and then propagated inward to descendant elements

• The W3C combined the two companies’ proposals and divided event propagation into three phases

  • 1. Capture phase
    • During the capture phase, events are captured from the outer ancestor element to the target element, but by default events are not emitted at this time
  • 2. Goal stage
    • The event catches the target element, and the capture ends by starting to fire events on the target element
  • 3. Bubble stage
    • Events are passed from the target element to its ancestor element, triggering events on the ancestor element in turn

• If you want to fire events during the capture phase, you can set the third parameter of addEventListener() to true. Normally we don’t want events to fire during the capture phase, so this parameter is usually false

• There is no capture phase in IE8 and below

Drag-and-drop exercises for events

Drag and drop process

• 1. Start dragging when the mouse is over the dragged element
• 2. Drag the element to follow the mouse as it moves
• 3. When the mouse is released, the dragged element is fixed in the current position

onmousedown

• The mouse button is pressed down

onmousemove

• Mouse moved

onmouseup

• The mouse button is released

onmouseout

• Move the mouse pointer away from an element

onmouseover

• Mouse over an element

Drag exception

When we drag and drop content from a web page, the browser will search for content in the search engine by default, which will cause the drag and drop function to be abnormal. This is the default behavior provided by the browser. If you do not want this behavior to happen, you can return false to cancel the default behavior

But that doesn’t work with IE8

setCapture

Only Internet Explorer is supported, but when called from Firefox it does not report an error, while when called from Chrome it does

When an element’s setCapture() method is called, the element captures the events associated with the next additional button press

releaseCapture

Cancel setCapture for events

Extract a function dedicated to drag and drop

Parameters: Enable drag elements

And then you put the function in there

Call it directly to whoever uses it

The event of the roller

onmousewheel

• Mouse wheel scrolling event is triggered when the wheel is scrolling, but Firefox does not support this property
• In Firefox you need to use DOMMouseScroll to bind scrolling events
• The addEventListener() function is required for this event; To bind

event.wheelDelta

• Can get the direction of the mouse wheel scrolling
• Roll up returns 120 roll down returns -120
• WheelDelta is a value that we don’t look at, we look at plus or minus
• This property is not supported in Firefox
• Firefox uses event.detail to get the scrolling direction

event.detail

• It’s negative 3 if you roll up, it’s 3 if you roll down

Default browser behavior

When the scroll wheel scrolls, if the browser has a scroll bar, the scroll bar will scroll with it. This is the default behavior of the browser, and you can disable the default behavior if you don’t want this to happen

• Use return false;

Keyboard events

onkeydown

• A keyboard key was pressed
• If you keep holding down a key
• When onKeyDown fires consecutively, there will be a longer interval between the first and second ones, and the others will be very fast
• This is designed to prevent misoperation

onkeyup

• A keyboard key has been released

onkeypress

• A keyboard key is pressed and released

Binding of keyboard events

Keyboard events are usually bound to objects that can get focus or docunment.

keyCode

• The keyCode can be obtained by keyCode

• It tells you which button is pressed
• In addition to keyCode, several properties are provided in the event object
• altKey
• ctrlKey
• shiftKey
• These three are used to determine if Alt, CTRL and Shift are pressed
• Returns true if pressed, false otherwise

Default behavior of text box

Enter content in the text box, which is the default behavior of onKeyDown. If the default behavior is cancelled in onKeyDown, the input content will not appear in the text box