事件绑定造成页面很卡

记录一个关于 Document.on绑定事件后，导致页面卡顿的情况

假设当前页面的js文件中有如下函数: function A(){ function B(); } function B(){ $(document).on("click","#元素id",function(){ dosomething……; }); } 函数A是一个按钮上绑定的onclick函数处理: 那么每次点击按钮触发A函数之后,都会导致B函数的执行,进而 $("#元素id") 这个元素就会绑定一次点击事件. 如果多次触发A函数之后,导致 $

asp.net Mvc 模型绑定项目过多会导致页面运行时间卡

asp.net Mvc 模型绑定项目过多会导致页面运行时间卡的问题. 解决方式就是采用ModelView方式进行精简,已减少模型绑定及验证的时间.

jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事件一.常用事件 click(function(){...}) //鼠标点击事件 hover(function(){...}) //当鼠标指针悬停在被选元素上时 blur(function(){...}) //当输入域失去焦点 (blur) 时 focus(function(){...}) //当输

Jquery 页面元素事件绑定

场景: 用一个Table来展示数据信息列表,通过鼠标点击Table中的Tr来获取到当前选中的数据行信息. <table class="Table" width="100%" cellpadding="0" cellspacing="0" > <thead> <tr> <td>名称</td> <td style="width: 100px;"&

jQuery中事件绑定到bind、live、delegate、on方法的探究

1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后来接触到了on.bind.live.delegate,以下是对它们的一些探究. 2. bind(type,[data],fn),为每个匹配元素的特定事件绑定事件处理函数,是直接绑定在元素上说明: type: 含有一个或多个事件类型的字符串,由空格分隔多个事件.比如"click"或&quo

jQuery 2.0.3 源码分析事件绑定 - bind/live/delegate/on

事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应事件的基础就不重复讲解了,本来是定位源码分析实现的, 所以需要有一定的基础才行为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新总结一下 jQuery对事件的绑定分别有几个API http://www.css88.com/jqapi-1.9/

js事件绑定及深入

学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一传统事件绑定的问题传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getEleme

事件委托和JQ事件绑定总结

事件委托: 比喻:事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 实现原理:我们知道,DOM在为页面中的每个元素分派事

jQuery事件绑定.on()简要概述及应用

原文地址:http://www.jquerycn.cn/a_5346 前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看源码发现bind()和delegate()都是由on()实现的,感兴趣的朋友可以了解下,或许本文对你有所帮助前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除

js事件绑定细节说明

javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触javascript的时候,老师都会这样教导我们怎么触发事件,在页面某个DOM节点上面添加所要触发的事件,比如:onclick,onmousedown,onmouseup,onfocus,onchange等等...看代码 <!DOCTYPE html> <html> <head>

JavaScript事件---事件绑定和深入

发文不易,转载传播,请亲注明链接出处,谢谢! 内容提纲: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他内容事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一．传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数. var box = document

JavaScript的事件绑定及深入

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一．传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数. var box = document.getElementById('box'); //获取元素 box.onclick = function () { //元素点击触发事件 alert(

live(),bind(),delegate()等事件绑定方法的区别及应用解析

1 首先bind()方法是最直观的,但是也是弊端最大的. $('a').bind('click',function(){alert('that tickles!')}) 这和事件冒泡有直接关系,当我们点击了<a></a>标签时,会立马执行alert,但与此同时,click()事件会接着向DOM树的根方向传播,广播到父元素,由父元素向上到每个祖先元素,只要是它的某个后代元素上的click()事件被触发,那么整个dom树都会牵一发而动全身.所以对未来元素的绑定不能用bind. 2 li

jQuery事件绑定和委托

可以用多种方法实现,on() . bind() . live() . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: $("#div1").click(function() { alert("点击后触发"); }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on() //无数据参数 $("p").on("click", function(){ alert( $(this).t

jQuery事件绑定的最佳实践

如果你经常使用jQuery,那么你也许很熟悉事件绑定.这是很基本的东西,但是深入一点,你就能够找到机会让你事件驱动的代码变得不太零碎,并且更容易管理. 更好的选择器策略让我们从基础的例子开始.下面的HTML代码表示的是可以开合的导航菜单. <button class="nav-menu-toggle">Toggle Nav Menu</button> <nav> <ul> <li><a href="/&quo

jQuery三种事件绑定方式.bind(),.live(),.delegate()

.bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树首先,图形化的HTML文档能帮助我们更好的理解.一个简单的HTML页面看起来应该像这样事件冒泡(也称作事件传递)(Event bubbling aka event propagation) 点击一个链接,触发绑定在链接元素上的 click 事件,进而触发绑定到这个元素的click事件的函数. 1 $('a

javascript事件委托和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会

jQuery事件绑定方法bind、 live、delegate和on的区别

我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识当我们在开始的时候,有些知识是必须具备的: 1).DOM树下图仅仅是一个示例,这是一个在browser环境下的一棵模拟DOM树,在下面的代码中仅起到演示的作用: 2).Event bubbling (aka event propagation)冒泡我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素)

转:jQuery事件绑定.on()简要概述及应用

前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意. 看源码发现bind()和delegate()都是由on()实现的.on()的描述如下: .on( events [, selector ] [, data ], handler

jQuery的三种bind/One/Live/On事件绑定使用方法

本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(e

javascript 事件委托和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会

事件绑定造成页面很卡

热门专题