事件处理(事件委托)

事件处理(事件委托)
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:
// $(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定
// click事件;

[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件;如:

//$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和
//$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样;我通过js给ul添加了一个
//li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新加的li是不会被绑上click事件的

//但是用$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);}方式绑定,然后动态添加
//li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件

[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)

总结:

  $(‘要绑定标签的上级标签‘).on(‘click‘,‘要绑定的标签‘,function())

  #jquery 1版本要使用下面的方式

  $(‘要绑定标签的上级标签‘).delegate(‘要绑定的标签‘‘click‘,function())

原文地址:https://www.cnblogs.com/ajaxa/p/9364534.html

时间: 2024-07-31 16:14:18

事件处理(事件委托)的相关文章

Javascript的事件委托和事件处理

随着Ajax和RIA越来越成为主流,Javascript对事件(Event)的支持也得到了越来越多的关注.像雅虎这样的公司正在突破RIA的极限,让web应用程序在浏览器中更有效的运行,就像桌面应用程序一样.雅虎的邮箱应用就是一个很好的例子. 雅虎的一些工程师给我们展示了提高Javascript应用程序性能的技术.其中有提到强大的事件处理架构.提高性能的要旨就是用事件委托(Event Delegation)而非传统的事件处理(Event Handling). 我发现一个问题是,网上大部分的例子是用

事件委托(事件处理)的定义及运用

什么是事件委托?事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 具体化: 快递问题 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

一.事件概述 事件是什么? 在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间.地点.人物,发生了什么来进行概括. 同样的在javascript也有这样的一个的东西------事件. 页面上发生的事件:鼠标移动.点击.滚动等等. 事件描述了页面上发生的事情,通常它有以下三个要素组成: 事件源:触发事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序(事件监听器):事件触发后要执行的代码(函数形式) Javascript 使我们可以动态的去操作一个页

JS事件委托机制简介

目的--为了减少对DOM的操作,使用事件委托. 理解--举例说明:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 原理--事件委托是利用事件的冒泡原理来实现的

JavaScript事件代理和事件委托

一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台

JQuery中的事件委托机制:delegate和undelegate

考虑下面这种场景:如果1个div下面有3个button,点击每个按钮的时候,需要打印出当前按钮的ID. <div id="parent"> <input type="button" id="a" value="1"></input> <input type="button" id="b" value="2"></i

JS 事件绑定、事件监听、事件委托详细介绍

事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件 我们可以在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.onkeyd

jQuery的事件委托实例分析

事件委托主要是利用事件冒泡现象来实现的,对于事件委托的精准的掌握,可以有利于提高代码的执行效率.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>脚本之家</title> <style type="text/css"> table{ width:300px; height:60px; backg

Javascript 笔记与总结(2-17)事件委托

[例]五子棋,单次点击为黑色,偶次点击为白色.e.target 的用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> table{ width:400px; height:400px; border:0; border-collapse: c