首页 / JAVASCRIPT / JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！

JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8926字，纯文字阅读大概需要13分钟。

内容图文

JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！

一、事件流

我们通过下面一个实例，进行说明。

            
                <
                body
                >
                <
                h1
                >Event Flow</h1><ul id="nav"><li><a href="../image-load/image-load.html">Image-Load</a></li><li><a href="../click/click.html">Click</a></li><li><a href="../move/move.html">Move</a></li><li><a href="../address/address.html">Address Form</a></li><li><a href="../follow/follow.html">Follow</a></li><li><a href="../flow/flow.html">Flow</a></li><li><a href="../keys/keys.html">Key Press</a></li><li><a href="../load/load.html">addLoadEvent</a></li></ul><div id="content"><ul id="list1"><li><p>List 1 </p><ul id="list2"><li><p>List 2 </p><ul id="list3"><li><p>List 3 </p></li></ul></li></ul></li></ul><ul id="list4"><p>List 4 </p></ul></div></body>

提供的CSS样式通过设置第三个嵌套列表的位置，使其在视觉上处于祖先元素之外、且位于第四个列表之上

                
                    #list1 {
    height:80px;
}
#list2 {
    margin-top: 10px;
    height:20px;
}

#list3 {
    position:absolute;
    top:190px;
    left:150px;
}

#list4 {
    margin-top:10px;
    height:100px;
}

            
                //
                主要任务就是修改被单击元素的属性
addEvent(window,‘load‘,function(){
    //为了演示问题所在，使用一个修改后的addEvent方法function modifiedAddEvent(obj,type,fn)
    {
        if (obj.addEventListener)
        {
            //W3C方式/*这个方法在第一章的addEvent()方法基础上进行修改，
            修改后启用了捕获阶段而取消了冒泡阶段*/
            obj.addEventListener(type,fn,true);
        }
        elseif (obj.attachEvent)
        {
            //ms 方式
            obj[‘e‘+type+fn]=fn;
            obj[type+fn]=function(){obj[‘e‘+type+fn](window.event);}
            obj.attachEvent(‘on‘+type,obj[type+fn]);
        }
        else
        {
            returnfalse;
        }
    }
    var counter=0;

    //取得无序列表var lists=document.getElementsByTagName(‘ul‘);
    for (var i = 0 ;i<lists.length ;i++ )
    {
        //注册单机事件侦听器
        modifiledAddEvent(lists[i],‘click‘,function(){
            //向段落添加表示捕获单机事件先后顺序的数字var append=document.createTextNode(‘:‘+counter++);
            this.getElementsByTagName(‘p‘)[0].appendChild(append);

            //修改类名以突出显示被单击的元素this.className=‘clicked‘;
        });
        
    }
});

老实说，我现在又到了没有耐心的时刻了，看书看不下去。所以上文看的也是迷迷糊糊。但是想到，我一定要坚持下去，我不能浮躁。要不我今天先休息。明天继续学习。//我还是客服了我浮躁的内心，静下心来看了看前面的代码，并且理解了，这样可以继续看下去了

之所以点击list3的时候12都做出了相应的变化，是因为当你单击list3的时候，也单击了其祖先列表

事件冒泡--

事件捕获--

W3C捕获以及冒泡事件流

阻止冒泡

            
                function
                 stopPropagation(eventObject)
{
    eventObject=eventObject||getEventObject(eventObject);
    if (eventObject.stopPropagation)
    {
        eventObject.stopPropagation();
    }
    else
    {
        eventObject.cancelBubble=true;
    }
}
window[‘ADS‘][‘stopPropagation‘]=stopPropagation;

阻止事件

            
                function
                 preventDefault(eventObject)
{
    eventObject=eventObject||getEventObject(eventObject);
    if (eventObject.preventDefault)
    {
        eventObject.preventDefault();
    }
    else
    {
        eventObject.returnValue=false;
    }
}

