js事件代理

事件代理:

html代码:

<ul id="ul1">
<li><a>目标1</a></li>
<li><a>目标2</a></li>
</ul>

js代码:

var ul1=document.getElementById("ul1");
ul2.addEventListener(‘click‘,function(e){
var e=e||window.event;
var target=e.srcElement||e.target;               //srcElmemt这个只支持firefox

alert(target.tagName);

if(target.tagName.toUpperCase()=="A"){     //当点击id为ul1下的a标签将触发该点击事件,统一为id为ul1下的a标签绑定了点击事件,而不需为每一个a标签写一次事件,依赖的是事件的冒泡。
ul2.style.color="green";
};

return false;                                            //防止跳转
},false);

时间: 2024-09-26 23:39:10

js事件代理的相关文章

js事件代理(委托)

JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前一直用各种js库的事件代理,如 jQuery,非常方便实用.今天尝试用原生 js 实现该功能. 1 var addEvent = (function () { 2 if (document.addEventListener) { 3 return function (element, type, h

js事件代理理解

说到事件代理,首先得知道js的事件冒泡机制. 事件冒泡是指在一个dom节点触发一个事件比如onclick事件以后,这个事件会继续往节点的父节点传递,若父节点也绑定了onclick事件,则同样会触发父节点的onclick事件,然后继续往父节点的父节点传递....由内层往外层传递. 事件代理就是利用了事件冒泡机制,将一个节点的事件处理,交给它的父级去处理.举个栗子:若为多个li标签绑定事件. 1.一般的事件绑定方法: 1 <ul id="list"> 2 <li>1

封装Js事件代理方法

// 封装事件代理 function delegateEvent(element, tag, event, listener) { // 判断是否支持addEventlistener if(element.addEventListener){ // 给父元素添加事件 element.addEventListener(event,function(e){ // 获取当前触发的元素 var target = e.target; // 判断当前元素是否是我需要的 if(target.nodeName.

Js - 事件代理

事件代理是利用了事件冒泡,制定一个事件处理程序,就可以管理某一类的所有事件.例如,click事件会一直冒泡到document层次(就是不断地向父元素传递至最上层的document).就是说可以为整个页面指定一个onclick事件处理程序,而不必单个元素分别添加处理程序. <ul id="ul1"> <li >item1</li> <li >item2</li> <li >item3</li> </

js事件代理(事件委托)最简单的理解

1事件代理:当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数. 例如:点击按钮删除对应的条目. 如果给每一个按钮添加事件,极为繁琐,这时候需要用到事件代理. 事件代理是基于浏览器的事件冒泡机制. 下面是对应的代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <

简述:js事件代理的7种方法

以为buttton元素绑定单击事件,来探讨事件绑定的几种方式: 1.最原始的方法:在button元素里面添加onclick事件,代码如下: <button onclick=function(){}></button> 这种方法虽然使用简单,但是有一个缺点就是:页面显示和事件处理混在一起,不符合网页开发设计的理念. 2.事件监听(addEventListener) 获取button元素,绑定事件监听 .addEventListener('click',fn,[true/false])

事件代理 event delegation

JS - 事件代理 如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么费解的设计模式之一.事实上,如果你已经知道怎么添加JavaScript的事件处理器(event handler),实现事件代理也是件轻而易举的事情. JavaScript事件是所有网页互动性的根基(我指的是真正的互动性,而不仅是那些CSS下拉菜单).在传统的事件处理中,你按照需要

Atitit. &#160;Js 冒泡事件阻止&#160;事件捕获&#160;&#160;&#160;事件传递 &#160;事件代理

Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 4. 事件代理3 5. 冒泡还是捕获?3 6. Js 冒泡事件阻止3 6.1. 返回false5 7. 事件冒泡 使处理函数有范围较大的触发面积,在“拖拽效果”脚本中是必须的5 8. refe6 8.1.1. 浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault6   1. 事

JS中事件代理与委托

在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么特殊的用法呢?这篇文章就主要介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中delegate的接口. JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的