事件
事件定义:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。
事件类型:就是什么类型的字符串,像鼠标悬浮, 按下键盘等。
事件目标:事件目标是发生的事件或与之相关的对象,事件是要添加给哪个对象。
事件处理程序:响应某个事件的函数则称为事件处理程序,或者叫做事件侦听器。
事件对象:事件对象是与特定事件相关且包含有关该事件详细信息的对象。
事件传播:事件传播是浏览器决定那个对象触发其事件处理程序的过程。
事件模型
1、内联模型:传统方法,指的是行间的事件,写入html标签之中,这种写法不能保证内容和结构进行分离,
所以不建议使用, 要保证页面的简洁性,以及体验度.
2、脚本模型:由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则,来源于内联模型违反了
html和JS的分离原则,为了解决这个问题,所以将处理程序以脚本的形式嵌入页面。
3、DOM2 模型:用于添加事件和删除事件处理程序的。addEventListener()和 removeEventListener()。
这两个方法都接受 3 个参数;事件名、函数、冒泡或捕获的布 尔值(true 表示捕获,false 表示冒泡)。
所有的事件处理函数都会都有两个部分组成,on + 事件名称
事件类型
鼠标事件:
案例解析eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 5px solid yellow;
margin: 100px auto;
transition: all 3s;
}
</style>
<script type="text/javascript">
window.onload=function(){
var ddd=document.getElementsByTagName('div')[0];
var dddd=document.getElementsByTagName('div')[1];
ddd.onmouseenter=function(){
//鼠标移入
ddd.style.borderRadius=50+'%';
}
ddd.onmouseleave=function(){
//鼠标离开
ddd.style.borderRadius=0;
}
ddd.onclick=function(){
//鼠标单击
ddd.style.background='green';
}
ddd.ondblclick=function(){
//鼠标双击
ddd.style.background='blue';
}
ddd.onmousemove=function(){
//鼠标移动
ddd.style.opacity=0.5;
}
dddd.onmouseover=function(){
//鼠标移入
dddd.style.transform='scale'+'('+1.2+')';
dddd.style.transform="rotate(-45deg)";
}
dddd.onmouseout=function(){
//鼠标离开
dddd.style.transform='scale'+'('+1+')';
dddd.style.transform="rotate(45deg)";
}
dddd.onmousedown=function(){
//鼠标按下
dddd.style.borderRadius=50+'%';
}
dddd.onmouseup=function(){
//鼠标松开
dddd.style.borderRadius=0;
}
ddd.onwheel=function(){
//鼠标前后轮
if (event.wheelDelta>0) {
ddd.style.background='red';
}
else{
ddd.style.background='yellow';
}
}
}
</script>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
键盘事件:
onkeyup:某个键盘键被松开;
onkeydown:某个键盘键被按下;
onkeypress:某个键盘键被按下并松开;
keyCode:返回键盘字符代表的数值
案例解析eg:
<head>
<script>
function myFunction(event) {
var inp = event.keyCode;
var pni=String.fromCharCode(inp);
document.getElementById("demo").innerHTML =pni+ " 键盘值为: " + inp;
// }
/*//首先模拟一个文本文件内容。文件中存放着三个字符。“abc”
var textBinary = new Uint8Array([65]);
var blob = new Blob([textBinary]);
//读取文件中的内容为字符串
var fr = new FileReader;
fr.readAsText(blob);
fr.onload = function() {
alert('文本文件中的内容是:' + fr.result);
}*/
</script>
</head>
<body>
<p>请按键盘</p>
<!--<input type="text" onkeypress="myFunction(event)">-->
<!--<input type="text" onkeydown="myFunction(event)">-->
<input type="text" onkeyup="myFunction(event)">
<p id="demo"></p>
</body>
表单事件:
onfocus:获取焦点;
onblur:失去焦点;
onsubmit:提交时触发;
案例解析eg:
<head>
<script type="text/javascript">
function focu(){
document.for1.username.value='';
}
function blu(){
var kong=document.for1.username.value;
if (kong!='') {
alert('输入正确');
} else{
alert('账户名不能为空');
}
}
function blr(value){
daxie(value);
}
function daxie(value){
alert(value.toUpperCase());
}
function foc(){
document.for1.zhiye.style.borderColor='red';
}
function bl(){
document.for1.zhiye.style.borderColor='yellow';
}
var fooo=document.getElementById('form01');
fooo.onsubmit=function(){
var name=document.for1.zhiye.value;
}
</script>
</head>
<body>
<form name="for1" action="键盘事件.html" id="form01" method="post">
账户:
<input type="text" name="username" value="请输入账户" onfocus="focu();" onblur="blu();" />
<span id="span1"></span>
<br /> 密码:
<input type="text" name="pwd" value="password" onfocus="fou();" onblur="blr(this.value);" />
<br />职业:
<input type="text" name="zhiye" value="软件开发" onfocus="foc();" onblur="bl();" />
<br />
<input type="submit"name="enheng" value="提交"/>
</form>
</body>