window[‘ADS‘][‘preventDefault‘]=preventDefault;

二、注册事件

嵌入式注册事件

            
                <
                a 
                href
                ="www.baidu.com"
                 onclick
                ="window.opent(this.href);return false;"
                >http://baidu.com/</a>

深入理解ADS.addEvent()方法

            
                function
                 addEvent(obj,type,fn)
{
    
                if
                (obj.attachEvent)
    {
        obj[‘e‘+type+fn]=fn;
        obj[type+fn]=function(){obj[‘e‘+type+fn](window.event);}
        obj.attachEvent(‘on‘+type+obj[type+fn]);
    }
    else
        obj.addEventListner(type,fn,false);
}

传统事件注册

            window.onload=function()
{
    var anchor=document.getElementById(‘example‘);
    anchor.onclick=function()
    {
        //单击事件时候执行代码    }
}

Microsoft特有的事件模型

            
                function
                 eventListener()
{
    
                //
                响应单击事件的代码
                }

window.attachEvent(‘onload‘,function(){
    var link = document.getElementById(‘example‘);
    //增加事件
    link.attachEvent(‘onclick‘,eventListener);

    //去除事件//link.detachEvent(‘onclick‘,eventListener);
});

W3C DOM2事件模型

            
                //
                w3c事件注册
                function
                 eventListener()
{
    
                //
                响应单击事件的代码
                }
window.addEventListener(‘load‘,function(W3CEvent))
{
    var link = document.getElementById(‘example‘);
    link.addEventListener(‘click‘,eventListener,false);
},false);

//移除事件监听器
link.removeEventListener(‘click‘,eventListener,false);

load事件

无论那种事件注册方法，load事件会一直等到所有图像全部加载完之后才被调用，要解决这问题，我们要在ADS库中添加如下方法

            
                function
                 addLoadEvent(loadEvent,waitForImage)
{
    
                if (!isCompatible())
    {
        returnfalse;
    }
    //如果等标记是ture则使用常规的添加事件的方法if (waitForImage)
    {
        return addEvent(window,‘load‘,loadEvent);
    }
    //否则使用一下不同的方式包装loadEvent()方法//一边为this关键字指定正确的内容，同事确保事件不会被执行两次var init = function()
    {
        //如果这个函数已经被调用了，则返回if (argument.callee.done)
        {
            return;
        }
        //标记这个函数，以便检查他是否运行过
        arguments.callee.done=true;
        //在document的环境中运行载入事件        loadEvent.apply(document,arguments);
    };

    //为DOMContentLoad事件注册事件侦听器if (document.addEventListener)
    {
        document.addEventListener("DOMContenLoaded",init , false);
    }
    //对于safari使用setInterval()函数检测document是否咱如完成if (/WebKit/i.test(navigator.userAgent))
    {
        var _timer=setInterval(function(){
            if (/loaded|complete/.test(document.readyState))
            {
                clearInterval(_timer);
                init();
            }
        },10);
    }

    //对于IE(使用条件注释)，附加一个在载入过程最后执行的脚本。//并检测该脚本是否载入完成/*@cc_on*//*if(@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    var script=document.getElementById("__ie_onload");
    script.onreadystateChange=function()
    {
        if (this.readyState==‘complete‘)
        {
            init();
        }
    };
    /*@end @*/returntrue;

}
window[‘ADS‘][‘addLoadEvent‘]=addLoadEvent;

跨浏览器的事件属性和方法

W3C DOM2事件模型为Event对象

定义了下列属性。

bubbles:是否是冒泡事件；

cancelable:是否可以被取消默认动作；

currentTarget:是当前正在处理的事件侦听器所在的事件流中的DOM元素；

target:是DOM文档中最早调用事件序列的目标对象（EventTarget对象的实例）；

timestamp：是一个DOMTimeStamp对象，确定子创建事件的纪元事件算起经过的毫秒数。但不一定在所有系统中都有效

