快捷搜索:

您的位置:澳门新葡4473网站 > 新闻社区 > Javascript 的addEventListener区别分析_javascript技巧_脚

Javascript 的addEventListener区别分析_javascript技巧_脚

发布时间:2020-02-01 01:17编辑:新闻社区浏览(185)

    最近再学javascript,在闭包这个技术问题上卡住了,不太好理解,今天看了一篇文章,准备以后学明白了 再回头看看,先保存在这里:

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点、document、window 或 XMLHttpRequest。 type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById.addEventListener("keydown", function { alert; }, false); IE中: target.attachEvent; target: 文档节点、document、window 或 XMLHttpRequest。 type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。 listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById.attachEvent("onclick",function{alert; W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: W3C格式: removeEventListener(event,function,capture/bubble); Windows IE的格式如下: detachEvent; target.addEventListener(type, listener, useCapture); target 文档节点、document、window 或 XMLHttpRequest。 type 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 listener 实现了 EventListener 接口或者是 JavaScript 中的函数。 useCapture 是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false 事件触发时,会将一个 Event 对象传递给事件处理程序,比如: document.getElementById.addEventListener("keydown", function { alert; }, false); 适应的浏览器版本不同,同时在使用的过程中要注意 attachEvent方法 按钮onclick IE中使用 addEventListener方法 按钮click fox中使用 两者使用的原理:可对执行的优先级不一样,下面实例讲解如下: attachEvent方法,为某一事件附加其它的处理事件。 addEventListener方法 用于 Mozilla系列 举例: document.getElementById.onclick = method1; document.getElementById.onclick = method2; document.getElementById.onclick = method3;如果这样写,那么将会只有medhot3被执行 写成这样: var btn1Obj = document.getElementById; //object.attachEvent; btn1Obj.attachEvent; btn1Obj.attachEvent; btn1Obj.attachEvent;执行顺序为method3->method2->method1 如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById; //element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3 实例: 复制代码 代码如下:

    出来混,迟早要还。今天写JavaScript代码,才知道一个循环里的函数共享同一闭包。比如下面的代码是错的,不能正确报告每个事件对应的描述:

    点击

    var div = document.getElementById("testDiv");
    var events = {onclick: "clicked", onchange: "changed",  onmouseover: "mouse over"}; 

    从W3C的发展时间轴来看, DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们可以从以下的表格来看:

    for(e in events){
       div[e] = function(){
          alert(events[e]);
       };
    }

    DOM1 协定:

    试一下就知道。不管激发events列表里的哪坨事件,alert弹出的窗口里总是"mouse over"。

    Event Name

    不明白JavaScript为什么这样处理循环和闭包的关系。哪位老大指点一下? 更新:随便猜一下。JavaScript的Closure环境由静态的句法结构确定。也就是说,代码一旦写成,我们就知道函数的自由变量同哪些环境里的变量绑定。这样说来,上面的循环只申明了一个变量p和一个内部函数,从静态的句法结构来看,我们的确只有一个环境。因此,虽然运行时同一个内函数被调用多次,创建了多个闭包,这些闭包指向的都是同一个环境里的同一个变量。这样同JavaScript规定的闭包语义一致。

    Description

    阳春版的修改办法是利用函数定义创建新闭包,符合业内名言:任何计算机问题都能通过多加一层抽象解决。:-) Crockford Douglas 把多加的这层函数叫做因子函数(factor function)。

    onblur()

    var div = document.getElementById("testDiv");
    var events = {onclick: "clicked", onchange: "changed",  onmouseover: "

    The element has lost focus (that is, it is not selected by the user).

    onchange0

    The element has either changed (such as by typing into a text field) or the element has lost focus.

    onclick0

    The mouse has been clicked on an element.

    ondblclick()

    The mouse has been double-clicked on an element.

    onfocus()

    The element has gotten focus.

    onkeydown()

    A keyboard key has been pressed down (as opposed to released) while the element has focus.

    onkeypress()

    A keyboard key has been pressed while the element has focus.

    onkeyup()

    A keyboard key has been released while the element has focus.

    onload()

    The element has loaded (document, frameset, or image).

    onmousedown()

    A mouse button has been pressed.

    onmousemove()

    The mouse has been moved.

    onmouseout()

    The mouse has been moved off of or away from an element.

    onmouseover()

    The mouse has moved over an element.

    onmouseup()

    A mouse button has been released.

    onreset()

    The form element has been reset, such as when a form reset button is pressed.

    onresize()

    The window's size has been changed.

    onselect()

    The text of a form element has been selected.

    onsubmit()

    The form has been submitted.

    onunload()

    The document or frameset has been unloaded.

    DOM2 的进化:

    DOM 0 Event

    DOM 2 Event

    onblur()

    blur

    onfocus()

    focus

    onchange()

    change

    onmouseover()

    mouseover

    onmouseout()

    mouseout

    onmousemove()

    mousemove

    onmousedown()

    mousedown

    onmouseup()

    mouseup

    onclick()

    click

    ondblclick()

    dblclick

    onkeydown()

    keydown

    onkeyup()

    keyup

    onkeypress()

    keypress

    onsubmit()

    submit

    onload()

    load

    onunload()

    unload

    新的DOM2 用法可以addEventListener()这个函数来观察到:

    addEventListener(event,function,capture/bubble);

    参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler, 是 attachEvent(), 格式如下:

    window.attachEvent);

    比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.这里用图像的Rollover例子来表现事件的用法:

    -//W3C//DTD HTML 4.01//EN”“;

    Rollover

    图片 1

    图片 2

    图片 3

    图片 4

    上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.

    W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

    W3C格式:

    removeEventListener(event,function,capture/bubble);

    Windows IE的格式如下:

    detachEvent;

    数据参考: Chapter 14 - Browsers and JavaScript, JavaScript Step by Step, by Steve Suehring

    本文由澳门新葡4473网站发布于新闻社区,转载请注明出处:Javascript 的addEventListener区别分析_javascript技巧_脚

    关键词: