JavaScript 事件

Posted The snail

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 事件相关的知识，希望对你有一定的参考价值。

javascript 事件

html 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event=‘JavaScript 代码‘>

双引号:

<some-HTML-element some-event="JavaScript 代码">

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<button onclick="getElementById(‘demo‘).innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

</body>
</html>

以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

</body>
</html>

JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

更多事件列表: JavaScript 参考手册 - HTML DOM 事件。

 

以上是关于JavaScript 事件的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段

是否可以使用 Javascript 在音频文件中找到一段无声的片段？

常用Javascript代码片段集锦

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段

48个值得掌握的JavaScript代码片段（上）