This is the 19th day of my participation in the August More Text Challenge.

The event

Three elements of the event

Event element –> Object that triggers the event (who triggers it)

Event type –> How to trigger events (e.g. mouse click, mouse pass, keyboard press)

The event handler is done by way of a function assignment

Perform the three steps of the event

1. Obtain the event source

2. Register event (bind event) –> event source. triggered

3. Add event handlers (in the form of function assignments)

DOM manipulation element

We can use DOM to manipulate elements to change their content, style, and so on

Two that modify the contents of the elementattribute

1. Element.innertext (non-standard)

The selectedContent from the start to the end, but it removes HTML tags, as well as whitespace and newlines

You can also use the DOM to manipulate elements without adding events and simply set element.innertext to the desired modification

2 , element.innerhtml (W3C recommendation)

The selectedAll content from start to end, including HTML tags, with Spaces and line feeds

Difference: Element. innerText does not recognize HTML tags. Element. innerHTML does recognize HTML tags

Element name = ‘value’ –> Element name = ‘value’ –> Element name = ‘value’

Attribute operations on form elements

Element. innerHTML only works with normal tags; To modify text attributes in a form, use input.value

Other attributes: Type, Checked, Selected, disabled

Two form events

● Get focus input. Onfocus

● Lost focus input.onblur

DOM Manipulating style properties (size, color, position)

element.style Inline style operation, usually in the case of less style, simple use (such as element. Style. BackgroundColor = ‘pink’)

The resulting in-line style is heavily weighted (by examining the elements on the page you can see that the in-line style is generated inside the tag)

element.className Class name style operation, suitable for style more complex function

● 1. Declare the style in CSS through the class selector, but the element is not called

● 2. Set element.className = ‘className’ with an event in js so that the element references the declared class selector

● By checking the element on the page, you can find that the class name has been changed inside the tag, and the original class name of the tag will be overwritten; To keep the old className, set it to element.className = ‘old className new className’

● Note: js style Settings should use camel name, such as backgroundColor, fontSize

Exclusive thought algorithm

I have the same set of elements. I want toOne of these elementsTo implement patterns through events, you need to use exclusivity

● 1. All elements clear style (kill others)(common for loop)

● 2. Style the target element (leave me alone)

Custom attributes

Get custom attribute values –>element.getAttribute(‘ attribute name ‘)

● The attributes we add ourselves are custom attributes

Setting property values

● Element. Attribute name = ‘value’

● This method does not get custom attributes

● Element.setAttribute (‘ attribute ‘, ‘value ‘)

● This usage is mainly for custom attributes

● Distinguish between class names

●   element.className = ‘ ‘;

● Element.setAttribute (‘class’, ‘attribute name ‘)

● Remove custom attributes

● Element.removeAttribute (‘ attribute ‘)

Purpose: to save and use data; Some data can be saved to the page without saving to the database

H5 new

● H5 specifies that a custom attribute name starts with data- and is assigned

● H5 new method to get custom attributes

● Element.dataset. Property name, or element.dataset[‘ property value ‘] (ie11 only supports this)

● Dataset is a collection that retrieves all custom properties starting with data- (only custom properties starting with data-)

* note:

● When the user-defined attribute is data-attribute name, you can use element.dataset directly. Attribute name retrieval

● When the name of the custom attribute is long and connected by multiple bars such as data-list-name, the camel name is used to fetch –> element.dataset. ListName