位置:电子教程 > JavaScript教程 推荐学习资源
课程概要
JavaScript入门
JavaScript 语法
JavaScript 变量
JavaScript 数据类型
JavaScript 对象
JavaScript 函数
JavaScript 作用域
JavaScript 事件
JavaScript 字符串
JavaScript 运算符
JavaScript 比较 和 逻辑运算符
JavaScript if...Else 语句
JavaScript switch 语句
JavaScript for 循环
JavaScript while 循环
JavaScript break 和 continue 语句
JavaScript typeof, null, 和 undefined
JavaScript 类型转换
JavaScript 正则表达式
JavaScript 错误 - throw、try 和 catch
当前阅读教程:JavaScript教程 > HTML 事件
阅读(22555525)      收藏       赞(5685)      分享
上一篇: JavaScript 事件 下一篇: 常见的HTML事件

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

以下是 HTML 事件的实例:

l  HTML 页面完成加载

l  HTML input 字段改变时

l  HTML 按钮被点击

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

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

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

单引号:

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

双引号:

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

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

实例

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

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(www.2d5.net)</title>
</head>
<body>
 
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
 
</body>
</html>

示例

小白教程网www.2d5.net

image.png

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

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

实例

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

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(www.2d5.net)</title>
</head>
<body>
 
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
 
</body>
</html>

效果图

小白教程网www.2d5.net

image.png

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(www.2d5.net)</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>

效果图

小白教程网www.2d5.net

image.png

上一篇: JavaScript 事件 下一篇: 常见的HTML事件
QQ交流群:147415688             广告联系QQ:45157718(微信同号)