delegate用法,delegate怎么记忆

http://www.365mini.com

元素绑定点击事件：
// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").delegate("p", "click", function(){
// 这里的this指向触发点击事件的p元素(Element)
alert( $(this).text() );
});
运行代码(其他代码请自行复制到演示页面运行)
如果要绑定所有的

元素，你可以编写如下jQuery代码：
//为所有p元素绑定click事件处理程序(body内的所有p元素，就包含所有的p元素)
//n2、n3、n5均可触发该事件
$("body").delegate("p", "click", function(event){
// 这里的this指向触发点击事件的p元素(Element)
alert( $(this).text() );
});
此外，我们还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据，我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理：
var data = { id: 5, name: "李四" };
//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
//附加数据可以是任意类型
$("body").delegate("#n5", "mouseenter mouseleave", data, function(event){
var $me = $(this);
var options = event.data; // 这就是传入的附加数据
if( event.type == "mouseenter"){
$me.html( "你好，" + options.name + "!");
}else if(event.type == "mouseleave" ){
$me.html( "再见，" + options.name + "!");
}
} );
此外，即使符合条件的元素是delegate()函数执行后新添加，绑定事件对其依然有效。同样以初始HTML代码为例，我们可以编写如下jQuery代码：
//为div中的所有p元素绑定click事件处理程序
//只有n2、n3可以触发该事件
$("div").delegate("p", "click", function(event){
alert( $(this).text() );
});
//后添加的n6也可以触发上述click事件，因为它也是div中的p元素
$("#n1").append('

上述绑定的click事件对此元素也生效!

');

参数events还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间，可以在触发事件、移除事件时限定触发或移除的范围。

function clickHandler(event){

alert( "触发时的命名空间:[" + event.namespace + "]");

}

var $p = $("p");

// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下

$("body").delegate( "p", "click.foo.bar", clickHandler );

// B：为所有p元素绑定click事件，定义在test命名空间下

$("body").delegate( "p", "click.test", clickHandler );

var $n2 = $("#n2");

// 触发所有click事件

$n2.trigger("click"); // 触发A和B (event.namespace = "")

// 触发定义在foo命名空间下的click事件

$n2.trigger("click.foo"); // 触发A (event.namespace = "foo")

// 触发定义在bar命名空间下的click事件

$n2.trigger("click.bar"); // 触发A (event.namespace = "bar")

// 触发同时定义在foo和bar两个命名空间下的click事件

$n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")

// 触发定义在test命名空间下的click事件

$n2.trigger("click.test"); // 触发B (event.namespace = "test")

// 移除所有p元素定义在foo命名空间下的click事件处理函数

$p.undelegate( "click.foo" ); // 移除A

delegate()函数的参数eventsMap是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：

var events = {

"mouseenter": function(event){

$(this).html( "你好!");

},

"mouseleave": function(event){

$(this).html( "再见!");

}

};

//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data

$("body").delegate("#n5", events);
jQuery中delegate和on的用法与区别详细解析

本篇文章主要是对jQuery中delegate和on的用法与区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
在jQuery1.7中
.delegate()已被.on()取代。对于早期版本，它仍然使用事件委托的最有效手段。
在事件绑定和委派，delegate()和on在一般情况下，这两种方法是等效的。
.delegate()
指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
代码如下:
//
jQuery
1.4.3+
$(
elements
).delegate(
selector,
events,
data,
handler
);
//
jQuery
1.7+
$(
elements
).on(
events,
[selector],
data,
handler
);
例如：.delegate()
code:
代码如下:
$("table").delegate("td","click",function(){
alert("hello");
});
.on()
code:
代码如下:
$("table").on("click",
"td",
function()
{

alert("hi");
});
PS:
两者区别是seleter和events顺序不同
delegate和on方法被选元素的子元素必须是"合法的"子元素。比如
复制代码
代码如下:
$("table").delegate("button","click",function(){...});
$("table").on("click",
"p",
function(){...});
就不起作用，因为正常情况下，table子元素应为tr,td...
on(events,[selector],[data],fn)，参数[selector]是可选，
一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
例如：
代码如下:
$("table").on("click",
".td1",
function()
{

alert("hi");
});
过滤class为td1的table子元素
而delegate的selector是必需的。

delegate怎么记忆

delegate的记忆方法如下：
1、分解壹词：Delegate可以分为De和legate两部分，其中De可以联想到英文单词“delivery”的缩写，表示“交付”或“分派”的意思；legate可以联想到“lifting weights”，表示“举重”的意思。因此，Delegate可以理解为从“交付”或“分派”某个任务开始，完成这项任务就像是在“举重”一样。
2、联想代表：Delegate在英文中也有“代表”的意思。可以将其与中文中的代表联系在一起，用“代表”的意思来记忆“Delegate”。例如，Delegate可以理解为在某个会议上代表某个机构或团体发言和行动等。同时，可以将“Delegate”和“representative”联想在一起，进行深化记忆。
3、Visualize the word: 将Delegate这个单词形象化，比如我们可以将其联想为某个企业的高管正在向下属分派任务，或是一个人站在舞台上代表某个国家发言，这样可以帮助我们更容易地理解和记忆Delegate这个单词。
4、卡片记忆法：可以写下Delegate这个单词，并在卡片的背面写下该单词的意思和用法。随后，每天拿出卡片，翻转背面进行记忆，直到完全掌握为止。
Delegate的释义
Delegate可以作为动词和名词使用。
作为动词，delegate的释义为“授权；委派”，例如：
1、The boss delegated the task to his assistant. （老板将任务委派给了他的助手。）
2、The company delegates the responsibility of hiring to the HR department. （公司把雇佣的责任委派给了人力资源部门。）
作为名词，delegate的释义为“代表；代表团”，例如：
1、The delegation has been sent to negotiate the peace treaty. （代表团被派去协商和平条约。）
2、The delegates from each country discussed the issues at the conference. （来自各国的代表们在会议上讨论了问题。）

如何使用Model View delegate自定义列表

如何使用Model View delegate自定义列表
简介
这是一个演示Model/View Programming 中自定义model，自定义delegate用法的程序。 通过自定义的model，delegate，实现自定义的列表元素。目标是构造一个列表，其中每个列表元素包含若干图片，文字， 按钮等。要实现这样的功能，第一反应是 自己定义一个widget，把图片文字控件放在里面加上layout， 然后再用使用void QAbstractItemView::setIndexWidget，加LlistView或TableView里面。 当界面元素固定，少量的时候，这是首选，但是要看到setIndexWidget帮助文档里面的警告，这样做是有效率代价的，如果列表有100项，那么就要加入100个widget， 很大的消耗。 使用delegate的话你可以只是paint 每个元素， 在需要操作的时候才构建真正的控件，而画控件可以用QStyle::drawControl() 画出来，当然这样做你需要构造，自己的model，delegate， 自己做数据绑定。 这样做效率很高，因为只有当前的控件是真的，其他都是画上去的！ 好了动机大概是这样，下面详细介绍如何做。
开始
关于Model/View Programming的使用，最好的文档当然是Qt自己的帮助，建议先通读一遍， 同时参考Qt中的例子：
StringListModel ：位于doc\src\snippets\stringlistmodel， 这个例子的代码都在帮助的 Creating New Models这一章，建议阅读的时候顺手做一下，而我下面的例子是在这个例子基础上改成的。
SpinBoxDelegate：这个例子用以演示 如何自定义delegate， 来实现自定义的表元素，每个列表元是个spinbox， 可以编辑。这个例子解释了自定义delegate 的方方面面，但是用的model 是框架自带的
PixelDelegate： 这是个很漂亮的例子，演示了model view delegate的强大威力，其model 和delegate的自定义程度很高，演示了model和delegate之间的数据交互。遗憾的是这是个只读的例子，就是说并不能通过model改变data。
StarDelegate： 这个例子演示了如何定制delegate， 使用了自定义的数据结构，和编辑器，效果很强大，我们的自定义控件也期望这个目标。遗憾是没有定制model。
我们期望自己的StarDelegatedelegate能画上图片等元素 如StarDelegate，PixelDelegate， 又能支持一些系统控件（button，checkbox...）如SpinBoxDelegate，但是上面三个强大的例子都没能完全达到这个目标，所以才写这篇文章。
下面开始新建一个QT工程，选Mobile QT Application， 在ui中拖入一个ListView。
自定义model
为了说明问题，这里用最简单的数据结构，一个QStringList， model 是 数据的直接接口，有了String， 我们可以显示文字，也可以作为路径读取图片，在这个小例子中足够了。按照帮助中 Creating New Models的顺序，首先我们做一个只读的model， 在mainWindow.cpp中 对listview 加载model：
parserModel *model = new parserModel(strings, this);
ui->listView->setModel(model);
只读的model
只读的model 只需要实现rowCount ，data 两个方法， 这里为ListView服务，所以我们继承QAbstractListModel， 如果用TableView的话，可以像PixelDelegate那样使用QAbstractTableModel。
class parserModel : public QAbstractListModel
{
Q_OBJECT
public:
parserModel(const QStringList &strings, QObject *parent = 0);
//basic function for a read-only model
int rowCount ( const QModelIndex & parent = QModelIndex() ) const;
QVariant data ( const QModelIndex & index, int role = Qt::DisplayRole ) const ;
private:
//simple data source just a QStringList, if need can add other list of QString, int, bool, struct or class
QStringList stringList;
};
想要 rowCount 能返回string list 中string的个数，所以我们这样写：
int parserModel::rowCount(const QModelIndex &parent) const
{
return stringList.count();
}
接下来关键的 data 函数，这个函数是 View 或 Delegate 获取数据的主要接口，我们想要显示文字，图片，都是从model中直接获得，我们这样写：
QVariant parserModel::data(const QModelIndex &index, int role) const
{
if ( (!index.isValid()) || (index.row() >= stringList.size()))
return QVariant();
if(role == Qt::UserRole)
{
return stringList.at(index.row());
}
else if( role == Qt::UserRole+1)
{
QPixmap pixmap;
pixmap.load(stringList.at(index.row()));
return pixmap.scaled(80, 80,Qt::KeepAspectRatioByExpanding, Qt::FastTransformation);
}
else if( role == Qt::UserRole+2)
{
QPixmap pixmap;
pixmap.load(stringList.at(index.row()));
return pixmap.scaled(20, 20,Qt::KeepAspectRatio, Qt::FastTransformation);
}
return QVariant();
}
这里默认是返回QVariant()， 关键是看中间返回的东西，必须结合后面的Delegate实现来一起看。 当delegate 或 view 询问数据的时候会传给data方法两个参数，就是问model要 位于 index这个地方的具有role数据，enum Qt::ItemDataRole 中常见的role是
Qt::DisplayRole 返回 QString 文字
Qt::DecorationRole 返回 QPixmap 图片
但是如果你想要返回另一幅图的话，就要用其他的role了，所以这里我全用 Qt::UserRole，来解释这个问题。 一个解释Qt::ItemDataRole 的例子是 Color Editor Factory，在这个例子中列表显示颜色和颜色名，都是从颜色名字符串中读数据，但是显示的时候一个是颜色方块，和名字，这就是同一个数据的两种表现形式，两个role。更进一步的，你可以在model中再引用一个struct 或者class Data， 当被询问不同的role的时候返回 Data.str1,或 Data.int2, 这样同一个index可以返回不同的数据，不同的数据类型。也可以是SQL查询的结果，在选择语句中传入不同的查询参数，这取决于你的数据结构，总之data被model 包装隔离了。不清楚没关系，下面我们看delegate如何数据。
自定义delegate
QT 4.6以后推荐自定义delegate 继承自QStyledItemDelegate，使用styleSheet来显示。不失一般性，这里先用QItemDelegate来说明问题。在mainWindow.cpp中 对listview 加载delegate：
MyDelegate *delegate = new MyDelegate(this);
ui->listView->setItemDelegate(delegate);
只读的delegate
先做只读的功能，需要重写 paint，和sizeHint 这个函数
class MyDelegate : public QItemDelegate
{
Q_OBJECT
public:
explicit MyDelegate(QObject *parent = 0);
//basic function for a read-only delegate, you can draw anything with the painter
void paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const;
QSize sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const;
};
sizeHint用于指定绘制每个列表项的大小，关键是paint方法， 有了paint，我们就可以任意定制我们的列表
void MyDelegate::paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const
{
QStyleOptionViewItemV4 opt = setOptions(index, option);
// prepare
painter->save();
// get the data and the rectangles
const QPixmap& pixmap = qvariant_cast

(index.data(Qt::UserRole+1));

QRect decorationRect = QRect(opt.rect.topLeft(), QSize(80,80));

const QString& text = index.data(Qt::UserRole).toString();

QFontMetrics fm(painter->font());

QRect displayRect = QRect(decorationRect.topRight()+QPoint(20,30),QSize(fm.width(text),fm.height()));

const QPixmap& pixmapSmall = qvariant_cast

(index.data(Qt::UserRole+2));

QRect smallIconRect = QRect(opt.rect.topRight()-QPoint(100,-20), QSize(20,20));

drawBackground(painter, opt, index);

painter->drawPixmap(decorationRect, pixmap);

painter->drawText(displayRect, text);

painter->drawPixmap(smallIconRect, pixmapSmall);

drawFocus(painter, opt, displayRect);

// done

painter->restore();

}

参见最后的效果图，这里每一个列表项有两幅图，一行文字，图片和文字都是用 qvariant_cast

(index.data(Qt::UserRole+1)); index.data(Qt::UserRole).toString(); 取得的，注意qvariant_cast的用法。

index.data(Qt::UserRole+1) 会调用model中的 QVariant data ( const QModelIndex & index, int role ) const 方法。 delegate 的role和 model 的role对应。 通过修改model中data的实现，可以使得delegate显示不同的东西，而delegate的代码不需变动，实现了数据的隔离。到目前为止一个只读的自定义列表就完成了，在paint方法中加入下面的代码，可以画出一个pushButton， 但是点击没有反应，这需要在下面的编辑功能中实现。

QStyleOptionButton opt;

opt.state |= QStyle::State_Enabled;

opt.rect = option.rect.adjusted(1, 1, -10, -10);

opt.text = trUtf8("Button text");

QApplication::style()->drawControl(QStyle::CE_PushButton, &opt, painter, 0);

item中显示不同的字体

这里是painter的使用技巧，要在同一个列表项中的显示的不同的字体，需要在新的的 painter->save，painter->restore段中写， 如下的代码段实现了最后的效果图

void MyDelegate::paint ( QPainter * painter, const QStyleOptionViewItem & opt, const QModelIndex & index ) const

{

painter->save();

// get the data and the rectangles

const QString& text = index.data(Qt::UserRole).toString();

QRect displayRect;//set the paint rect

painter->setPen(QColor(255,127,127));

painter->drawText(displayRect, text);

painter->restore();

painter->save();

// get the data and the rectangles

const QString& text2 = index.data(Qt::UserRole+1).toString();

QRect displayRect2;//set the paint rect

painter->setPen(QColor(255,122,0));

painter->drawText(displayRect2, text2);

painter->restore();

}

增加编辑功能

可编辑的model

要使model可以修改data，我们需要重写flags，setData ， 修改后的model变成：

class parserModel : public QAbstractListModel

{

Q_OBJECT

public:

parserModel(const QStringList &strings, QObject *parent = 0);

//basic function for a read-only model

int rowCount ( const QModelIndex & parent = QModelIndex() ) const;

QVariant data ( const QModelIndex & index, int role = Qt::DisplayRole ) const ;

//for a editable model

Qt::ItemFlags flags(const QModelIndex &index) const;

bool setData(const QModelIndex &index, const QVariant &value, int role);

private:

//simple data source just a QStringList, if need can add other list of QString, int, bool, struct or class

QStringList stringList;

};

其中 flags方法非常重要，需要根据具体的user case 来设定，这个例子处理的简单草率。 来看setData

bool parserModel::setData(const QModelIndex &index,

const QVariant &value, int role)

{

if (index.isValid() && role == Qt::EditRole) {

stringList.replace(index.row(), value.toString());

emit dataChanged(index, index);

return true;

}

return false;

}

由于我们使用的是简单的QListView， 要使用标准的Qt::EditRole来传递编辑数据。数据修改结束发射signal 提示listview 改变显示。 emit dataChanged(index, index);

可编辑的delegate

要使delegate可以修改data，我们需要重写createEditor ，setEditorData ，setModelData ，updateEditorGeometry ， 修改后的delegate变成：

class MyDelegate : public QItemDelegate

{

Q_OBJECT

public:

explicit MyDelegate(QObject *parent = 0);

//basic function for a read-only delegate, you can draw anything with the painter

void paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const;

QSize sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const;

//for a editable delegate

QWidget * createEditor ( QWidget * parent, const QStyleOptionViewItem & option, const QModelIndex & index ) const ;

void setEditorData ( QWidget * editor, const QModelIndex & index ) const ;

void setModelData ( QWidget * editor, QAbstractItemModel * model, const QModelIndex & index ) const ;

void updateEditorGeometry ( QWidget * editor, const QStyleOptionViewItem & option, const QModelIndex & index ) const ;

};

由于我们这里的数据只是QString, 于是用了个QLineEdit，如果还有其他数据需要编辑，可以做一个widget，在里面加入 QLineEdit ，QSpinBox，checkbox等editor，或自定义的editor如StarDelegate。然后在setModelData 中响应。

QWidget * MyDelegate::createEditor ( QWidget * parent, const QStyleOptionViewItem & option, const QModelIndex & index ) const

{

QLineEdit *editor = new QLineEdit(parent);

return editor;

}

void MyDelegate::setModelData ( QWidget * editor, QAbstractItemModel * model, const QModelIndex & index ) const

{

QLineEdit *textEdit = qobject_cast

(editor) ;

model->setData(index, qVariantFromValue(textEdit->text()));

}

setEditorData需要读取Model数据

void MyDelegate::setEditorData ( QWidget * editor, const QModelIndex & index ) const

{

const QString& text = index.data(Qt::UserRole).toString();

QLineEdit *textEdit = qobject_cast

(editor) ;

textEdit->setText(text);

}

列表的元素被选中进入编辑状态后，描绘就不通过paint了，这个时候要重做一遍，好在只需做一次特殊处理，用updateEditorGeometry

void MyDelegate::updateEditorGeometry ( QWidget * editor, const QStyleOptionViewItem & option, const QModelIndex & index ) const

{

QRect decorationRect = QRect(option.rect.topLeft(), QSize(80,80));

QRect displayRect = QRect(decorationRect.topRight()+QPoint(20,30),QSize(150,25));//QRect(decorationRect.topRight()+QPoint(20,30),QSize(50,50));

editor->setGeometry(displayRect);

}

至此一个可编辑的自定义listview就做出来了， 通过修改字符串指向已存在的图像的路径，可以改变列表中的图片。 限于篇幅自定义的按钮留待以后实现。

jQuery中的bind()函数跟on()函数有什么区别呢？

.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
bind就是调用的on，由于jq绑定事件有bind，live，delegate三个方法，比较混乱，所以新版本才出了on代替这三个
摘抄jQuery官方的bind()和on()方法各自的区别介绍如下：1、在on()方法介绍的与bind()方法的区别：As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see.bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()2、在bind()方法介绍的与on()方法的区别：As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements.总结整理上述两段英文的区别意思为：bind()函数是jQuery 1.7之前或更早版本采用的一个用来绑定事件处理程序的函数；on()函数是jQuery 1.7版本提供的首选的用来绑定事件处理程序的函数；从1.7版本的介绍以及参数描述来看，其实这两个函数基本上用法一致，但可能在早期的版本中，bind()函数一次只能为标签对象绑定一个事件的处理程序，而on()函数则可以一次为多个不同的事件绑定处理程序。
1、在on()方法介绍的与bind()方法的区别：As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see.bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()2、在bind()方法介绍的与on()方法的区别：As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements.总结整理上述两段英文的区别意思为：bind()函数是jQuery 1.7之前或更早版本采用的一个用来绑定事件处理程序的函数；on()函数是jQuery 1.7版本提供的首选的用来绑定事件处理程序的函数；从1.7版本的介绍以及参数描述来看，其实这两个函数基本上用法一致，但可能在早期的版本中，bind()函数一次只能为标签对象绑定一个事件的处理程序，而on()函数则可以一次为多个不同的事件绑定处理程序。
　　1：bind()：为每个匹配元素的特定事件绑定事件处理函数。
　　bind(type,[data],fn)
　　type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。
　　比如"click"或"submit"，还可以是自定义事件名。
　　data:作为event.data属性值传递给事件对象的额外数据对象
　　fn:绑定到每个匹配元素的事件上面的处理函数
　　2：on()在选择元素上绑定一个或多个事件的事件处理函数。
　　on(events,[selector],[data],fn)
　　events:一个或多个用空格分隔的事件类型和可选的命名空间， 如"click"或"keydown.myPlugin" 。
　　selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
　　data:当一个事件被触发时要传递event.data给事件处理函数。
　　fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
对比发现on 和bind的 差别不大， 但是on多一个[selector] 可以过滤指定元素
.bind()与.on()的区别：
（1）是否支持selector这个参数值。由于javascript的事件冒泡特性，如果在父元素上注册了一个事件处理函数，当子元素上发生这个事件的时候，父元素上的事件处理函数也会被触发。
如果使用on的时候，不设置selector，那么on与bind就没有区别了。
（2）on绑定的事件处理函数，对于未来新增的元素一样可以的，和delegate效果相同，而bind则不行。
（3） delegate用法与on()相同，只是参数的顺序不同：
扩展资料：
.bind()与.on()的实际应用：
1.bind()是直接绑定在元素上 ，将一本地地址与一套接口捆绑。如无错误发生，则bind()返回0。否则的话，将返回-1，应用程序可通过WSAGetLastError()获取相应错误代码。
用于事件处理程序
function ClassName(){this.eventHandler = (function(){
}).bind(this);
}
2.on()则实现事件代理, 可以在匹配元素上绑定一个或者多个事件处理函数。
（1） 用来绑定多事件,并且为同一函数，如：
$('div').on('click mouseover',function(){
//do sth
});
（2）多个事件绑定不同函数，如：
$('div').on({
'click':function(){
//do sth
},
'mouseover':function(){
//do sth
}
});
（3）事件代理，如：
html:
按钮1
jq:
$('#bt1').on('click',function(){
$('body').append('按钮2');
});
$('body').on('click','.bt2',function(){
console.log('这是bt2');
}
参考资料：百度百科-bind()

JavaScript事件代理和如何使用代理实例用法详解

JavaScript事件代理事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制,下面我们具体举个例子来解释如何使用这个特性。这个例子主要取自David Walsh的相关文章（How JavaScript Event Delegation Works）。假设有一个 UL 的父节点，包含了很多个 Li 的子节点：

• Li 1
• Li 2
• Li 3
• Li 4
• Li 5

当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都添加一些类似onMouseOver或者onClick之类的事件监听。如果这个UL中的Li子元素会频繁地添加或者删除，我们就需要在每次添加Li的时候都调用这个addListenersLi方法来为每个Li节点添加事件处理函数。这会造成添加或者删除过程的复杂度和出错的可能性。解决问题方法是使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源Li。下面的代码可以完成想要的效果： 为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。从而可以获取到相应的信息，并作处理。jQuery和Dojo中delegate函数下面看一下Dojo和jQuery中提供的事件代理接口的使用方法。jQuery：jQuery的delegate的方法需要三个参数，一个选择器，一个时间名称，和事件处理函数。而Dojo的与jQuery相似，仅是两者的编程风格上的差别：Dojo的delegate模块在dojox.NodeList中，提供的接口与jQuery一样，参数也相同。通过委托， 能够体会到使用事件委托对于开发带来的几个好处：1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。在JavaScript编程中使用代理上面介绍的是对DOM事件处理时，利用浏览器冒泡机制为DOM元素添加事件代理。其实在纯JS编程中，我们也可以使用这样的编程模式，来创建代理对象来操作目标对象.上面的例子中，通过调用delegate()函数创建的代理函数d来操作对a的修改。这种方式尽管是使用了apply（call也可以）来实现了调用对象的转移，但是从编程模式上实现了对某些对象的隐藏，可以保护这些对象不被随便访问和修改。在很多框架中都引用了委托这个概念用来指定方法的运行作用域。比较典型的如dojo.hitch(scope,method)和ExtJS的createDelegate(obj,args)。
代替英语短语有哪些？

表示“代替”的英语短语有：in place of；in stead of；instead of；supply the place of；take the place of；cover for；do for；do duty for；in lieu of
这里重点来讲解一下“in place of”
一、音标：
[?n] [ple?s] [?v; ?v]
二、释义：
代替
三、短语：
supplant in place of 代替
instead of in place of 代替
in the place of 在 ; 代替 ; 在地方 ; 位置
be in place of 代替
四、例句：
You can use milk in place of cream in this recipe.
这道食谱可以用牛奶代替奶油。
Cooked kidney beans can be used in place of French beans.
做熟的四季豆可以用来代替菜豆。
In a few Minnesota communities, physician's assistants are being used in place of doctors.
在明尼苏达州的一些社区，医生助理正被用来代替医生。
代替，作为……的替换的英文：replace、substitute for。
1、replace
音标：英 [r??ple?s] 美 [r??ple?s]
v.代替；取代；(用…)替换；(以…)接替；更换；更新
例句：
He will be difficult to replace when he leaves.
他离开后，他的位置很难有人接替。
2、substitute for
音标：英 [?s?bst?tju?t f??(r)] 美 [?s?bst?tu?t f??r]
v.取代；替代
例句：
His institute has constituted a substitute for disputers with minute route of rescuers.
他的学院已组建了带有一小路拯救队的争论者的替换者。
扩展资料
相关词义辨析：
delegate、deputy、representative、agent、substitute这些名词有“代表、代理人”之意。
1、delegate指一般被派参加某一会议的代表。
2、deputy指上级授权代理行事的代表，特指被选择为执行全部或部分公务的人。
3、representative一般指被选举或委派代表某人或一些人或某个较大团体的人，其职务有时是较长期的。
4、agent普通用词，通常指经授权代理另一个人或团体，或指在双方之间代表一方起中间作用的人。
5、substitute主要强调某人或某物可以用来代替别的人或物的作用。
代替的英语短语是：instead of
Instead of 是个短语介词。Instead of 的意思是“代替……”、“而不……”，
在语言的实际运用中，instead o功能与连词十分相似,现归纳如下：
1、跟名词：I give him advice instead of money. 给了他忠告而没有给他钱。
2、跟代词：Will you go to the party instead of me? 你代我去赴宴，好吗？
3、跟形容词：Things are now better instead of worse. 情况不是更坏，而是更好了。
4、跟副词：He walks slowly instead of quickly. 他走得慢，而不是快了。
5、跟动词（短语）：That increased instead of decreased our courage. 那不但没有减弱反而增强了我们的勇气。
6、跟动名词（短语）：We should encourage them instead of throwing cold water on them. 我们应该鼓励他们而不是对他们泼冷水。
7、跟动名词复合结构：They must make up their own minds instead of our making their minds for them.
他们应当自己下决心而不是我们替他们下决心。
8、跟介词短语：He laughed with (us) instead of at us. 他跟我们一起笑，并不是嘲笑我们。
1.代替 instead ofsubstitutein place of
2.代替者 JAMESsubstitutesupplanterpinch hitter
3.代替品 substitutesurrogatealternatereplacement
4.所代替 be replaced by
5.代替矿物 metasomeproxy-mineralmineral
6.临时代替 fill in
7.代替物 substitutesubstitute for sthsuccedaneum
8.代替的人或物 replacementsubstitute
9.微笑代替眼泪 shiny dayS Day
10.用类代替类型码 ReplaceType Code with Class
replace; substitite for; take the place of:
He replaced his brother as goalkeeper. 他代替他哥哥当守门员。
Glass blocks are sometimes substituted for ordinary bricks. 有时， 玻璃砖被用来代替普通的砖。
代替英语replace
同义词
substitute
替代品，代替物；（体育比赛中的）替补队员；令人满意的替代物，与之媲美的事物；

副职；用……代替；（比赛中）替换（运动员）；代替（某人的工作）；（化）取代（分子中的一个或一组原子，尤指氢原子）；替代性的；

take the place of

代替；

instead of

代替；而不是…；

代替英语短语有

1.代替 instead ofsubstitutein place of

2.代替者 JAMESsubstitutesupplanterpinch hitter

3.代替品 substitutesurrogatealternatereplacement

4.所代替 be replaced by

5.代替矿物 metasomeproxy-mineralmineral

6.临时代替 fill in

7.代替物 substitutesubstitute for sthsuccedaneum

8.代替的人或物 replacementsubstitute

9.微笑代替眼泪 shiny dayS Day

10.用类代替类型码 ReplaceType Code with Class

ake the place of ; instead of

英 [?n?sted] 美 [?n?sted]

adv. 代替，顶替，反而

短语：

rather-instead 相反

Instead instead of 相反 ; 而非

instead of doing 代替做某事 ; 而不是干某事 ; 而不是做 ; 而不是做某事

词语用法：

instead可位于句首，连接上下句。通常是上句先否定一种情况，再以instead引出下句，提出相反的情况。

instead也可位于句末，可用于两个独立的句子，也可用于并列句的后一句中，还可用于带有状语从句的主句中，这时常译为“反之”，“相反”。

instead of是短语介词，其后可接名词、代词、动名词，有时也可接形容词、动词不定式、介词短语等。instead of前后两部分的意思一般是一正一反，可灵活译为“（用…）代替…”“（是…）而不是…”“并非”“反而”等。

代表用英语怎么说

deputy代表
人大代表：deputy of the people's congress ．
学校里的课代表用commissary
英语课代表：class commissary of English study
* be representative of
delegate
in the name of
on behalf of
represent
representation
* representative
* representive
* stand for
(带“*”的是比较好的）
1.on behalf of; in the name of; in the person of
2.to stand for; to represent
3.a representative; a delegate; an ambassador
代表
delegate; deputation; deputy; represent; commissary; representation
representative
【经】 on behalf of; panel; rep
commissary
人大代表
代表用英语有两种表达：
1、作名词时的表达：
representative
读音：英 [?repr??zent?t?v] 美 [?repr??zent?t?v]
n.代表；销售代表；销售代理；代销人；代表他人者
例句：
She had a stressful job as a sales representative.
作为一名销售代表，她的工作压力很大。
（representative常常和;egal搭配使用，即Legal Representative表示“法人代表”）
2、作动词时的表达：
represent
读音：英 [?repr??zent] 美 [?repr??zent]
v.代表；作为…的代言人；维护…的利益;等于；相当于；意味着
例句：
My only is to represent Britain at the Olympics.
我唯一的目标是代表英国参加奥运会。
?（representative常常和legal搭配使用，即legal representative，表示“法人代表”）
扩展资料：
represent的用法：
represent的基本意思是“代表”，多指受委托代表某人、组织、机构、国家等办理某事。引申可指“象征”、“体现”、“表示”、“描绘”、“声称”、“扮演”等。
represent既可用作及物动词，也可用作不及物动词。
1、用作及物动词时，可接名词、代词、that从句作宾语；例句（接名词）：
The general secretary may represent the president at official ceremonies.
总书记可以在一些官方仪式上代表主席。
2、也可接双宾语，其间接宾语须由介词to引出。例句：
For many they clearly represent an
alternative to run-of-the-mill estate cars.
对于很多人来说，他们显然可以作为一般旅行车的替代品。
3、represent还可接以as短语充当补足语的复合宾语。例句：
The physical entity which these components represent
is not as easily visualised as a vector.
这些分析量所表示的物理实质，不容易像矢量那样形象化表现出来。
（注意represent与delegate的意思区别：represent指“代表某人”。delegate指“委派某人”。
例句：He represented me at the meeting。他代表我在会议上。）

C#委托的用法和用途

Ex
Public delegate void SomeHandler(参数);
SomeHandler sh = new SomeHandler(这里写跟定义的委托有一样返回值,一样参数类型的方法名称);
//调用
sh(参数);
你可以用委托调用某种类型的方法
只要符合你的委托 ,它将能调用所有可访问的同类方法.
委托:
http://msdn.microsoft.com/library/chs/default.asp?url=/library/CHS/cpref/html/frlrfsystemdelegateclasstopic.asp
委托的用法很多:一般是用于声明事件和回调的委托,还可以是用于代表方法标签的委托.至于用法你可以在MSDN上找.
以下是我个人的看法:
1)有了委托你就可以把方法看作像常数一样,而委托就是该常数类型的变量.
从这个角度看来用于声明事件的委托就是声明这个事件触发以后所调用的方法的标签或者特征.只有符合该标签(参数个数和参数类型)的方法才可以做为该用于该事件的回调.
一个事件触发了,你可能需要用多个方法处理该事件或者说该事件调用了多个方法(每个事件的实例都有一个需要调用的方法列表,当事件触发它会逐个调用列表中的每个方法)
2)通过使用委托你可以实现对方法变化的封装.
打个比方:如果你骑自行车,你需要有骑自行车的方法DriveBike().如果你骑摩托车你需要有骑摩托车的方法.现在你有一个方法DriveMoto.现在你需要定义一个方法,实现你骑(自行车或者摩托车)到某地DriveTo(地点,骑的方式)
骑的方式这里其实就是委托.在使用的时候,如果你是骑自行车你就用DriveBike实例化委托的实例带入DriveTo方法,如果你骑摩托车你就用DriveMoto实例化"骑的方式"这个委托带入DriveTo方法.