事件的冒泡有什么好处
想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。
时间： 2024-10-18 11:01:22
冒泡的好处
冒泡的好处的相关文章
事件冒泡与捕获
事件流指的是页面中接收事件的顺序,IE,火狐和chrome浏览器都是事件冒泡,所谓是事件冒泡指的是事件最开始由最具体的元素接收,然后逐级向上传播到不具体的节点.而事件捕获则正好相反,事件捕获是由Netscape提出的,事件冒泡和捕获具体如下图所示: 虽然事件捕获是Netscape唯一支持的事件流模型,但目前IE9,火狐和谷歌也都支持这种事件流模型. 事件冒泡的好处 因为事件具有冒泡机制,因此我们可以利用冒泡的原理,把事件加到父级上,触发执行效果.这样做的好处当然就是提高性能了. 如果说我们可能有
事件委托（利用事件冒泡）
1,事件委托原理:给父节点添加侦听器,利用事件冒泡影响每一个字节点 点击任意一个li,都能弹出警示框,:给ul 绑定事件,点击任意一个li 时,li不注册事件,而是向上冒泡委托给ul 响应事件,那么ul 下面的每一个li 都会执行事件处理程序 ul.addEventListener('click',function(event){ alert("1"); event.target.style.backgroundColor="red"; }) 2, 这是事件冒泡的好
《ASP.NET》数据绑定—DataList
DataList控件是.NET中的一个控件.DataList控件以表的形式呈现数据(在属性生成器中可以编辑),通过该控件,您可以使用不同的布局来显示数据记录(使用模板编辑),例如,将数据记录排成列或行的形式.您可以对 DataList控件进行配置,使用户能够编辑或删除表中的记录(使用EditItemTemplate模板和SelectedItemTemplate模板).DataList控件不使用数据源控件的数据修改功能,您必须自己提供此代码. 一.DataList 与 Repeater比较 1.D
高级程序设计-事件
作者:zccst 一.事件流标准:DOM事件流中,实际的目标在捕获阶段不会接收到事件.即捕获从document到body就停止了.在处于目标阶段,事件在div上发生,并在事件处理中被看成冒泡阶段的一部分.实际:在捕获阶段会涉及,结果有两个机会在目标对象上操作事件. 二.事件处理程序(事件监听器)事件处理程序:HTML,DOM0级,DOM2级 HTML:<input type="button" value="ClickMe" onclick="aler
BOM基础（四）
最近写的文章感觉内容不像之前那么充实,内容可能也有点杂.对于DOM,和BOM来说,要理解是不难的,难的是做的时候.要自己想的到,而且,对于目前阶段来说,BOM还存在着很大的兼容性问题,最主要就是要兼容ie8.不过说实在的,用不了多久,ie8也差不多被淘汰了,新版本的ie浏览器对标准属性兼容性还是很好的.不过接下来要说的主题还是BOM中的一些内容.前一篇文章中主要讲了两种注册事件的方式和事件参数.本文主要讲如何移除事件,事件的冒泡. 首先讲讲移除事件,移除事件用的是removeEventListe
javascript中BOM部分基础知识总结
一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window: BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性: BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分. 二.学习BOM学什么 我们将学到与浏览器窗口交互的一些对象,例如
js中事件三阶段
先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>冒泡</title> <style> #a{ width: 300px; height:300px; background-color: cadetblue; } #b{ width: 200px; height:200px; bac
JQ笔记-加强版
Query初级 一.介绍.基本写法 什么是JQ: 一个优秀的JS库,大型开发必备 JQ的好处: 简化JS的复杂操作 不再需要关心兼容性 提供大量实用方法 如何学习JQ: www.jquery.com JQ只是辅助工具,要正确面对 需要分阶段学习 JQ设计思想: 选择网页元素 模拟CSS选择元素 独有表达式选择 多种筛选方法 JQ写法 : 方法函数化 $(function(){ //var oDiv = $('#div1'); $('#div1').click(function(){ alert(
JavaScript 之 事件（详解）
一.注册事件的三种方式 1.直接事件方式 语法格式: 变量名.on事件名 = function() {} 注意:这种方式无法给同一对象的同一事件注册多个事件处理函数 2.addEventListener 方式(IE9 以后才支持) 语法格式: 变量名.addEventListener(事件名,function(){}) Demo : 1 // 浏览器兼容性问题 IE9以后才支持 2 btn.addEventListener('click', function () { 3 alert('hell