事件驱动编程

时间:2022-10-04 20:01:29

基本概念

1.事件源

事件发生的来源,

按钮、文本框等

2.事件名称

onclick、onchange、onfocus等

通常事件以on开头

3.事件处理函数

发生事件以后 调用的函数叫做事件处理函数(也叫做事件监听器)

4.事件对象

即对事件的一个具体的描述, 键盘按下事件,如果想获得用户到底按了哪个键,可以通过事件对象来获取

常用事件

一.文本框的常用事件

  1. onfocus 获得焦点

  2. onblur 移除焦点

二.常用的鼠标事件

onmouseover 鼠标悬停

onmouseout 鼠标移除

需求: 演示人人网登录

密码框其实一开始是文本框,获得焦点以后 使用dom技术动态产生一个密码框 然后把文本框

替换成密码框

绑定事件的三种方式

一、xhtml绑定方式
例:

<script type="text/javascript">
function test (a) {
alert(a);
}

function test2 () {
alert('test2');
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="xhtml绑定方式" onclick="test(100);test2();" />
</body>

优点:
1.写起来简单。
2.可以绑定多个函数。
3.可以传参。
缺点:
1.内容和行为没有分离,不符合W3C规范。
2.如果多个按钮都绑定一个函数test,需要一个一个绑定,比较麻烦。
3.dom编程时,动态创建的对象,就不能使用这种绑定方式了。
演示人人网登录:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人人网</title>
<script type="text/javascript">

function mousein () {
//清空
var uname = document.getElementById("username");
if (uname.value=="邮箱/手机号/用户名") {
uname.value="";
}
}

function out () {
//恢复
var uname = document.getElementById("username");
if (uname.value=="") {
uname.value="邮箱/手机号/用户名";
}
}

function textToPwd () {
var text = document.getElementById("pwd");
text.type="password";
}

// function pwdToText () {
// var pwd = document.getElementById("pwd");
// pwd.type="text";
// }
</script>
</head>
<body>
<h2>用户登录</h2>
<form action="第三种绑定方式和两种事件模型(DOM2).html" method="post">
<input type="text" name="username" id="username" value="邮箱/手机号/用户名"
onfocus="mousein();" onblur="out();"/>
<br/>
<input type="text" name="pwd" id="pwd" value="" onfocus="textToPwd();"
/>
<br/><!--onblur="pwdToText();"-->
<input type="submit" name="sbmt" id="sbmt" value="提交" />

</form>

</body>
</html>

二、dom绑定方式
基本语法:dom对象.事件 = 事件处理函数;
例:btn1.onclick = test;
示例:

<script type="text/javascript">
function test () {
alert('test');
}

window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.onclick = test;
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="dom绑定方式" />
</body>

匿名函数:没有名字的函数。形如function(){
alert(‘test’);
}

第二中定义函数的方式:
var test = function(){
alert(‘test’);
}

立即调用的匿名函数:
函数只执行一次时,没必要给函数起名
(function(){
alert(‘test’);
})();

三、第三种绑定方式和两种事件模型
一.DOM2

dom对象.addEventListener(“click”,事件处理函数);

dom对象.removeEventListener(“click”,事件处理函数);

二.IE

dom对象.attchEvent(“onclick”,事件处理函数);

dom对.detachEvent(“onclick”,事件处理函数)

写兼容性代码

可以通过第三种绑定方式不同来判断浏览器,从而写多浏览器兼容性的代码

if(document.attachEvent){
//IE浏览器的代码
}else {
//其他浏览器的代码
}

优点:可以绑定多个事件、可以动态添加和移除事件
缺点:浏览器不兼容、必须写兼容性代码

*****************事件的传播机制*****************************

一. IE模型

只有一个阶段: 事件冒泡阶段

如果想停止事件传播

IE
event.cancelBubble = true;// 停止事件向上传播

FF

e.stopPropagation();//停止事件传播

二. DOM2(FF)

两个阶段:

1.事件捕获阶段

从外向内触发

dom对象.addEventlistener(“click”,事件处理函数,true);//给捕获阶段绑定事件

2.事件冒泡阶段

从内向外触发

dom对象.addEventlistener(“click”,事件处理函数,false);//默认值是false 给冒泡阶段绑定事件

e.stopPropagation();//停止事件向上传播
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function test () {
alert('test');
}

function test2 () {
alert('test2');
}

function test3 () {
if(document.attachEvent){
btn1.detachEvent("onclick",test2);
}else{
btn1.removeEventListener("click",test2);
}

}
var btn1;
window.onload = function () {
//
btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
if(document.attachEvent){
btn1.attachEvent("onclick",test);
btn1.attachEvent("onclick",test2);
btn2.attachEvent("onclick",test3);
}else{
btn1.addEventListener("click",test);
btn1.addEventListener("click",test2);
btn2.addEventListener("click",test3);
}


}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="单击事件" />
<input type="button" name="btn2" id="btn2" value="移除btn1的test2" />
</body>
</html>

事件驱动编程