Home >Web Front-end >Front-end Q&A >What are the commonly used events in javascript

What are the commonly used events in javascript

青灯夜游Original: 2022-02-21 17:37:0513074browse

Commonly used events in JavaScript are: 1. Click events (onclick and ondblclick); 2. Focus events (onblur and onfocus); 3. Loading events (onload); 4. Mouse events; 5. Keyboard events ; 6. Selection and change events; 7. Form events.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Events in JS:

Concept: After certain components perform certain operations, they trigger the execution of certain codes.
Events: Certain operations. Such as: click, double-click, keyboard pressed, mouse moved
Event source: component. Such as: button text input box...
Listener: code.
Register listening: combine events, event sources, and listeners. When an event occurs on the event source, the execution of a listener code is triggered.

1. Commonly used events

1) Click event:

onclick: click event
ondblclick: double-click event

2) Focus event

onblur: lose focus
onfocus: element gains focus.

3) Loading event:

onload: A page or an image is loaded.

4) Mouse event:

onmousedown The mouse button is pressed.
onmouseup The mouse button is released.
onmousemove The mouse is moved.
onmouseover Move the mouse over an element.
onmouseout The mouse moves away from an element.

5) Keyboard events:

onkeydown A keyboard key is pressed.
onkeyup A keyboard key is released.
onkeypress A keyboard key is pressed and released.

6) Selection and change events

onchange The contents of the field are changed.
onselect The text is selected.

7) Form event:

onsubmit The confirmation button is clicked.
onreset The reset button is clicked.

2. Event registration

3.1. What is event registration (binding)?

In fact, it tells the browser what operation codes to execute when the event responds, which is called event registration or event binding.

3.2. Two ways to register events (static registration events, dynamic registration events)

Static registration events : The event attribute of the HTML tag is directly assigned to the code after the event response. This method is called static registration.

function sayHello() {
    alert("hello js!");
}
<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<!--以下代码的含义是：将sayHello函数注册到钮上，等待click事件发生之后，
该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()"/>

Dynamic registration of events: refers to first getting the dom object of the label through js code, and then through the dom object. Event name=function(){} is assigned to the event after the event response The code is called dynamic registration.

Basic steps for dynamic registration:

1. Get the label object

2. Label object.Event name=fucntion(){}

<!--第二种注册事件的方式，是使用纯JS代码完成事件的注册。-->
<input type="button" value="hello1" id="mybtn1"/>
<input type="button" value="hello2" id="mybtn2"/>
<input type="button" value="hello3" id="mybtn3"/>

<script type="text/javascript">
    function dynamic(){
        alert("动态注册事件1");
    }
    // 第一步:先获取这个钮对象()
    /*
        document:是 JavaScript语 言 提 供 的 一 个 对 象 （ 文 档 ), document是 JavaScript语 言 提 供 的 一 个 对 象 （ 文 档 ),
        get: 获 取
        Element:元 素 （ 就 是 标 签 
        By:通 过 。 。 由 。 。 经 。 。 。
        Id: id 属 性
        getElementById: 通 过 id 属 性 获 取 标 签 对
    */
    var btnobj1 = document.getElementById("mybtn1");
    // 第二步:给钮对象的onclick属性赋值
    btnobj1.onclick = dynamic;// 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
                                // 这行代码的含义是,将回调函数doSome注册到click事件上.

    var btnobj2 = document.getElementById("mybtn2");
    btnobj2.onclick = function(){// 这个函数没名字,叫做匿名函数,这个匿名函数也是一个回调函数.
        alert("动态注册事件2");// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
    }

    document.getElementById("mybtn3").onclick = function () {
        alert("动态注册事件3");
    }
</script>

Demonstrate the Enter key 13 and the ESC key 27 through the keydown event

<body>
<script type="text/javascript">
    // 回车键的键值是13
    // ESC键的键值是27
    window.onload = function () {
      /*  var keyvalue = document.getElementById("key");
        keyvalue.onkeydown = function (event) {
            // 获取键值对象
            alert(event);// 什么键显示都为[object KeyboardEvent]
            // 对于“键盘事件对象"来说,都keyCode属性用来获取键值.
            alert(event.keyCode);//回车键显示13
        }
*/
        var keyvalue = document.getElementById("key");
        keyvalue.onkeydown = function (event) {
            if(event.keyCode == 13){
                alert("正在进行验证")
            }
        }
    }
</script>

<input type="text" id="key"/>

</body>

[Related recommendations: javascript learning tutorial】

The above is the detailed content of What are the commonly used events in javascript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html JS function 对象事件 dom 表单事件鼠标事件键盘事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to remove remainder in javascriptNext article：How to remove remainder in javascript

See more

What are the commonly used events in javascript

1. Commonly used events

2. Event registration

Related articles