JavaScript事件
JavaScript事件是由访问Web页面的用户,引起的一系列操作,例如:用户点击。当用户执行某些操作的时候,再去执行一系列代码。
//在HTML中把事件处理函数作为属性执行JS代码
<input type="button" value="按钮" οnclick="alert('Lee');" /> //注意单双引号
//在HTML中把事件处理函数作为属性执行JS函数
<input type="button" value="按钮" οnclick="box();" /> //执行JS的函数
由于内联模型违反了HTML与JavaScript代码层次分离的原则。为了解决这个问题,我们可以在JavaScript中处理事件。这种处理方式就是脚本模型。
var input = document.getElementsByTagName('input')[0]; //得到input对象
input.onclick = function () { //匿名函数执行
alert('Lee');
};
事件处理函数 | 影响的元素 | 如何发生 |
onabort | 图像 | 当图像加载被中断时 |
onblur | 窗口、框架、所有表单对象 | 当焦点从对象上移开时 |
onchange | 输入框,选择框和文本区域 | 当改变一个元素的值且失去焦点时 |
onclick | 链接、按钮、表单对象、图像映射区域 | 当用户单击对象时 |
ondblclick | 链接、按钮、表单对象 | 当用户双击对象时 |
ondragdrop | 窗口 | 当用户将一个对象拖放到浏览器窗口时 |
onError | 脚本 | 当脚本中发生语法错误时 |
onfocus | 窗口、框架、所有表单对象 | 当单击鼠标或者将鼠标移动聚焦到窗口或框架时 |
onkeydown | 文档、图像、链接、表单 | 当按键被按下时 |
onkeypress | 文档、图像、链接、表单 | 当按键被按下然后松开时 |
onkeyup | 文档、图像、链接、表单 | 当按键被松开时 |
onload | 主题、框架集、图像 | 文档或图像加载后 |
onunload | 主体、框架集 | 文档或框架集卸载后 |
onmouseout | 链接 | 当图标移除链接时 |
onmouseover | 链接 | 当鼠标移到链接时 |
onmove | 窗口 | 当浏览器窗口移动时 |
onreset | 表单复位按钮 | 单击表单的reset按钮 |
onresize | 窗口 | 当选择一个表单对象时 |
onselect | 表单元素 | 当选择一个表单对象时 |
onsubmit | 表单 | 当发送表格到服务器时 |
事件处理函数 | 影响的元素 | 何时发生 |
1.onload事件为例
(1)使用getElementById
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js onload事件</title>
<script type="text/javascript">
window.onload = function () {
//等待网页中的标签图片加载完毕后再来执行js的代码
var ad = document.getElementById("ad");
alert(ad)
}
</script>
</head>
<body>
<div id="ad" class="lei">块元素</div>
</body>
</html>
(2)使用getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js onload事件</title>
<script type="text/javascript">
window.onload = function () {
//等待网页中的标签图片加载完毕后再来执行js的代码
var p = document.getElementsByTagName("p");
alert(p)
}
</script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</body>
</html>
(3)使用getElementsByName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js onload事件</title>
<script type="text/javascript">
window.onload = function () {
//等待网页中的标签图片加载完毕后再来执行js的代码
var na = document.getElementsByName("user");
alert(na)
}
</script>
</head>
<body>
<form>
<input type="text" name="user">
<input type="text" name="user">
<input type="text" name="user">
<input type="button" value="点击事件" id="buttonClick">
</form>
</body>
</html>
(4) 使用getAttribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js onload事件</title>
<script type="text/javascript">
window.onload = function () {
//等待网页中的标签图片加载完毕后再来执行js的代码
var adc = document.getElementById("ad").getAttribute("class");
alert(adc)
}
</script>
</head>
<body>
<div id="ad" class="adc">块元素</div>
</body>
</html>
(5)使用setAttribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js onload事件</title>
<script type="text/javascript">
window.onload = function () {
//等待网页中的标签图片加载完毕后再来执行js的代码
var adc = document.getElementsByTagName("p")[0].setAttribute("align","center");
alert(adc)
}
</script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
</body>
</html>