为了账号安全,请及时绑定邮箱和手机立即绑定
  • IE事件处理程序:

    attachEvent()添加事件

    detachEvent()删除事件

    接收相同的两个参数:事件处理程序的名称(加on)和事件处理程序的函数 

  • 使用事件处理程序有:

    1. HTML事件处理程序;

    2. DOM0级事件处理程序:可以添加多个事件处理程序

    3. DOM2级事件处理程序:2级事件定义了两个方法addEventListener()和removeEventListener(),有三个参数:要处理的事件名(不加on)、事件处理程序的函数、布尔值(true表示捕获false表示冒泡);可以添加多个事件处理程序,按顺序执行多个,删除要指定添加时相同的参数


    1. type属性  用于获取事件类型

    2. target属性 用于获取事件的目标

    3. stopPropagation()方法  用于阻止事件的冒泡

    4. preventDefault()方法 阻止事件的默认行为

  • <!DOCTYPE html>

    <html>

    <head>

      <title>Document</title>

      <style type="text/css">

        *{margin:0;padding:0;}

        .head{font-size:12px;padding:6px 0 0 10px;}

        #login_box{width:300px;height:150px;background:#eee;border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}

        #login_box p{height:20px;border-bottom:1px solid #ccc;font-size: 12px;padding:6px 0 0 5px;font-weight:bold;}

        #close{width:14px;height:14px;background:#ddd;position:absolute;right:5px;top:6px;}

      </style>

      <script type="text/javascript">

        window.onload=function(){

          var d=document,

              login_btn=d.getElementById('login'),

              login_box=d.getElementById('login_box'),

              close=d.getElementById('close');

        //封装一个添加事件监听程序

        function addEvent(ele,type,hander){

              if(ele.addEventListener){

                 ele.addEventListener(type,hander,false);

              }else if(ele.attachEvent){

                 ele.attachEvent('on'+type,hander);

              }else{

                 ele['on'+type]=hander;

              }

          }

        // 显示登录层函数  

        function showlogin(){

              login_box.style.display="block";

          }

        // 隐藏登录层函数  

        function hidelogin(){

              login_box.style.display="none";

          }

        addEvent(login_btn,'click',showlogin);

        addEvent(close,'click',hidelogin);

        }

      </script>

    </head>

    <body>

       <div class="head">亲,您好!<input type="button" value="登录" id="login"></div>

       <div id="login_box">

         <p>用户登录</p><span id="close"></span>

       </div>

    </body>

    </html>


  • <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <script src="event.js"></script><!--封装一个DOM0,DOM2,IE事件-->

    <script src="script.js"></script><!--封装一个DOM,IE的event事件对象-->

    <body>

        <div id="box">

        <input type="button" value="HTML事件" id="btn" onclick="showMes()">

        <input type="button" value="DOM0事件" id="btn2">

        <input type="button" value="DOM2事件" id="btn3">

        <input type="button" value="IE事件" id="btn4">

        <a href="26.html" id="go">跳转</a>

        </div>

        <script type="text/javascript">

       

        </script>

    </body>

    </html>


  • window.onload=function(){

    var go=document.getElementById("go"),

        box=document.getElementById("box");


    eventutil.addhandler(box,'click',function(){

    alert("我是整个父盒子");

    });


    eventutil.addhandler(go,'click',function(e){

            e=eventutil.getEvent(e);

            //e=e || window.event;

            alert(eventutil.getElement(e).nodeName);

            eventutil.preventDefault(e);

            eventutil.stopPropagation(e);

    });

    }


  • var eventutil={

                  //添加句柄

                addhandler:function(element,type,handler){

                if(element.addEventListener){

                           element.addEventListener(type,handler,false);

                }else if(element.attachEvent){

                           element.attachEvent('on'+type,handler);

                }else{

                           element['on'+type]=handler;

                }

                },

                  //删除句柄

                removehandler:function(element,type,handler){

                if(element.removeEventListener){

                           element.removeEventListener(type,handler,false);

                }else if(element.detachEvent){

                           element.detachEvent('on'+type,handler);

                }else{

                           element['on'+type]=handler;

                }

                },

                  //获取事件

                  getEvent:function(event){

                     return event?event:window.event;

                  },

                  //获取类型(虽然类型不存在IE非IE)

                  getType:function(event){

                    return event.type;

                  },

                  //获取事件目标

                  getElement:function(event){

                    return event.target || event.srcElement;

                  },

                  //阻止事件的默认行为

                  preventDefault:function(event){

                    if(event.preventDefault){

                      event.preventDefault();

                    }else{

                      event.returnvalue=false;

                    }

                  },

                  //阻止冒泡事件

                  stopPropagation:function(event){

                    if(event.stopPropagation){

                       event.stopPropagation();

                    }else{

                      event.cancelBubble=true;

                    }

                  }

                }


  • <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

        <div id="box">

        <!-- <input type="button" value="HTML事件" id="btn" onclick="showMes()"> -->

        <input type="button" value="DOM0事件" id="btn2">

        <input type="button" value="DOM2事件" id="btn3">

        <input type="button" value="IE事件" id="btn4">

        <a href="26.html" id="go">跳转</a>

        </div>

        <script type="text/javascript">

        //HTML事件,将触发事件放在HTML里面。可以直接写,也可以封装。

                 function showMes(event){

        alert(event.target.nodeName);

        event.stopPropagation();

        }

        function showBox(){

        alert("这是放按钮的盒子");

        }

        function stopGoto(){

        event.stopPropagation();//先阻止冒泡行为:stopPropagation

        event.preventDefault();//阻止事件的默认行为,即阻止跳转行为:preventDefault

        }

        var d=document;

        var box=d.getElementById("box"),

            go=d.getElementById("go"),

            btn2=d.getElementById("btn2"),

            btn3=d.getElementById("btn3"),

            btn4=d.getElementById("btn4") ;


        //DOM0事件,在js里触发事件,便于修改;当触发的事件=null为删除该事件。

        /*btn2.onclick=function(){

        alert("这是通过DOM0级添加的事件");

        }

        btn2.onclick=null;*///null不加引号。删除事件后,点击按钮将不再跳出弹框。


        //DOM2事件,处理事件addEventListener("其包括三个参数,触发、函数、false"),删除事件removeEventLiatener("同样包含三个参数")。

            //注意:DOM2的触发事件不加“on”,且此方法不支持IE浏览器。

            /*btn3.addEventListener("click",showMes,false);

            btn3.removeEventListener("click",showMes,false);*/


        //IE事件

             //IE8以及更早浏览器只支持事件冒泡

             //添加事件attachEvent("其包含两个参数,触发、函数(触发需要加‘on’)"),删除事件detachEvent("统一包含两个参数")。

               //btn4.attachEvent("onclick",showMes);

               //btn4.detachEvent("onclick",showMes);


            //封装一个DOM0,DOM2,IE事件,谁行谁用上。

                var eventutil={

                addhandler:function(element,type,handler){

                if(element.addEventListener){

                           element.addEventListener(type,handler,false);

                }else if(element.attachEvent){

                           element.attachEvent('on'+type,handler);

                }else{

                           element['on'+type]=handler;

                }

                },

                removehandler:function(element,type,handler){

                if(element.removeEventListener){

                           element.removeEventListener(type,handler,false);

                }else if(element.detachEvent){

                           element.detachEvent('on'+type,handler);

                }else{

                           element['on'+type]=handler;

                }

                }

                }

                eventutil.addhandler(btn3,'click',showMes);

                eventutil.addhandler(box,'click',showBox);

                eventutil.addhandler(go,'click',stopGoto);//先出来showMes的内容,然后弹出showBox,这就是事件冒泡,逐级往上往外触发。

                //eventutil.removehandler(btn3,'click',showMes);

            //组织事件冒泡



        </script>

    </body>

    </html>


  • function showMes(event){

        alert(event.target.nodeName);

        }


  • <script type="text/javascript">

        //HTML事件,将触发事件放在HTML里面。可以直接写,也可以封装。

                function showMes(event){

        alert(event.type);

        }

    </script>

  • <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

        <div>

        <input type="button" value="HTML事件" id="btn" onclick="showMes()">

        <input type="button" value="DOM0事件" id="btn2">

        <input type="button" value="DOM2事件" id="btn3">

        <input type="button" value="IE事件" id="btn4">

        </div>

        <script type="text/javascript">

        //HTML事件,将触发事件放在HTML里面。可以直接写,也可以封装。

                function showMes(){

        alert("hello world");

        }


        var d=document;

        var btn2=d.getElementById("btn2"),

            btn3=d.getElementById("btn3"),

            btn4=d.getElementById("btn4");

        //DOM0事件,在js里触发事件,便于修改;当触发的事件=null为删除该事件。

        /*btn2.onclick=function(){

        alert("这是通过DOM0级添加的事件");

        }

        btn2.onclick=null;*/ //null不加引号。删除事件后,点击按钮将不再跳出弹框。


        //DOM2事件,处理事件addEventListener("其包括三个参数,触发、函数、false"),删除事件removeEventLiatener("同样包含三个参数")。

            //注意:DOM2的触发事件不加“on”,且此方法不支持IE浏览器。

            /*btn3.addEventListener("click",showMes,false);

            btn3.removeEventListener("click",showMes,false);*/


        //IE事件

             //IE8以及更早浏览器只支持事件冒泡

             //添加事件attachEvent("其包含两个参数,触发、函数(触发需要加‘on’)"),删除事件detachEvent("统一包含两个参数")。

               //btn4.attachEvent("onclick",showMes);

               //btn4.detachEvent("onclick",showMes);


            //封装一个DOM0,DOM2,IE事件,谁行谁用上。

                var eventutil={

                addhandler:function(element,type,handler){

                if(element=addEventListener){

                           element=addEventListener(type,handler,false);

                }else if(element=attachEvent){

                           element=attachEvent('on'+type,handler);

                }else{

                           element['on'+type]=handler;

                }

                },

                removehandler:function(element,type,handler){

                if(element=removeEventListener){

                           element=removeEventListener(type,handler,false);

                }else if(element=detachEvent){

                           element=detachEvent('on'+type,handler);

                }else{

                           element['on'+type]=handler;

                }

                }

                }

                eventutil.addhandler(btn3,'click',showMes);

                eventutil.removehandler(btn3,'click',showMes);

        </script>

    </body>

    </html>


  • type 事件属性
    target 事件目标
    stopPropagation() 阻止事件冒泡
    preventDefalut() 阻止事件默认行为


  • node.addEventListener(eventName, function, eventType)
    node.removeEventListener(eventName, function, eventType)


  • DOM0级事件:简单,易维护,跨浏览器

  • hmtl 事件处理程序

        优点:事件明确

        缺点:不方便代码修改和维护

  • dom0级 其实就是 先把元素取出来  然后在添加  funciton 事件 

    02:52
    看视频
  • DOM2级事件处理程序,addEventListener()和removeEventListener()有三个参数:要处理的事件名、作为事件处理程序的函数和布尔值。布尔值true:在捕获阶段调用事件处理程序。false:在冒泡阶段调用事件处理程序

  • HTML事件处理程序最大的缺点:HTML和JS代码紧密的耦合在一起

  • 布尔值--false:表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器),一般设为false;true表示在捕获阶段调用事件处理程序

  • 《JavaScript高级程序设计》中讲了,DOM0级对每个事件只支持一个事件处理程序,这也正是DOM2级相对DOM0级的好处,即DOM2级对每个事件支持多个事件处理程序。

  • 布尔值:true:捕获级   false:冒泡级

    01:38
    看视频

  • function showMes() {

    alert('Hello world!');

    }

    var btn2 = document.getElementById('btn2');

    var btn3 = document.getElementById('btn3');

    btn2.onclick = function () {

    alert('这是DOM0级事件');

    }

    btn2.onclick = null;

    // //DOM2级事件

    // btn3.addEventListener('click',showMes,false);

    // btn3.removeEventListener('click',showMes,false);

    // btn3.attachEvent('onclick',showMes);

    // btn3.detachEvent('onclick',showMes);

    var eventUtil = {

    addHandler: function (element, type, handler) {

    if (element.addEventListener) {

    element.addEventListener(type, handler, false);

    } else if (element.attachEvent) {

    element.attachEvent('on' + type, handler);

    } else {

    element['on' + type] = handler;

    }

    },

    removeHandler: function (element, type, handler) {

    if (element.removeEventListener) {

    element.removeEventListener(type, handler, false);

    } else if (element.detachEvent) {

    element.detaachEvent('on' + type, handler);

    } else {

    element['on' + type] = handler;

    }

    }

    }

    eventUtil.addHandler(btn3, 'click', showMes);

    eventUtil.removeHandler(btn3, 'click', showMes);



  • function showMes() {

    alert('Hello world!');

    }

    var btn2 = document.getElementById('btn2');

    var btn3 = document.getElementById('btn3');

    btn2.onclick = function () {

    alert('这是DOM0级事件');

    }

    btn2.onclick = null;

    // //DOM2级事件

    // btn3.addEventListener('click',showMes,false);

    // btn3.removeEventListener('click',showMes,false);

    // btn3.attachEvent('onclick',showMes);

    // btn3.detachEvent('onclick',showMes);

    var eventUtil = {

    addHandler: function (element, type, handler) {

    if (element.addEventListener) {

    element.addEventListener(type, handler, false);

    } else if (element.attachEvent) {

    element.attachEvent('on' + type, handler);

    } else {

    element['on' + type] = handler;

    }

    },

    removeHandler: function (element, type, handler) {

    if (element.removeEventListener) {

    element.removeEventListener(type, handler, false);

    } else if (element.detachEvent) {

    element.detaachEvent('on' + type, handler);

    } else {

    element['on' + type] = handler;

    }

    }

    }

    eventUtil.addHandler(btn3, 'click', showMes);

    eventUtil.removeHandler(btn3, 'click', showMes);


    00:07
    看视频
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1.你一定对HTML+CSS比较熟悉; 2.掌握一定的JS基础知识,尤其是函数封装、调用等知识。
老师告诉你能学到什么?
DOM事件具体相关知识,DOM事件的使用方法及应用!

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!