Learn more about the most commonly used JavaScript events

JavaScript events:

Commonly used events:
Event Actions

Summarize

JavaScript events:

An event refers to the execution of certain code that is triggered when certain components perform certain operations.

Commonly used events:

property	Trigger timing
onabort	Image loading interrupted
onblur	The element loses focus
onchange	User changes the content of a field
onclick	Click the mouse on an object
ondblclick	Double-click an object
onerror	An error occurred while loading the document or image
onfocus	The element has focus
onkeydown	A keyboard key is pressed
onkeypress	A keyboard key is pressed or held down
onkeyup	A keyboard key was released
onload	A page or image has finished loading
onmousedown	A mouse button is pressed
onmousemove	The mouse is moved
onmouseout	Move the mouse away from an element
onmouseover	The mouse is moved over an element
onmouseup	A mouse button is released
onreset	The reset button was clicked
onresize	The window or frame is resized
onselect	Text is selected
onsubmit	The submit button is clicked
onunload	User logout page

Event Actions

Binding Events

Method 1 : Bind through the event attribute in the tag.

<body>
<img id="img" src="upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg">
<br/>
<button id="up" onclick="up()">Previous</button>&nbsp;
<button id="down" onclick="down()">Next</button>
</body>

<script>
    // Display the first function up() {
        let img = document.getElementById("img");
        img.setAttribute("src", "upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg")
    }
    // Display the second image function down() {
        let img = document.getElementById("img");
        img.setAttribute("src", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")
    }
</script>

Method 2 : Binding through DOM element attributes.

<body>

<img id="img" src="upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg">
<br/>
<button id="up">Previous</button>&nbsp;
<button id="down">Next</button>
</body>

<script>
    // Display the first function up() {
        let img = document.getElementById("img");
        img.setAttribute("src", "upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg")
    }

    let s = document.getElementById("up");
    s.onclick = up;

    // Display the second image function down() {
        let img = document.getElementById("img");
        img.setAttribute("src", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")
    }

    let x = document.getElementById("down");
    x.onclick = down;
</script>