JavaScript中的事件
一、JavaScript中的事件以及兼容
1.1、事件的定义:
指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
1.2、事件类型：
事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论的特定类型的事件。
1.3、事件目标：
事件目标是发生的事件或与之相关的对象。当讲事件时，我们必须同时指定类型和目标。像window上的load事件或者链接的click事件。在客户端js的应用程序中，Window、Document、和Element对象是最常见的事件目标，但是某些事件也是由其它类型的对象触发的。
1.4、事件处理程序或事件监听程序：
我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。
1.5、事件对象：
事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类型的type属性和指定事件目标的target属性。每个事件类型都为其相关的事件对象定义一组属性。
1.6、鼠标事件类型:
1.7、键盘事件类型:
1.8、表单事件类型:
注意事项:
所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如click事的事件处理函数就是：onclick。在这里，我们主要谈论脚本模型的方式来构建事件，违反分离原则的内联模式，我们忽略掉。
对于每一个事件，它都有自己的触发范围和方式，如果超出了触发范围和方式，事件处理将失效
二、JavaScript中常用事件的使用案例:
2.1、onsubmit：表单中的确认按钮被点击时发生的事件，如下案例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交事件onsubmit</title>
<script type="text/javascript">
window.onload=function(){
// 给form表单设置 表单提交数据
var txt = document.getElementsByName('form1')[0];
txt.onsubmit=function(){
// alert('=====');
// 获取文本框元素
var name=document.form1.userName;
var pwd=document.form1.pwd;
// 问题: 账户为admin 密码为123456, 只有账户和密码都匹配的情况下才让其登录
// 获取到文本框中的值进行判断 匹配
if(name.value=='admin' && pwd.value=='123456'){
alert('登录成功');
}else{
alert('账户或是密码错误,请重新输入');
name.value='';
pwd.value='';
// 给第一个文本框设置焦点
name.focus();
return false;
}
}
}
</script>
</head>
<body>
<form name="form1" action="#" method="post">
What is your Name?<br />
账户:<input type="text" name="userName" id="" /><br />
密码:<input type="password" name="pwd" /><br />
<input type="submit" value="确认登录"/>
</form>
</body>
</html>
2.2 onblur：在对象失去焦点时发生的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS中onblur事件案例</title>
<script type="text/javascript">
window.onload=function(){
// 1,获取文本框元素
var inp_01=document.getElementById('txt_Name');
var span_01=document.getElementById('span_01');
// 2,添加失去焦点事件
inp_01.onblur=function(){
// 3,获取文本框中的值 2种如下:
/*(1)document.form1.userName.value;
(2)document.getElementById('txt_Name').value;*/
var txtName=inp_01.value;
if(txtName=='admin'){
span_01.innerText='正确';
// alert('恭喜你,账户输入正确');
}else{
inp_01.value='';
span_01.innerText='请输入正确的账户名称';
inp_01.focus();
}
}
}
</script>
</head>
<body>
<form action="#" name="form_01" method="post">
UserName:<input type="text" id="txt_Name" name="userName" placeholder="请输入账户" />
<span id="span_01"></span>
<br />
PassWord:<input type="password" id="txt_Pwd" name="pwd" placeholder="请输入密码" />
<br />
<input type="submit" value="确认登录"/>
</form>
</body>
</html>
2.3 onfoucs：在对象获得焦点时发生的事件，案例如下：
<!--onfoucs事件-->
<p>第一个<input type="text" onfocus="setStyle(this.id)" id="fname-foucs"></p>
<p>第二个<input type="text" onfocus="setStyle(this.id)" id="lname-foucs"></p>
<script type="text/javascript">
function setStyle(x) {
document.getElementById(x).style.background = "yellow";
}
</script>
2.4、onchange：在对象的值发生改变时触发的事件
<!--onchange事件-->
<p>输入您的姓名：<input type="text" id="fname-change" onchange="upperCase(this.id)" /></p>
<script type="text/javascript">
function upperCase(x) {
var y = document.getElementById(x).value;
document.getElementById(x).value = y.toUpperCase();
}
</script>
三、 定时器
定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
定时器制作倒计时案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 局部变量和全局变量
// 全部变量: 是作用域所有的函数 ,放在所有的函数之外
// 局部变量: 是作用域某一个函数之后,除了该函数可以使用,其他函数不能使用(调用不到)
// 重点: 如果把局部变量的 关键字var 去掉, 就会变成一个全局变量
var num=10;
function btn1(){
num--;
document.getElementById("but").value=num+"s后重新获取";
var time=setTimeout("btn1()",1000);
if(num<=0){
clearTimeout(time);
num=10;
document.getElementById("but").value="获取验证码";
}
}
</script>
</head>
<body>
<input id="but" type="button" value="获取验证码" onclick="btn1();" />
</body>
</html>
四、变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
//全局变量
var a = 12;
function myalert()
{
//局部变量
var b = 23;
alert(a);
alert(b);
}
myalert(); //弹出12和23
alert(a); //弹出12
alert(b); //出错
</script>
五、封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：
function myalert(){
alert('hello!');
};
myalert();
封闭函数：
(function myalert(){
alert('hello!');
})();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function myalert(){
alert('hello!');
}()
封闭函数的好处
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();
六、常用内置对象
1、document
document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址(需要服务器环境)
2、location
window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值
3、Math
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
原创文章 158
获赞 388
访问量 3万+