您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
javascript学习笔记-事件入门
发布时间：2018-04-05 18:11:48编辑：雪饮阅读（）
JavaScript 有三种事件模型：内联模型、脚本模型和 DOM2 模型。
内联模型
这种模型是最传统的一种处理事件的方法。在内联模型中，事件处理函数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的， 并没有与 HTML 分离。
<button onclick="alert('内联模型');">内联模型</button>
脚本模型
var b=document.getElementsByTagName("button")[0];
b.onclick=function(){alert("脚本模型");}
ondblclick事件
var b=document.getElementsByTagName("button")[0];
b.ondblclick=function(){
alert("你双击了");
};
onkeydown事件
当鼠标选中元素，然后当用户按下键盘上任意键触发，如果按住不放，会重复触发。
b.onkeydown=function(){
alert("ggg");
};
如果将该事件绑定到windows上，则不用选择元素。
Onkeypress事件
当用户按下键盘上的字符键触发，如果按住不放，会重复触发。
onUnload事件(仅ie)
当页面首次载入不触发，重新载入(刷新)触发
window.onunload=function(){
alert("ggg");
};
onSelect事件
当用户选择文本框(input 或 textarea)中的一个或多个字符触发。
var inp=document.getElementById("inp");
inp.onselect=function(){
alert("你选择了文本");
}
Onreset事件
当表单在重置的时候会触发
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>雪饮个人博客</title>
<script>
window.onload=function(){
var fm=document.getElementById("fm");
fm.onreset=function(){
alert("你重置了");
}
};
</script>
</head>
<body>
<form action="index.html" method="post" id="fm">
<input id="inp" type="reset" value="重置"/>
</form>
</body>
</html>
Onresize事件
当窗口或框架的大小变化时在 window 或框架上触发。
window.onresize=function(){
alert("你改变了窗口大小");
};
Onscroll事件
当用户滚动带滚动条的元素时触发。
(1)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>雪饮个人博客</title>
<link rel="stylesheet" type="text/css" href="basic.css" />
<script type="text/javascript">
window.onload=function(){
window.onscroll=function(){
alert("你正在拉滚动条");
};
}
</script>
</head>
<body>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
</body>
</html>
(2)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>雪饮个人博客</title>
<link rel="stylesheet" type="text/css" href="basic.css" />
<script type="text/javascript">
window.onscroll=function(){
alert("你正在拉滚动条");
};
</script>
</head>
<body>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
<div class="box">杜敏捷敏捷，杜敏捷爱雪饮大侠</div>
</body>
</html>
关键字词：javascript,事件