事件驱动编程

最新推荐文章于 2024-01-03 00:34:06 发布

夏虫语冰彡

最新推荐文章于 2024-01-03 00:34:06 发布

阅读量370

点赞数

文章标签：事件驱动编程绑定事件三种绑定方式事件传播机制

本文链接：https://blog.csdn.net/qq_34283987/article/details/77970619

版权

基本概念

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

收藏

觉得还不错? 一键收藏
0
评论
事件驱动编程

基本概念1.事件源事件发生的来源,按钮、文本框等2.事件名称onclick、onchange、onfocus等通常事件以on开头3.事件处理函数发生事件以后调用的函数叫做事件处理函数(也叫做事件监听器)4.事件对象即对事件的一个具体的描述, 键盘按下事件,如果想获得用户到底按了哪个键,可以通过事件对象来获取常用事件一.文本框的常用事件onfocus 获得焦点onblur 移除焦点二.常
复制链接

扫一扫