• JS事件(一)事件流&事件处理程序


    1、事件流描述的是从页面接收事件的顺序

    IE和Netscape提出了几乎完全相反的事件流概念

    IE:事件冒泡(由内而外)

    Netscape:事件捕获(由外向内)

    DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

    2、为事件指定处理程序的方式

    2.1、HTML事件处理程序

    <script>
        function fun(){
        alert('clicked');
    }
    </script>
    <button onclick="func()">click me</button>

     缺点:1、时差  2、html代码语JavaScript代码耦合紧密,不易改动

    2.2、DOM0级事件处理程序

    获取要操作对象的引用

    给对象的事件处理程序属性(如onclick)设置属性值为函数

    以这种方式添加的事件会在事件流的冒泡阶段被处理

    var btn=document.getElementById('btn');
    btn.onclick=function(){
        alert(1);
    }

    删除DOM0级事件处理程序:

    btn.onclick = null;

    2.3、DOM2级事件处理程序

    var btn=document.getElementById("btn");
    btn.addEventListener("click",function(){
        alert("hello");
    },false);

    三个参数:事件、处理函数、事件处理阶段(true捕获false冒泡)

    最大的优点:可以为一个对象添加多个事件,不会相互覆盖,而是按某种顺序依次执行

    移除事件:

    var btn=document.getElementById("btn");
    function fun(){
        alert("hello");
    }
    btn.addEventListener("click",fun,false);
    btn.removeEvemtListener("click",fun,false);

    注意:removeEventListener()不能移除匿名函数,像下面这样也是无效的:

    var btn=document.getElementById("btn");
    btn.addEventListener("click",function(){
        alert("hello");
    },false);
    
    btn.removeEventListener("click",function(){
        alert("hello");
    },false);

    添加和移除的被认作两个不同的函数

    大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大程度兼容各种浏览器

    2.4、IE事件处理程序

    IE8-浏览器值支持事件冒泡

    有两个类似的方法:attachEvent()和detachEvent()

    var btn=document.getElementById("btn");
    function fun(){
        alert(this===window);//true
    }
    btn.attachEvent("click",fun);
    btn.detachEvent("click",fun);

    总结:DOM2级和IE事件处理程序有何不同之处?

    1.作用域:DOM2级事件处理与DOM0事件处理一样,作用域在当前元素(btn)的作用域中,IE事件处理程序的作用域是全局:window;

    2.参数:个数不同,IE事件处理程序只支持冒泡;

    3.是否有'on':DOM2无:'click',IE有:'onclick';

    4.都支持添加多个事件,但执行顺序相反: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]=null;
                }
            }
            
        }
  • 相关阅读:
    第二次刷题感受——路漫漫其修远兮,吾将上下而求索。
    刷题就是照镜子——第一次刷2008年初赛题感受
    第一次集训刷题感受
    我的第一个博客
    预测房价的回归问题
    电影评论的情感极性分析
    语音助手是这样子的(二)
    语音助手是这样子的(一)
    软工第一次作业
    2020软件工程第五次作业_第二组
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5750814.html
Copyright © 2020-2023  润新知