首页 技术教程 实用代码 注册破解 正则表达式 网址导航 电子书籍

addEventListener被多次执行的问题

 如下js代码,其中addEventListener,被多次监听click事件,ajaxSend被多次执行,我们只需要在ajaxSend后加上event.stopImmediatePropagation(),就不会被多次监听发送了 if(document.getElementById('menu')) { // get menu LIs var lists = document.getElementById('menu').querySelectorAll('li span'); var nr_lists = lists.length; //console.log(nr_lists); // register click to eack span-li if(nr_lists > 0) { for(var i=0; i<nr_lists; i++) { lists[i].addEventListener('click', function(e){ if(e.target.id == current_span) retur...
类别:网页编程 - JavaScript    查看:49    更新:2024-11-14

Prototype实战教程:Function -> bindAsEventListener

bindAsEventListener bindAsEventListener(thisObj[, arg...]) -> Function 一个专用于事件的 bind 方法的变体, 它确保事件触发后会将当前事件对象作为第一个参数传递给事件处理函数。 如果你不清楚“绑定”是什么,请查阅 Function 概述。如果你不是非常明白 bind() 能够做什么,请查阅它的文档。 假如创建一个用于事件处理的函数,你需要以某种方式获取当前的事件对象,同时还要控制函数运行时所在的 上下文,该怎么办?bindAsEventListener 都为你考虑到了,它将事件处理函数绑定到指定的上下文 (thisObj),并且确保当事件发生时,事件对象会传递到事件处理函数。 对于仅实现了 DOM Level 0 事件...
类别:网页编程 - JavaScript    查看:106    更新:2014-05-23

Prototype实战教程:Event -> unloadCache

unloadCache     [1.6] Event.unloadCache() 注销所有通过 observe 方法注册的事件处理程序。从 1.6 版开始该方法不再可用。 后向兼容性通告: 该方法在 1.6 发行版中已经被移除。若要将原有的代码升级到 v1.6,请删除所有脚本中对该方法的调用。 令人痛苦的 MSIE 事件处理机制和内存泄漏问题 MSIE 具有一个影响深远的造成人们极度困扰的问题:在大多数情形下,当页面卸载时,它不会释放事件处理程序所占用的内存。 这些处理程序将驻留在内存中,慢慢的填满内存空间,进而妨碍浏览器的正常运行——这就是著名的内存泄漏。 当然,你可以手动保留通过 observe 所注册的事件处理程序句柄...
类别:网页编程 - JavaScript    查看:124    更新:2014-05-23

Prototype实战教程:Event -> stopObserving

stopObserving Event.stopObserving(element, eventName, handler[, useCapture = false]) 注销事件处理程序。 该方法具有与 observe 在语义上完全一致的参数。它用于注销一个事件处理程序, 注销后这个元素事件的组合将不会被再次调用。 为什么不会停止调用? 为使 stopObserving 正常工作,必须传入与调用相关的 observe 注册事件时 完全相同的参数。 这看起来似乎很简单,但是编写代码时经常会出现类似下面的一种常见错误: var obj = { … fx: function(event) { … } }; Event.observe(elt, 'click', obj.fx.bindAsEventListener(obj)); … // 这是错误的,不能这样做 E...
类别:网页编程 - JavaScript    查看:78    更新:2014-05-23

Prototype实战教程:Event -> stop

stop Event.stop(event) 停止事件的传播,并阻止事件被触发后最终的默认行为。 事件被触发后,浏览器对事件的处理包括两个方面: 事件发生后,浏览器通常首先触发事件发生元素上的事件处理程序,然后是它的父元素,父元素的父元素……依此类推, 直到文档的根元素为止。这被称为 事件冒泡,是事件传播的最常见的方式。当处理好一个事件后, 你可能想要停止事件的传播,不希望它继续冒泡。 当你的程序有机会处理事件时,如果这个事件具有 默认行为,同时浏览器也会处理它。例如,点击导航链接、 将表单提交到服务器、在一个单行文本框中按下回车键等等。如果对这些事件你定义了自己的处理方式, 可能会非常希望...
类别:网页编程 - JavaScript    查看:76    更新:2014-05-23

Prototype实战教程:Event -> pointerY

pointerY Event.pointerY(event) -> Number 返回鼠标事件发生时鼠标所在的绝对垂直位置。 注意:这个位置是基于 页面 的绝对位置,而不是基于 窗口的可视部分: 在窗口可视部分的同一个位置,如果向下滚动页面,返回的位置值也会随之增加。
类别:网页编程 - JavaScript    查看:85    更新:2014-05-23

Prototype实战教程:Event -> pointerX

pointerX Event.pointerX(event) -> Number 返回鼠标事件发生时鼠标所在的绝对水平位置。 注意:这个位置是基于 页面 的绝对位置,而不是基于 窗口的可视部分: 在窗口可视部分的同一个位置,如果向右滚动页面,返回的位置值也会随之增加。
类别:网页编程 - JavaScript    查看:98    更新:2014-05-22

Prototype实战教程:Event -> observe

observe Event.observe(element, eventName, handler[, useCapture = false]) 在 DOM 元素上注册事件处理程序。 重要提示 首先,如果你曾经使用过 HTML 事件属性(如 <body onload="return myFunction()">)或 DOM Level-0 的事件属性(如 window.onload = myFunction;),你一定要忘记那些糟糕的做法,然后了解 observe 是怎么做的。 对于那些相同的元素事件(element+event)组合,它并不会替换已经存在的事件处理程序,而是将新的处理程序增加到元素事件组合的 处理程序列表 中。使用 observe 再也不会影响到先前已有的事件处理程序调用了。 参数说明 对于希望增加事件处理的 DOM 元素...
类别:网页编程 - JavaScript    查看:92    更新:2014-05-22

Prototype实战教程:Event -> isLeftClick

isLeftClick Event.isLeftClick(event) -> Boolean 判断鼠标相关的事件是否是由“左键”(主功能键)引发的。 注意:这里的“左键”并不是绝对意义上的左键,而是“作为默认的左键”(对于习惯于右手的人而言)。 而习惯使用左手的人,在系统配置中,可以将右键设为主要功能键,这时,该方法检测相应的右键。
类别:网页编程 - JavaScript    查看:114    更新:2014-05-22

Prototype实战教程:Event -> findElement

findElement Event.findElement(event, tagName) -> Element 从触发事件的 DOM 元素开始(包含该元素),由里而外搜索第一个具有指定标签名称的 DOM 元素。 有时你并不关心触发事件的元素,而是想知道距离事件发生点最近的(可能是触发事件的元素,也可能是该元素的容器节点, 或容器节点的容器,依此类推)具有指定标签的元素(例如 <p>)。而这就是 findElement 所能够做到的。 标签名称(tagName)的比较不区分大小写。 如果没有找到匹配的元素,则返回文档本身(HTMLDocument 节点)。 样例 这里有一个简单的例子,当点击页面时,如果点击的元素或元素的容器是一个段落,则隐藏该段落。 Event.obs...
类别:网页编程 - JavaScript    查看:87    更新:2014-05-22

Prototype实战教程:Event -> extend

extend     [1.6] Event.extend(event) 用 Event.Methods 包含的所有方法来扩展 event。 注意,使用 Event.observe 或 Element#observe 注册的事件处理程序中的所有事件对象都会被自动扩展。 如果想采用另外的方法来注册事件处理程序(例如 onclick 属性),若要扩展事件对象,只需手动调用 Event.extend 即可。但是,我们并不鼓励做这种无谓的事情。
类别:网页编程 - JavaScript    查看:83    更新:2014-05-22

Prototype实战教程:Event -> element

element Event.element(event) -> Element 返回触发事件的 DOM 元素。 注意:从 v1.5.1 开始,Event.element 返回的元素已经被扩展。 样例 这里有一些简单的代码,当你在页面上进行点击时,如果点击的是段落,则将段落隐藏。 Event.observe(document.body, 'click', function(event) { var element = Event.element(event); if ('P' == element.tagName) element.hide(); }); 参见 findElement,它和 element 间存在着一些微妙的区别。 使用 Prototype 1.5.0 时的注意事项 注意:在 1.5.1 版之前,如果浏览器不支持 原生的 DOM 扩展(点击 这里 获取更详细的信息),Event.elemnet 返回的元素可能...
类别:网页编程 - JavaScript    查看:92    更新:2014-05-22

Prototype实战教程:Event

♪ 令人惊叹的混乱 ♫ 对于编写跨浏览器的脚本而言,事件管理是一个让人头痛的地方。 确实,一个异常明显的问题是:所有的人都遵循 W3C 的规范,而 MSIE 却另起炉灶。但是另外还有许多遍布各处的诡异的问题, 一不小心就会让你掉入陷井,例如基于 KHTML 的浏览器(Konqueror 和 Safari)的 keypress/keydown 事件。当然,也别忘了 MSIE 处理废弃的事件句柄时导致的内存泄漏问题。 Prototype 的补救! 当然,Prototype 很好的解决了这个问题,你甚至不会觉察到这些问题的存在。在 Event 命名空间中,包含了许多方法 (已在这个页面中列出)。所有的方法都具有一个用于表示当前事件对象的参数,它以非常友好的方式提供你...
类别:网页编程 - JavaScript    查看:90    更新:2014-05-22

Prototype实战教程:Event.observe

<script src="prototype.js"></script> <input type="button" id="btn" value="click" /> <input type="button" id="reg" value="register" /> <input type="button" id="unreg" value="unregister" /> <div id="status"></div> <script> function test() { alert("clicked"); } Event.observe("reg", "click", function () { Event.observe("btn", "click", test, false); $("status").innerHT...
类别:网页编程 - JavaScript    查看:63    更新:2014-05-22

JavaScript通过attachEvent和detachEvent方法处理带参数的函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script language="javascript">  var theP; //P标签对象   var show=function(msg){ //直接定义 function show(msg) 效果是一样的  return function(){  alert(msg+" f...
类别:网页编程 - JavaScript    查看:117    更新:2014-05-22