zoukankan      html  css  js  c++  java
  • event(1)

    event
    event(事件流)是 window对象的一个属性
    在JS中事件有2种类型 一种是冒泡类型 一种是捕获类型
    冒泡类型最先是在IE中出现,而捕获类型最先在标准的DOM中出现,不过最终IE得胜 从而在标准的DOM中有捕获和冒泡两种
    冒泡的顺序是从下到上p>div>body>document,捕获恰恰相反

    事件监听的方法
    事件监听的方法分为两种,传统事件监听和非传统事件监听

    传统的事件监听如下
    1. <div onclick=test1()>111</div>
    <script>
    function test1(){
    alert("11")
    }
    </script>
    2.<div id ="div1">222</div>
    <script>
    document.getelementById("div1")
    div1.onclick=function(){
    alert("222")
    }
    </script>

    非传统的事件监听 非传统事件也分为2种,一种是IE事件监听,一种是标准的DOM事件监听
    IE事件监听
    在IE事件监听中有2个函数,一个是添加事件处理函数,一个时删除事件处理函数
    [obj].attachEvent('event_style',event_name);//添加事件处理函数
    [obj].detachEvent('event_style',event_name);//删除事件处理函数
    <body>
    <div id="div1">IE事件监听</div>
    <script>
    window.onload=function(){//页面加载
    var div1=document.getelementById("div1");//得到对象
    div1.attachEvent('onclick',test1)//添加IE事件函数
    }
    function test1(){
    //调用添加的事件函数
    alert("333")//打印测试
    div1.detachEvent('onclick',test1)//删除这个事件处理函数
    }
    </script>
    </body>
    标准的DOM事件监听
    在标准的DOM事件监听中也有2个函数,一个是添加事件处理函数,一个是删除事件处理函数,这两个函数和IE的不行同,而且参数也不相同,有3个参数,第一个参数是事件类型,第二个参数是函数名,第三个参数有两个值,true值代表是捕获事件,false是冒泡事件,例子如下
    [obj].addEventListener("event_style",event_name,event_modle)//添加事件处理函数
    [obj].removeEventListener("event_style",event_name,event_modle)//删除事件处理函数

    <body>
    <div id="div2">444</div>
    </body>
    <script>
    window.onload=function(){
    var div2=document.getelementById("div2");
    div2.addEventListener("click",test2,false)
    //在添加事件函数这行代码,大家可能发现和IE有所不同,不同点2点,第一点就是事件类型和IE不同,缺少了'on'这单词,不过大家不要惊讶,这本身就是存在的,所有大家在使用的时候一定要切记,onmouseover变成mouseover等等,还有第三个参数代表,事件模型,在这里是冒泡类型,因此用false
    }
    </script>
    function test2(){
    alert("444");
    div2.removeEventListener('click',test2,false)
    //删除这个事件处理函数
    }

    到底我们何时用传统事件何时用非传统事件呢?

    大家可能体会到,传统的事件只能处理一个对象,而如果我们要处理多个时呢,用非传统的话,这样大大的会提高我们代码的可阅读性,在非传统的事件处理函数中,可以存在多个事件函数

    window.onload=function(){
    var div1=document.getelementById("div1");
    var div2=document.getelementById("div2");
    div2.addEventListener("click",test2,false)
    div1.addEventListener("click",test1,false)
    //从上面的代码看,是不是我们的代码可阅读性提高了不少呢?
    }

  • 相关阅读:
    归并两路有序链表
    [转]两种高性能I/O设计模式(Reactor/Proactor)的比较
    linux 静态库使用经验
    系统性能调优经验
    编译-O 选项对性能提升作用
    [转]Linux shell中的那些小把戏
    shell函数传递带空格的参数
    标题清洗引发的算法(两个字符串的最长公共子串)
    正则表达式之Matcher类中group方法
    ConcurrentHashMap JDK 1.6 源码分析
  • 原文地址:https://www.cnblogs.com/limit1/p/4012275.html
Copyright © 2011-2022 走看看