type:包含时间名称的字符串值

eventPhase:当前事件侦听器出去事件流的那个阶段123~也可以用如下：

            
                function
                 eventListener(W3CEvent)
{
    
                switch
                 (W3CEvent.eventPhase)
    {
    
                case
                  Event.CAPTURING:
        
                //
                如果处于捕获阶段要运行的代码
                break
                ;
    
                case
                 Event.AT_TARGET
        
                //
                如果当前目标对象要运行的代码
                break
                ;
    
                case
                 Event.BUBBLING_PHASE:
        
                //
                如果处于冒泡阶段要运行的代码
                break
                ;
    }
}

W3C DOM2事件模型也定义了下列的Event对象方法
initEvent(eventType,canBubble,cancelable)：用于初始化通过document.createEvent(‘Event‘)方法创建的事件对象。

preventDefalt()：用于取消对象的默认动作

stopPropagation()用于停止事件流的进一步执行，包括捕获阶段、目标对象和冒泡阶段。

DOM2事件规范定义的MouseEvent对象：

MouseEvent对象属性：altKey,ctrlKey,shiftKey,分别表示在鼠标事件发僧是否按住了键盘上的Alt，Ctrl，Shift键

button ,button中会包含表示哪个鼠标键按下的一个整数值。鼠标山每个键与证书的对应关系：

0表示鼠标的左键；1表示中（如果有）2表示右

            
                if (W3CEvent.button==0)
{
    //左键的单机事件}
//或者if (W3CEvent.button==MouseEvent.BUTTON_LEFT)
{
    //左键单击的代码
}

还有clientX和clientY类似的还有screenX和screenY

            document.addEventListener(‘click‘,function(W3CEvent){
    alert(‘client:(‘+W3CEvent.clientX+‘,‘+W3CEvent.clientY+‘)‘);
},false);

处理诸多不兼容性问题

访问事件的目标元素

            
                function
                 getTarget(eventObject)
{
    eventObject=eventObject||getEventObject(eventObject);

    //如果是W3C或者MSIE的模型var target=eventObject.target||eventObject.srcElement;

    //如果想Safari中一样是一个文本节点，重新将目标对象指定为父元素if (target.nodeType==ADS.node.TEXT_NODE)
    {
        target=node.parentNode;
    }
    return target;
}

window[‘ADS‘][‘getTarget‘]=getTarget;

通过这个方法，可以取得给定事件的目标：

            ADS.addEvent(window,‘load‘,function(){
    function eventListener(W3CEvent)
    {
        //取得目标var target=ADS.getTarget(W3CEvent);
        //target现在引用的是一个适当的元素        window.open(target.href);
    }
    var anchor = document.getElementById(‘example‘);
    addEvent(anchor,‘click‘,eventListener);
});

确定单击了哪个鼠标键（下面代码直接copy源代码的。不高兴敲了）

            
                function
                 getMouseButton(eventObject) {
    eventObject = eventObject || getEventObject(eventObject);
    // Initialize an object wit the appropriate properties//使用适当的属性初始化一个对象变量var buttons = {
        ‘left‘:false,
        ‘middle‘:false,
        ‘right‘:false
    };
    /*检查eventObject对象的toString()方法的值，W3C DOM对象有toString方法
    并且此时可方法的返回值应该是MouseEvent*/// Check the toString value of the eventObject// W3C Dom object have a toString method and in this case it// should be MouseEventif(eventObject.toString && eventObject.toString().indexOf(‘MouseEvent‘) != -1) {
        // W3C Methodswitch(eventObject.button) {
            case 0: buttons.left = true; break;
            case 1: buttons.middle = true; break;
            case 2: buttons.right = true; break;
            default: break;
        }
    } elseif(eventObject.button) {
        // MSIE methodswitch(eventObject.button) {
            case 1: buttons.left = true; break;
            case 2: buttons.right = true; break;
            case 3:
                buttons.left = true;
                buttons.right = true;
            break;
            case 4: buttons.middle = true; break;
            case 5:
                buttons.left = true;
                buttons.middle = true;
            break;
            case 6:
                buttons.middle = true;
                buttons.right = true;
            break;
            case 7:
                buttons.left = true;
                buttons.middle = true;
                buttons.right = true;
            break;
            default: break;
        }
    } else {
        returnfalse;
    }
    return buttons;

}
window[‘ADS‘][‘getMouseButton‘] = getMouseButton;

