事件驱动编程

来源：互联网发布：七秀脸型数据编辑：程序博客网时间：2024/06/05 13:29

基本概念

1.事件源

事件发生的来源,

按钮、文本框等

2.事件名称

onclick、onchange、onfocus等

通常事件以on开头

3.事件处理函数

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

4.事件对象

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

常用事件

一.文本框的常用事件

onfocus 获得焦点
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;// 停止事件向上传播

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>

这里写图片描述

阅读全文

0 0