event objects and summary of various events

Event(event)

event object

(1)What is an event object?

The Event object represents the state of the event, such as the element in which the event occurred, the state of the keyboard keys, the position of the mouse, and the state of the mouse button. Events are often used in conjunction with functions, which are not executed until the event occurs!

(2)Event related methods and properties

　1. Google event.stopPropagation(), IE event.CancelBubble=true: terminate the event in the capture, target processing or bubble stage of the propagation process spread further. After calling this method, the handler that handles the event on the node will be called, and the event will no longer be dispatched to other nodes

　2. Google event.preventDefault(), IE event.returnvalue=false: Cancel the event The default action (href of a tag).

　3. event.clientX, event.clientY: X, Y coordinates (window coordinates) of the mouse relative to the visible area of ​​the browser window. The visible area does not include toolbars and scroll bars. Both IE events and standard events define these two attributes

4. event.offsetX, event.offsetY: X, Y coordinates of the mouse relative to the event source element (the element that triggered the event), only IE events have These two attributes have no corresponding attributes for standard events. Same as event.offsetLeft, event.offsettop.

5. event.screenX, event.screenY: X, Y coordinates of the mouse relative to the upper left corner of the user's monitor screen. Both standard events and IE events define these two properties.

6. event.keyCode: Get the code value of the key. Example: How do we know which key we press in the program? We can get it through keyCode. The programmer has defined a code for each key on the keyboard from the beginning. In the program we can judge the value. Know which key we clicked.

1. Mouse event, all elements on the page can trigger

click: Triggered when the user clicks the mouse button or presses the Enter key.

input.onclick = function () {
　　alert('Lee');
};

dblclick: Fired when the user double-clicks the primary mouse button.

input.ondblclick = function () {
　　alert('Lee');
};

mousedown: Triggered when the user presses the mouse but has not yet bounced it up.

input.onmousedown = function () {
　　alert('Lee');
};

mouseup: Fired when the user releases the mouse button.

input.onmouseup = function () {
　　alert('Lee');
};

mouseover (mouseenter this method does not bubble) : Triggered when the mouse moves over an element.

input.onmouseover = function () {
　　alert('Lee');
};

mouseout (mouseleaver does not bubble in this method) : Triggered when the mouse moves out of an element.

input.onmouseout = function () {
　　alert('Lee');
};

mousemove: Fired when the mouse pointer moves over the element.

input.onmousemove = function () {
　　alert('Lee');
};

2. Keyboard event

keydown: Triggered when the user presses any key on the keyboard. If the user presses and holds it down, it will be triggered repeatedly.

onkeydown = function () {
　　alert('Lee');
};

keypress: Triggered when the user presses a character key on the keyboard. If pressed and held down, it will be triggered repeatedly.

onkeypress = function () {
　　alert('Lee');
};

keyup: Triggered when the user releases a key on the keyboard.

onkeyup = function () {
　　alert('Lee');
};

3.HTMLEvent

load: When the page is fully loaded, in window Triggered above, or on the frameset when the frameset has finished loading.

window.onload = function () {
　　alert('Lee');
};

unload: Triggered on window when the page is completely unloaded, or when the frameset is unloaded. Triggered on the frameset.

window.onunload = function () {
　　alert('Lee');
};

select: When the user selects the text box (input or textarea) Triggered by one or more characters.

input.onselect = function () {
　　alert('Lee');
};

change: When the content of the text box (input or textarea) changes and Triggered after losing focus.

input.onchange = function () {
　　alert('Lee');
};

focus: Triggered on window and related elements when the page or element gets focus.

input.onfocus = function () {
　　alert('Lee');
};

blur: Triggered on window and related elements when the page or element loses focus.

input.onblur = function () {
　　alert('Lee');
};

submit: Triggered on the ff9c23ada1bcecdd1a0fb5d5a0f18437 element when the user clicks the submit button.

form.onsubmit = function () {
　　alert('Lee');
};

reset：当用户点击重置按钮在ff9c23ada1bcecdd1a0fb5d5a0f18437元素上触发。

form.onreset= function () {
　　alert('Lee');
};

resize：当窗口或框架的大小变化时在window或框架上触发。

window.onresize = function () {
　　alert('Lee');
};

scroll：当用户滚动带滚动条的元素时触发。

window.onscroll = function () {
　　alert('Lee');
};

The above is the detailed content of event objects and summary of various events. For more information, please follow other related articles on the PHP Chinese website!