处理鼠标的位置：

            
                function
                 getPointerPositionInDocument(eventObject) {
    eventObject = eventObject || getEventObject(eventObject);
    var x = eventObject.pageX || (eventObject.clientX +
        (document.documentElement.scrollLeft || document.body.scrollLeft));
    var y= eventObject.pageY || (eventObject.clientY +
        (document.documentElement.scrollTop || document.body.scrollTop));
    //x and y now contain the coordinates of the mouse relative to the document originreturn {‘x‘:x,‘y‘:y};
}
window[‘ADS‘][‘getPointerPositionInDocument‘] = getPointerPositionInDocument;

访问键盘命令

            
                function
                 getKeyPressed(eventObject) {
    eventObject = eventObject || getEventObject(eventObject);
    var code = eventObject.keyCode;
    var value = String.fromCharCode(code);
    return {‘code‘:code,‘value‘:value};
}
window[‘ADS‘][‘getKeyPressed‘] = getKeyPressed;

原文：http://www.cnblogs.com/sunhan/p/3542392.html

内容总结

以上是互联网集市为您收集整理的JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！全部内容，希望文章能够帮你解决JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1072777.html

来源：【匿名】

【上一篇】js 传递字符串问题【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！】教程文章相关的互联网学习教程文章

javascript和jquey的自定义事件小结【代码】【图】

“通过事件机制，可以将类设计为独立的模块，通过事件对外通信，提高了程序的开发效率。” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好对象之间通过直接方法调用来交互1）对象A直接调用对象B的某个方法，实现交互；直接方法调用本质上也是属于一种特殊的发送与接受消息，它把发送消息和接收消息合并为一个动作完成；方法调用方和被调用方被紧密耦合在一起；因为发送消息和接收消息是在一个动作内完成，所以无...

Javascript中点击（click）事件的3种写法【代码】

方法一<!DOCTYPE html> <html> <head><title>Javascript中点击事件方法一</title> </head> <body><button id="btn">click</button><script type="text/javascript">var btn = document.getElementById("btn");btn.onclick=function(){alert("hello world");}</script> </body> </html> 方法二<!DOCTYPE html> <html> <head><title>Javascript中点击事件方法二</title> </head> <body><button id="btn">click</button><script type=...

javascript事件对象

把多个JavaScript函数绑定到onload事件处理函数上

为了让函数只在页面加载完毕后才得到执行，我们会把函数绑定到onload事件上：window.onload = userFunction但如果有两个函数：firstFunction() 和 secondFunction()，都想让它们在页面加载完毕后得到执行，该怎么办？如果这样： window.onload = firstFunciton; window.onload = secondFunction;只有最后一个函数能被执行。由此可得：每个事件处理函数只能绑定一条指令。但我们可以这样做： window.onload = function...

Javascript事件【代码】

Javascript包含三种模型：内联模型、脚本模型和DOM2模型。1.内联模型（现在基本不用了）　　即事件响应处理函数作为一个标签属性来执行，典型的就是onclick()函数；<input type=‘button‘ value=‘按钮‘ onclick="alert(‘点击了！‘)" /> 2.脚本模型　　为了解决html与javascript的分离。window.onload=function(){var input=document.getElementByTagName(‘input‘)[0];input.onclick=function(){alert("点击了！");} }PS：也...

javascript监听事件兼容【代码】

