关于冒泡中的target和currentTarget target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件的父级。<p id="outer" style="background:#099"> <p>我是目标p</p> ----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : p<p id="inner" styl...
先介绍js添加事件通用方法,具体内容如下<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br>点击此p标签,绑定了2个弹出事件</p><script>function test1() {alert("test1");}function test2(){alert("test2");}//添加事件通用方法function addEvent(element,e,fn) {//firefox使用addEventListener,来添加事件if(elemen...
普通的定义方式<input type="button" name="Button" value="确定" onclick="Sfont=prompt(请在文本框中输入红色,红色, 提示框 ); if(Sfont==红色){form1.style.fontFamily=黑体;form1.style.color=red; }" />这是最常见的一种定义方式,直接将JS事件定义在需要的对象之上。相关的变形就是调用方法的形式,如下<script>function show(){alert("show");} </script> <input type="button" name="show" onclick="show()"/>第二种<scri...
下面小编就为大家带来一篇JavaScript之事件委托实例(附原生js和jQuery代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。使用事件委托的优点1、操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作dom结构如下:<ul id = "oUl"><li class = "item"></li><li class = "it...
我们可以自定义事件来实现更灵活的开发,事件用好了可以是一件很强大的工具,基于事件的开发有很多优势(后面介绍)。与自定义事件的函数有 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...