What events are there in js? Introduction to common events in js-JS Tutorial-php.cn

What events are there in js? Introduction to common events in js

不言

Release： 2018-09-18 10:08:18

Original

10339 people have browsed it

JavaScript gives us the ability to create dynamic pages. Events are behaviors that can be detected by JavaScript. Every element in a web page can generate certain events that trigger JavaScript functions. So, what events are there in js? This article will introduce you to the commonly used events in js.

Without further ado, let’s get straight to the point.

1. Onclick event, a commonly used event in js

Click event (onclick is not a method in js, onclick is just a dom interface provided by the browser for js, so that js can operate DOM, so onclick is case-sensitive. For example, HTML code does not need to be case-sensitive).

Code example of onclick event in js:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
    functionmyFunction(){
       alert("测试onclick点击事件");
    }
    </script>
</head>
<body>
<center>
<buttononclick="myFunction()">点击这里</button>
</center>
</body>
</html>

Copy after login

Description:

onclick is usually generated in the following basic objects:

button (button object), checkbox (check box), radio (radio button), reset buttons (reset button), submit buttons (submit button)

2. The onload event, a commonly used event in js

, can be executed by body, , where you can write a method after onload, such as: onload="test()", and then write a test() method in JavaScript, then when the page starts loading Call this method first.

Code example of onload event in js:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
    functiontest(){
       alert("测试onload方法");
    }
    </script>
</head>
<bodyonload="test()">
</body>
</html>

Copy after login

Note: This method can only be written in the tag

3. Onchange event, a commonly used event in js

is triggered when the content changes. It can be used for objects such as text boxes and list boxes. This event is generally used to respond to other changes caused by the user modifying the content.

Code example of onchange event in js:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
       functionupperCase(){
         varx = document.getElementById("fname").value;
         document.getElementById("fname").value = x.toUpperCase();
        }
     </script>
</head>
<body>
 <p>
 <labelfor="name">用户名：</label>
 <inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
</html>

Copy after login

Description: When the user enters text into a text box, the onchange event will not be triggered, only the user input ends Finally, click the area outside the text box to trigger the event when the text box loses focus. If it is a drop-down box, it will be triggered after the selection is completed.

The effect of the above example is that when the input box loses focus, the content is converted to uppercase. This happens because the input must lose focus before content changes can be detected. The change event is usually used for drop-down menu select tags.

4. Onblur event and onfocus event, commonly used events in js

This event is triggered when the current element loses focus, and the corresponding onfocus event: gets focus Event; onblur event: The element loses focus.

Code examples of onblur event and onfocus event in js:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionchkvalue(txt) {
  if(txt.value=="") alert("文本框里必须填写内容!");
  }
 functionsetStyle(x){
      document.getElementById(x).style.background="yellow"
 }
 </script>
</head>
<body>
失去焦点：
 <inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>
得到焦点：
    <inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">
</body>
</html>

Copy after login

5. Onscroll event of commonly used events in js

Window scroll event: function called when the page scrolls. This event is written outside the method without parentheses after the function name, for example window.onscroll=move.

Code example of onscroll event in js:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionmove() {
  alert("页面滚动时调用");
  }
window.onscroll = move;
 </script>
</head>
<body>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>

Copy after login

6. Onsubmit event of common events in js

belongs to < ;form> form element, written in the

form tag. Syntax: onsubmit="return function name()".

Code example of onsubmit event in js:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionmove() {
  alert("测试onsubmit........"+testForm.name.value);
  }
 </script>
</head>
<body>
<formaction=""method="post"name="testForm"onsubmit="returnmove()">
    <inputtype="text"name="name"value="">
    <br>
    <inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
</html>

Copy after login

7. Commonly used events in js: mouse-related events

Onmouseover: When the mouse moves over the range of an object, an event is triggered to call the function. Note: In the same area, no matter how you move, the function will only be triggered once.

Onmouseout: When the mouse leaves the scope of an object, an event is triggered to call the function.

Onmousemove: When the mouse moves above the range of an object, an event is triggered to call the function. Note: In the same area, an event is triggered as long as the mouse moves once.

Code example:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>
<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley">
</body>
</html>

Copy after login

Onmouseup: Trigger event when the mouse is released

Onmousedown: When the mouse key is pressed Events are triggered when

Code example:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmouseDown(){
    document.getElementById("p1").style.color="red";
}
functionmouseUp(){
    document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色mouseUp(。) 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
</html>

Copy after login

The above is the entire content of this article. For more information about js events, please refer tojs Development Manual.

The above is the detailed content of What events are there in js? Introduction to common events in js. For more information, please follow other related articles on the PHP Chinese website!