HTML 与 JavaScript 的交互是通过事件来处理的,当用户或浏览器操纵页面时。事件就会发生。
使用事件来执行 JavaScript
编码的响应
每个HTML元素有一定的事件可以触发 JavaScript 代码
比如: 加载页面、点击按钮、关闭窗口
介绍几个常见的事件类型
onclick 事件类型
这是最常用的事件类型,当用户点击鼠标左按钮。你可以把你的验证、警告等反对这个事件类型。
支持该事件的 HTML 标签:
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>,
<thead>, <tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象:
button, document, checkbox, link, radio, reset, submit
具体实例
<script>
function sayHello() {
alert("Hello World")
}
</script>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
onmouseover/onmouseout
nmouseover: 事件发生时,当你把你的鼠标在任何元素上时, onmouseover 事件发生
onmouseout: 当你把鼠标从该元素移开时,onmouseout 事件发生
支持该事件的 HTML 标签:
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象:
layer, link
<html>
<head>
<script>
function mouseOver()
{
alert("on mouse over")
}
</script>
</head>
<body>
<img src="/i/eg_mouse2.jpg" onmouseover="mouseOver()" />
</body>
</html>
HTML 4 标准事件
执行以下脚本显示一个Javascript函数。
事件 | 类型 | 何时执行Javascript函数 |
---|---|---|
onchange | script | 当元素改变时 |
onsubmit | script | 确认按钮被点击时 |
onreset | script | 当表单被重置时 |
onselect | script | 当元素被选中时 |
onblur | script | 当元素失去焦点时 |
onfocus | script | 当元素成为焦点时 |
onkeydown | script | 某个键盘按键被按下时 |
onkeypress | script | 某个键盘按键被按下并松开时 |
onkeyup | script | 某个键盘按键被松开时 |
onclick | script | 当鼠标单击时 |
ondblclick | script | 当鼠标双击时 |
onmousedown | script | 鼠标按钮被按下时 |
onmousemove | script | 鼠标被移动时 |
onmouseout | script | 鼠标从某元素移开时 |
onmouseover | script | 鼠标移到某元素之上时 |
onmouseup | script | 鼠标按键被松开时 |