我们可以自定义事件来实现更灵活的开发，事件用好了可以是一件很强大的工具，基于事件的开发有很多优势（后面介绍）。与自定义事件的函数有 Event、CustomEvent 和 dispatchEvent。直接自定义事件，使用 Event 构造函数：var event = new Event(build); // Listen for the event. elem.addEventListener(build, function (e) { ... }, false); // Dispatch the event. elem.dispatchEvent(event);CustomEvent 可以创建一个更高度自...
一、事件模型冒泡型事件（Bubbling）：事件由叶子节点沿祖先节点一直向上传递到根节点捕获型事件（Capturing）：由DOM树最顶元素一直到最精确的元素，与冒泡型事件相反DOM标准事件模型：DOM标准既支持冒泡型事件，也支持捕获型事件，可以说是两者的结合体，首先是捕获型，接着冒泡传递二、事件对象在IE浏览器中事件对象是window的一个属性，在DOM标准中，event必须作为唯一的参数传给事件处理函数获得兼容的event 对象：function(e...
JavaScript事件代理事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制,下面我们具体举个例子来解释如何使用这个特性。这个例子主要取自David Walsh的相关文章（How JavaScript Event Delegation Works）。假设有一个 UL 的父节点，包含了很多个 Li 的子节点：<ul id="list"><li id="li-...
JavaScript 一个最简单的事件模型，需要有事件绑定与触发，还有事件删除。var eventModel = {list: {},bind: function () {var args = [].slice.call(arguments),type = args[0],handlers = args.slice(1);if (typeof type === string && handlers.length > 0) {for (var i = 0; i < handlers.length; i++) {if (typeof handlers[i] === function) {if (!this.list[type]) {this.list[type] = [];}this.list[type].push(handlers[i...
1.什么是事件冒泡？在排序算法中，我们学过冒泡排序法，所谓冒泡就是让底层的东西浮出水面，对于事件冒泡也同样是如此，下面我们来看一个例子来说明什么是事件冒泡。<p><button>测试</button> </p> <script>$("p").bind("click",function(){alert("p")});$("button").bind("click",function(){alert("button"}); </script>当支持事件冒泡时，当我们点击"测试”按钮时，首先会执行的是alert("button")，固名思意：事件按照从最特定的...
笔记慢慢的才发现已经写了好多，今天刷网页才想起来是不是应该发到自己Blog里面跟大家分享一下虽然不是什么大牛，但还是有一些小小的心得~希望和大家分享，见笑了！我们有个li 现在需要一个点击发生改变和另一个仍然可以进行hover 商品点击后会变色，然后商家依然可以进行hover。不可取的方法为：(1) JQ添加点击事件改变其css( ) 这种方法不可用，因为通过javascript修改background-color会覆盖在css中定义的所有background-color...
javascript中使用addEventListener()或attachEvent()绑定事件时会有几个小问题：一、使用addEventListener()或attachEvent()添加的匿名函数无法移除。var oBtn = document.getElementById(btn); oBtn.addEventListener(click,function(){alert(button is clicked) },false) oBtn.reomveEventListener(click,function(){alert(button is clicked) },false) //oBtn上的事件无法移除，因为传入的是一个匿名函数二、ie6-ie8中，使用att...
Extjs实现继承的函数是一个很核心的函数Ext.extend，extend方法有两个重构版本，第一个接受两个参数，第一个是extend( Function superclass, Object overrides ) ，第二个是extend( Function subclass, Function superclass,Object overrides ) : Function，第二个版本是在subclass的基础上。superclass就是超类的构造函数，overrides是一个对象，里边的属性就是要覆盖父类的属性。继承了父类的子类具有父类的prototype中的所有方法...
最近两天在温习onmouseover事件和onmouseout事件，其实里面有很多深奥的知识，接下来小编给大家带来了onmouseover事件和onmouseout事件全面了解，感兴趣的朋友一起看下 这两天接触了onmouseover事件和onmouseout事件，一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件，但是突然发现这些只是对它们简单的描述，下面让我们一起看看它们终究还有神马奇怪的特性，是好还是坏呢？...
修改别人的模板遇到一个问题，分类图的切换默认是五个，我想增加四个，一直没有增加成功。它使用的onmouseover 事件。onmouseover怎么用？去查了一下：定义和用法onmouseover 事件会在鼠标指针移动到指定的对象上时发生。语法onmouseover="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。支持该事件的 HTML 标签：<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <bu...
想实现如下功能：div标签内有个<img>,鼠标经过div时想改变图片，我的做法是，div的onmouseover事件:替换掉div的innerHTML内容(换成新的<img>),onmouseout事件再换回之前的图片，但onmouseover事件执行了，onmouseout事件却没有执行，这是为何？网上查了下说是有关事件冒泡的东西，针对我的需求有何简单解决方案？多谢--<!DOCTYPE html> <head> <meta charset="utf-8"> <title>test</title> <style> </style> <script type="text/ja...
我们需要给某个TABLE加上鼠标事件的时候，一般希望当鼠标滑在整个TABLE之上的时候做某些处理,当鼠标滑出TABLE的时候做另外的处理． 一般情况下你会用onmouseover和onmouseout，代码如下： <TABLE border="1" width=200 onmouseover="alert(鼠标滑进)" onmouseout="alert(鼠标滑出)"> <TR> <TD id="TD1" noWrap height=25 onmouseenter="this.style.color=red"> 菜单1</TD> </TR> <tr> <TD id="TD2" noWrap height=25 onmouse...
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片说明demo</title><!--样式--><style type="text/css">/*主div*/#main{ width: 960px; height: 600px; border: 1px solid #000; margin: auto;} .content{ margin:auto; margin-top: 50px; width: 99%;} .photo{ ...
通过each遍历li 可以获得所有li的内容输出每个li值</button> <script>// 1种 通过each遍历li 可以获得所有li的内容$("button").click(function(){ $(".one > li").each(function(){// 打印出所有li的内容console.log($(this).text());})}); </script>通过each遍历li 通过$(this)给每个li加事件<!-- 2种 --><ul class="two"><li>2222</li><li>22b</li><li>3333</li><li>44d</li><li>5555</li></ul> <script>// 2种 通过each遍历li 通...
1.阻止事件冒泡,使成为捕获型事件触发机制.1 function stopBubble(e) { 2 //如果提供了事件对象，则这是一个非IE浏览器 3 if ( e && e.stopPropagation ) 4 //因此它支持W3C的stopPropagation()方法 5 e.stopPropagation(); 6 else7 //否则，我们需要使用IE的方式来取消事件冒泡 8 window.event.cancelBubble = true; 9 }2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认...