js中有哪些事件？js中常用事件的介绍-易企推网

javascript使我们有能力创建动态页面。事件是可以被javascript侦测到的行为。网页中的每个元素都可以产生某些可以触发javascript函数的事件。那么，js中有哪些事件呢？本篇文章将给大家来介绍关于js中常用的事件。

js中有哪些事件？js中常用事件的介绍

话不多说，我们来直接进入正题。

一、js中常用事件之onclick事件

点击事件（onclick并不是js中的方法，onclick只是浏览器提供js的一个dom接口，让js可以操作dom，所以onclick大小写都是没问题的，比如HTML代码就不用区分大小写）。

js中onclick事件的代码示例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>JavaScript的一些常用方法    functionmyFunction(){       alert("测试onclick点击事件");    }    点击这里

登录后复制

说明：

onclick通常在下列基本对象中产生：

button(按钮对象)、checkbox(复选框)、radio(单选框)、reset buttons(重置按钮)、submit buttons(提交按钮)

二、js中常用事件之onload事件

可以body执行，,其中onload后面可以写一个方法，如：onload="test()",然后在JavaScript中写一个test()方法，则在页面一开始加载的时候会先调用这个方法。

js中onload事件的代码示例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>JavaScript的一些常用方法    functiontest(){       alert("测试onload方法");    }

登录后复制

注意：此方法只能写在标签之中

三、js中常用事件之onchange事件

当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。

js中onchange事件的代码示例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>JavaScript的一些常用方法       functionupperCase(){         varx = document.getElementById("fname").value;         document.getElementById("fname").value = x.toUpperCase();        }       用户名：

登录后复制

说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件，如果是下拉框，则选择结束后即触发。

上例的效果是，当输入框失去焦点时内容转成大写。出现这种情况是由于input必须是失去焦点才会检测到内容发生改变。而change事件通常是用于下拉菜单select标签。

四、js中常用事件之onblur事件和onfocus事件

当前元素失去焦点时触发该事件，对应的是onfocus事件：得到焦点事件；onblur事件：元素失去焦点。

js中onblur事件和onfocus事件的代码示例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>JavaScript的一些常用方法  functionchkvalue(txt) {  if(txt.value=="") alert("文本框里必须填写内容!");  } functionsetStyle(x){      document.getElementById(x).style.background="yellow" } 失去焦点： 
得到焦点：

登录后复制

五、js中常用事件之onscroll事件

窗口滚动事件：当页面滚动时调用函数。此事件写在方法的外面，且函数名后面不加括号，例如_window.onscroll=move。

js中onscroll事件的代码示例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>JavaScript的一些常用方法  functionmove() {  alert("页面滚动时调用");  }_window.onscroll = move; 测试onscroll方法









测试onscroll方法









测试onscroll方法









测试onscroll方法

登录后复制

六、js中常用事件之onsubmit事件

属于

表单元素，写在表单标签内。语法：onsubmit=”return 函数名()”。

js中onsubmit事件的代码示例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>JavaScript的一些常用方法  functionmove() {  alert("测试onsubmit........"+testForm.name.value);  }

登录后复制

七、js中常用事件之鼠标相关的事件

Onmouseover:鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。

Onmouseout:鼠标离开某对象范围时，触发事件调用函数。

Onmousemove:鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。

代码示例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>JavaScript的一些常用方法functionbigImg(x){x.style.height="180px";x.style.width="180px";}functionnormalImg(x){x.style.height="128px";x.style.width="128px";}

登录后复制

Onmouseup:当鼠标松开时触发事件

Onmousedown:当鼠标按下键时触发事件

代码示例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>JavaScript的一些常用方法functionmouseDown(){    document.getElementById("p1").style.color="red";}functionmouseUp(){    document.getElementById("p1").style.color="green";}请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色mouseUp(。) 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。

登录后复制

以上就是本篇文章的全部内容，更多关于js事件的内容可以参考js开发手册。

以上就是js中有哪些事件？js中常用事件的介绍的详细内容，更多请关注易企推科技其它相关文章！

本文地址：网络知识频道 https://www.hkm168.com/jiqiao/1152021.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！