• DOM事件


      在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记。

      慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138

    事件

      是文档或浏览器窗口中发生的特定的交互瞬间。【JavaScript <------>HTML】

    事件流

      描述的是从页面中接受事件的顺序 (IE:事件冒泡流 / Netscape事件捕获流)

    事件的三个阶段

      事件的三个阶段分别是:捕获阶段、目标阶段、冒泡阶段

      事件冒泡流:即事件最开始由最具体的无素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到最不具体的那个节点(文档) input----->document

      事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。跟事件冒泡截然相反

      事件冒泡:从最内层至最外层(最常用)

      事件捕获:从最外层至最内层

    事件处理程序

    1.HTML事件处理程序(现在不建议使用了):事件直接加在HTML代码中

        <input type="button" value="按钮" id="btn" onclick="alert('hellow')">

      <input type="button" value="按钮" id="btn" onclick="show()">

        缺点:①HTML和js代码高耦合,如果修改,就要修改两个地方--HTML元素内和script函数。

         ②可能存在时差问题。考虑这样一种情形。show函数定义在按钮的后面,当DOM还没有加载到script标签的时候将会发生错误,此种情形可以通过内部添加try-catch来解决;或者将script标签放到页面顶部,但会延迟页面的加载速度。

    2.DOM0级事件处理程序 (用得比较多)浏览器4代出现

      较传统的方式:把一个函数赋值给一个事件处理程序的属性。  

      优点:简单,跨浏览器  

      var btn=document.getElementById("btn2");---先获取出元素,定义对象 //取得btn按钮对象  

      btn.onclick=function(){alert('这是通过DOM0级添加的事件!')}----让 事件以对象的属性 的形式出现。 //给btn添加onclick属性 

      btn.onclick=null;-----删除onclick属性。

    3.DOM2级事件处理程序

      定义了两个方法--用于处理指定和删除事件处理程序的操作:

      addEventListener()添加事件监听程序

      removeEventListener()移除事件监听程序

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

      btn.addEventListener('click',showMes,false);  //showMes为方法名

      注意:

      ①、若事件名称有on,则需去掉on。onclick --> click,onmouseover --> mouseover等等;

      ②、false 最大限度兼容所有浏览器--事件冒泡流。

      ③、通过addEventListener添加的事件只能通过removeEventListener来删除。--参数要与添加事件时相同

      btn.removeEventListener(参数); //参数必须和btn.addEventListener的参数一致,删除事件监听

      DOM0级和DOM2级事件处理程序可以给一个事件绑定多个函数,事件触发的时候会按照绑定顺序执行各个函数。如下所示:

      btn.addEventListener('click',showMes,false);

      btn.addEventListener('click',showMes,function(){alert(this.value);},false);

      缺点:IE不支持该事件

      DOM2级删除事件不能直接使用匿名函数。

      btn3.addEventListener('click',function(){alert("this.value");},false); //添加事件有效

      btn3.removeEventListener('click',function(){alert("this.value");},false); //删除事件无效

      因为匿名函数看起来是一样的,其实是两个不同的对象。

      btn3.addEventListener('click',function(){alert("this.value");},false); 

      btn3.removeEventListener('click',function(){alert("this.value");},false);

      这两行代码中的function(){alert(alert("this.value"));}看上去是同一个东西,实际上是不同的对象,而removeEventListener要求函数必须一样。

      所以addEventListener最好还是用将匿名函数赋值给某个变量

      addEventListener('click',showValue,false);

      removeEventListener('click',showValue,false);

      这样就不会出bug了。

      加括号——调用函数

      只要是要调用函数执行的,都必须加括号。此时,function()实际上等于函数的返回值。(没有返回值也已经执行了函数体内的行为)。就是说,只要加括号的,就代表将会执行函数体代码。  

      不加括号——指定函数引用  

      把函数名作为函数指针,用于传参,此时不是得到函数结果,因为不会运行函数体代码。它只是传递了函数体所在地址,在需要时找到函数体去执行。

    4.IE事件处理程序

      attachEvent()添加事件和detachEvennt()删除事件

      接收相同的两个参数:事件处理程序的名称和事件处理程序的函数,加on,没有布尔值;

      不加第三个参数的原因:IE8及更早的浏览器版本只支持事件冒泡

      btn.attachEvent('onclick',showMes);

      支持IE事件处理程序的浏览器:IE和OPERA

      btn.detachEvent('onclick',showMes);

    事件对象event

      在触发DOM上的事件时都会产生一个对象。

      1、DOM中的事件对象

        ①、type属性,用于获取事件类型  event.type

        ②、target属性,用于获取事件目标  event.target

        ③、stopPropagation()方法,用于阻止事件冒泡

        ④、preventDefault()方法,阻止事件的默认行为,比如a标签的跳转

        如果一个div里面有一个button,button和div都绑定了click事件,如果是事件冒泡,那么点击button的时候,首先触发button的处理函数,然后触发div的处理函数。(由内而外)

        如果有时候不想冒泡,也就是不希望div的事件被触发,那么需要阻止事件冒泡。stopPropagation()方法

        如果需要阻止a标签的默认属性跳转,可以使用阻止事件的默认行为preventDefault()方法

      2、IE事件对象(window.event)

        ①、事件类型:event.type  type属性,用于获取事件类型

        ②、事件目标:event.srcElement  srcElement属性,用于获取事件的目标

        ③、阻止事件冒泡:event.cancelBubble = true  cancelBubble属性,用于阻止事件冒泡  设置为true表示阻止冒泡,设置为false表示不阻止冒泡

        ④、阻止默认事件:event.returnValue = false  returnValue属性,用于阻止事件的默认行为  设置为false表示阻止事件的默认行为

      事件处理程序执行完后,event对象将被销毁;在事件处理程序内部this === currentTarget,而target则表示的是事件的实际目标,

      事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)。因为子节点触发事件的时候,会冒泡到父节点,触发该事件,这样就可以避免新加节点就绑定事件

    跨浏览器处理程序封装

    /*
    * [eventUtil 事件处理程序]
    */
    var eventUtil={
        //添加事件
        addEvent:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);  //DOM2级
            }else if(element.attachEvent){
                element.attachEvent('on'+type,handler);  //IE处理程序
            }else{
                element['on'+type]=handler;  //DOM0级  element.onclick === element['onclick']
            }
        },
        //删除事件
        removeEvent: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]=null;
            }
        },
        //获取事件
        getEvent:function(event){
            return event?event:window.event;
        },
        //获取事件类型
        getEventType:function(event){
            return event.type;
        },
        //获取事件对象
        getEventTarget: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;
            }
        },
    }

      

     
  • 相关阅读:
    NFS+DHCP+TFTP无人值守安装linux
    systemverilog学习(6)并发进程与内部通信
    systemverilog学习(5)procedural statement ,task ,function&automatic
    systemverilog学习(4)动态数组
    systemverilog学习(3)基本数据类型
    systemverilog学习(2)interface
    systemverilog学习(1)基础
    Verilog学习(13)PLL与搜索代码
    Verilog学习(12)实战之强度与竞争
    verilog学习(11)实战之计数器
  • 原文地址:https://www.cnblogs.com/EnSnail/p/5831689.html
Copyright © 2020-2023  润新知