您当前的位置: 首页 > 学无止境 > 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,事件