事件简介
<!DOCTYPE html>
<!--
事件:就是javaScript与html交互是通过事件实现的,事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间
比如:点击事件,先点击然后再去执行一系列的代码
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
//事件处理:对象.事件处理函数=触发后执行的函数
// oBtn.onclick = function(){
// alert("OK");
// }
//oBtn:一个对象
//onclick:这个是事件处理函数或者绑定给指定对象的属性(也是一个事件监听器)
//function(){}:匿名函数是事件触发要被执行的函数
//第二种方式
oBtn.onclick = fin;
function fin(){
alert("OK");
}
}
</script>
</head>
<body>
<button id="btn">确定</button>
</body>
</html>
事件模型
<!DOCTYPE html>
<!--
内联模型:
在内联模型中,事件处理函数是标签的一个属性:这种模型是js代码与html混写,不建议使用
脚本模型:
内联模型中违反了js代码与html代码分离的原则,所以我们可以在js中处理事件,这个就是脚本模型;
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("box");
oDiv.onclick = function(){
alert("Ok");
}
}
</script>
</head>
<body>
<!-- 内联模型 -->
<!-- <div id="box" onclick="alert('OK')"></div> -->
<div id="box"></div>
</body>
</html>
事件函数(鼠标事件)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 200px;
left: 500px;
}
</style>
<script type="text/javascript">
window.onload = function(){
// onclick:当用户单击鼠标按钮时触发;
document.onclick = function(){
// alert("胖胖");
}
//ondblclick 当用户双击后触发;
document.ondblclick = function(){
// alert("OK");
}
// onmousedown 当用户按了鼠标还没有弹起时触发
// 分为三步:按下,按住不动,抬起
document.onmousedown = function(){
// alert("Ok");
}
document.onmouseup = function(){
// alert("鼠标抬起");
}
// onmouseover事件 鼠标移入时触发
// var oDiv = document.getElementById("box");
// var timer = null;
// oDiv.onmouseover = function(){
// // alert("鼠标移入了");
// timer = setInterval(function(){
// oDiv.style.width = oDiv.clientWidth + 4 + "px";
// },100);
// }
//onmouseout事件 鼠标移出时触发
// oDiv.onmouseout = function(){
// // alert("鼠标移出了");
// clearInterval(timer);
// }
// onmousemove事件 鼠标移动时触发;
var oDiv = document.getElementById("box");
var num = 0;
oDiv.onmousemove = function(){
document.title = ++num;
// alert("Ok");
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
//slice方法,切割字符串
var str = "你还可以输入n次字符";
var str1 = str.slice(2,4);
// alert(str1);
var an = "an";
alert(an.length);
}
</script>
</head>
<body>
</body>
</html>
事件函数(键盘函数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
//onkeydown 当用户按下时会触发,如果按住不动,它会重复触发
// var oTxt = document.getElementById("txt");
// var num = 0;
// oTxt.onkeydown = function(){
// document.title = ++num;
// // alert("按下键了");
// };
// onkeyup事件 当用户抬起时触发;
// 作业:自己实现一个下以的功能
var oTxt = document.getElementById("txt");
var oStr = document.getElementsByTagName("strong")[0];
oTxt.onkeyup = function(){
var num1 = oTxt.value.length; //获取文本里字符的个数
var num2 = 150 - num1;
if(num2<=0){
oTxt.value = oTxt.value.slice(0, 150);
oStr.innerHTML = "您还可以输入0个字符";
}else{
oStr.innerHTML = "您还可以输入"+num2+"个字符";
}
}
// onkeypress事件 按下字符键时触发,如果按住不放,也会重复触发
// var oTxt = document.getElementById("txt");
// var num = 0;
// oTxt.onkeypress = function(){
// document.title = ++num;
// // alert("Ok");
// }
}
</script>
</head>
<body>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<br>
<strong>您还可以输入150个字符</strong>
</body>
</html>
事件函数(html事件)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
//onload事件:等完全加载所有的内容(包括图片,视频,脚本等),就执行或者触发
//function show(){
// var obj1 = document.getElementById("box1");
// alert(obj1);
// }
// onchange事件 当文本框内容改变并且失去焦点后触发
// 作业:根据现有的知识完美下面的功能
var oTxt = document.getElementById("txt");
var oStr = document.getElementsByTagName("strong")[0];
oTxt.onchange = function(){
//判断是不是Number类型(0的话,可能会变成布尔类型)
if(Number(oTxt.value) || oTxt.value == "0"){
oStr.style.color = "green";
}else{
oStr.style.color = "red";
}
}
// onfocus事件 当元素获取焦点时触发
var oTxt = document.getElementById("txt");
oTxt.onfocus = function(){
this.style.background = "#ccc";
};
// onblur事件 当元素失去焦点时触发
oTxt.onblur = function(){
this.style.background = "";
};
// onsubmit事件 当用户点击提交按钮时触发;
var form = document.getElementsByTagName("form")[0];
form.onsubmit = function(){
alert("验证不通过");
}
//onreset事件 用户点击重置按钮时触发
form.onreset = function(){
alert("您确定要重置");
}
}
</script>
</head>
<body>
<div id="box1"></div>
<input type="text" id="txt"><strong>请输入数字</strong><br>
<form action="#">
<input type="submit">
<input type="reset">
</form>
</body>
</html>
事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
// function show(){
// alert(arguments.length); //打印0
// };
// show();
//事件函数
// var oDiv = document.getElementById("box");
// oDiv.onclick = function(){
// alert(arguments[0]); //打印[object MouseEvent] 事件对象
// alert(arguments.length); //打印1
// };
//事件对象的兼容
var oDiv = document.getElementById("box");
oDiv.onclick = function(ev){
//alert(ev); //在ie8以下不兼容,打印nudefined但不报错;
//alert(event); //在火狐下不兼容,报错
//做兼容性处理
var oEvent = ev || event;
alert(oEvent);
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
border-radius: 50px;
}
</style>
<script type="text/javascript">
// clientX 可以获取鼠标的距离左边框的大小
// clientY 可以获取鼠标的距离上边框的大小
//作业:自己实现一个拖拽;用到的知识点(onmousedown,onmousemove,onmouseup,事件对象,clientY,clientX属性 )
window.onload = function(){
document.onclick = function(ev){
var oEvent = ev || event;
alert("X坐标为:"+oEvent.clientX);
alert("Y坐标为:"+oEvent.clientY);
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>