JavaScript 同步异步及事件轮询详解【代码】

JS为何是单线程的？ JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。（在JAVA和c#中的异步均是通过多线程实现的，没有循环队列一说，直接在子线程中完成相关的操作）JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假...

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。1. <!DOCTYPE HTML>2. <html>3. <head>4. <meta charset="utf-8" />5. <title>闭包演示</title>6. <style type="text/css"...

javascript---事件对象【代码】

事件对象event　　如果是事件处理函数绑定的函数，浏览器会默认传递一个参数，event对象。而这个对象会根据触发的事件判断是鼠标事件还是键盘事件 //鼠标事件1 document.onclick=function(evt){ 2 alert(evt); //键盘事件3 }//键盘事件1 document.onkeydown=function(evt){ 2 alert(evt); //键盘事件3 } 由于IE浏览器和W3C浏览器获取event对象有不兼容的地方，所以...

JavaScript进阶系列06,事件委托【代码】

在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制。现在需要使用这个事件处理机制为页面元素注册事件方法。 □ 点击页面任何部分触发事件创建一个script1.js文件。(function() {eventUtility.addEvent(document, "click", function(evt) {alert(‘hello‘);}); }()); 页面部分。<head> <meta http-equiv="Content-Type" content="text/html; ...

Javascript----input事件实现动态监听textarea内容变化【代码】【图】

1、代码<!DOCTYPE html> <html><head><title>textarea输入文字监听</title> </head><body><textarea id=‘text‘ maxlength="50" style="width: 400px; height: 200px;"></textarea><span id=‘sp‘></span><script type="text/javascript">var val = document.getElementById("text");var tar = document.getElementById(‘sp‘);console.log(tar);val.addEventListener("input", function(e) {var t = this.value;console.log(t)...

javascript 事件绑定【代码】【图】

一、最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。这些属性也被称为事件处理器<INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)">或者<INPUT TYPE="text" NAME="first_name" onChange="javascript : js code">或者Dom.onclick = function(e){ //todo }二、js方法绑定事件1、dom对象的attachEvent()方法给该dom元素的事件（该方法仅支...

Javascript高级编程学习笔记（60）—— 事件（4）事件类型

事件类型Web浏览器中可能发生的事件有许多种类型不同类型的事件都有着自己独特的信息在“DOM3级事件”规范中，规定了以下几类事件：UI事件当用户与页面元素交互时触发焦点事件当元素失去或获得焦点时触发鼠标事件当用户通过鼠标在页面上执行操作时触发滚轮事件当使用鼠标滚轮或类似设备时触发文本事件当在文档中输入文本时触发键盘事件当用户通过键盘在页面执行操作时触发合成事件当为IME（输入法编辑...

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题【代码】

javascript 点击事件执行两次js问题在JQuery中存在unbind()方法，先解绑再添加点击事件,解决方案为：$(".m-layout-setting").unbind(‘click‘).click(function(){ //此处填写逻辑代码 }) ------因为利用js在页面加载后添加需要点击事件的代码，发现在点击后会代码会执行两次，因为有toggle效果，导致弹窗出现又很快丢失查了一些资料，发现这是冒泡的原因，需要在点击事件代码中加入阻止冒泡的方法：e.stopPropagation();但是发现还...

javascript 在window.onload绑定多个事件函数【代码】

近期有个项目当页面Html文档初始化完了之后，要加载多个函数，最初我是这样用的：window.onload=firstfunc(); window.onload=secondfunc();但是这样总是最后一个才会被执行。最后在网上学习了下才知道怎么处理： 1function addLoad(func){2var oldonload=window.onload;3if(typeof window.onload != ‘function‘)4 window.onload=func;5 }else {6 window.onload=function(){7 oldonload();8 func...

首页 / JAVASCRIPT / JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！

JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底！】教程文章相关的互联网学习教程文章

事件 - 相关标签

程序 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程