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

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

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

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

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

尝试一下 »

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

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

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

常见的HTML事件

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

onchange HTML 元素改变 onclick 用户点击 HTML 元素 onmouseover 鼠标指针移动到指定的元素上时发生 onmouseout 用户从一个 HTML 元素上移开鼠标时发生 onkeydown 用户按下键盘按键 onload 浏览器已完成页面的加载

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

JavaScript 可以做什么?

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件

页面关闭时触发事件

用户点击按钮执行动作

验证用户输入内容的合法性

等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码

HTML 事件属性可以调用 JavaScript 函数

你可以为 HTML 元素指定自己的事件处理程序

你可以阻止事件的发生。

等等 ...

在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。

#0

枫泠鸢

116***4735@qq.com

122

注意，当在 JS 文件中为相关元素设置事件时，其写法与 HTML 事件属性写法相同，例如：

<button id="test" onclick="changeContent()">更换内容</button>

在 JS 中则需要这样写：

var test = document.getElementById("test");
test.onclick = function changeContent(){
    //......
注意：在为元素添加事件句柄或者删除元素事件句柄的过程中，不要将 event 参数设置为 onclick，而必须写成 click，去掉事件名称中的 on 即可。
添加事件句柄函数原型:
element.addEventListener(event, function, [useCapture])
删除事件句柄的函数原型:
element.removeEventListener(event, function, [useCapture])
枫泠鸢
   枫泠鸢
  116***4735@qq.com
4年前 (2018-12-18)

#0

千年遇玺

173***0998@qq.com

227

不推荐使用 HTML 元素中可以添加事件属性 的方式来添加属性。

例子：

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

因为遵从 “高内聚，低耦合” 的编程原则。

高内聚是说模块内部要高度聚合，低耦合是说模块与模块之间的藕合度要尽量低。前者是说模块内部的关系，后者是说模块与模块间的关系。

很形象的比拟： 严于律己，宽以待人。

千年遇玺

千年遇玺

173***0998@qq.com

4年前 (2019-03-22)

#0

千年遇玺

173***0998@qq.com

91

添加事件句柄实例：

<input id="test" type="button" value="提交"/>
<script>
window.onload = function(){
    var test = document.getElementById("test");   
    test.addEventListener("click",myfun2);   
    test.addEventListener("click",myfun1);
function myfun1(){  
    alert("你好1");
function myfun2(){ 
    alert("你好2");
</script>

千年遇玺

千年遇玺

173***0998@qq.com

4年前 (2019-03-22)

• HTML / CSS
  • HTML 教程
  • HTML5 教程
  • CSS 教程
  • CSS3 教程
  • Bootstrap3 教程
  • Bootstrap4 教程
  • Bootstrap5 教程
  • Font Awesome 教程
  • Foundation 教程
• JavaScript
  • JavaScript 教程
  • HTML DOM 教程
  • jQuery 教程
  • AngularJS 教程
  • AngularJS2 教程
  • Vue.js 教程
  • Vue3 教程
  • React 教程
  • TypeScript 教程
  • jQuery UI 教程
  • jQuery EasyUI 教程
  • Node.js 教程
  • AJAX 教程
  • JSON 教程
  • Echarts 教程
  • Chart.js 教程
  • Highcharts 教程
  • Google 地图 教程
• 服务端
  • Python 教程
  • Python2.x 教程
  • Linux 教程
  • Docker 教程
  • Ruby 教程
  • Java 教程
  • C 教程
  • C++ 教程
  • Perl 教程
  • Servlet 教程
  • JSP 教程
  • Lua 教程
  • Rust 教程
  • Scala 教程
  • Go 教程
  • PHP 教程
  • 数据结构与算法
  • Django 教程
  • Zookeeper 教程
  • 设计模式
  • 正则表达式
  • Maven 教程
  • Verilog 教程
  • ASP 教程
  • AppML 教程
  • VBScript 教程
• 数据库
  • SQL 教程
  • MySQL 教程
  • PostgreSQL 教程
  • SQLite 教程
  • MongoDB 教程
  • Redis 教程
  • Memcached 教程
• 数据分析
  • Python 教程
  • NumPy 教程
  • Pandas 教程
  • Matplotlib 教程
  • Scipy 教程
  • R 教程
  • Julia 教程
• 移动端
  • Android 教程
  • Swift 教程
  • jQuery Mobile 教程
  • ionic 教程
  • Kotlin 教程
• XML 教程
  • XML 教程
  • DTD 教程
  • XML DOM 教程
  • XSLT 教程
  • XPath 教程
  • XQuery 教程
  • XLink 教程
  • XPointer 教程
  • XML Schema 教程
  • XSL-FO 教程
  • SVG 教程
• ASP.NET
  • ASP.NET 教程
  • C# 教程
  • Web Pages 教程
  • Razor 教程
  • MVC 教程
  • Web Forms 教程
• Web Service
  • Web Service 教程
  • WSDL 教程
  • SOAP 教程
  • RSS 教程
  • RDF 教程
• 开发工具
  • Eclipse 教程
  • Git 教程
  • Svn 教程
  • Markdown 教程
• 网站建设
  • HTTP 教程
  • 网站建设指南
  • 浏览器信息
  • 网站主机教程
  • TCP/IP 教程
  • W3C 教程
  • 网站品质