jquery中的bind(),live(),delegate(),on()绑定事件方式
DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >jquery绑定事件 title >
< script src= "jquery-1.11.1.min.js" > script >
< style type= "text/css" >
.container{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
style >
head >
< body >
< input type= "button" value= "按钮" class= "btn-test" />
< div class= "container" > div >
< script >
$( function(){
/*********添加单个事件处理*********/
// $('.btn-test').bind('click',function(){
// $('.container').slideToggle()
// })
/********添加多个事件处理********/
// $('.btn-test').bind('click keydown',function(){
// $('.container').slideToggle()
// })
//大括号替代方式
$( ".btn-test"). bind({
"mouseout" : function () {
alert( "这是mouseout事件!");
},
"click" : function () {
$( ".container"). slideToggle();
}
});
/********删除事件处理********/
$( ".btn-test"). unbind( "click");
})
script >
< script >
$( function(){
//大括号替代方式
$( ".btn-test"). live({
"mouseout" : function () {
alert( "这是mouseout事件!");
},
"click" : function () {
$( ".container"). slideToggle();
}
});
/********删除事件处理********/
$( ".btn-test"). die( "click");
})
script >
< div class= "header" >
< input type= "button" value= "按钮1" class= "btn-test" id= "btn-test1" />
< input type= "button" value= "按钮2" class= "btn-test" id= "btn-test2" />
div >
< div class= "container" > div >
< script >
$( function(){
/***********单元素添加单事件***********/
//按钮绑定单击事件 实现div的显示隐藏
$( ".header"). delegate( "#btn-test1", "click", function () {
$( ".container"). slideToggle();
});
/***********单元素添加多事件***********/
//空格相隔方式
$( ".header"). delegate( "#btn-test1", "click mouseout", function () {
$( ".container"). slideToggle();
});
//大括号替代方式
$( ".header"). delegate( "#btn-test1", {
"mouseout" : function () {
alert( "这是mouseout事件!");
},
"click" : function () {
$( ".container"). slideToggle();
}
});
})
script >
< div class= "header" >
< input type= "button" value= "按钮" class= "btn-test" />
div >
< div class= "container" > div >
< script >
$( function(){
/*********添加单个事件处理*********/
$( ".header"). on( "click", ".btn-test", function () {
//显示隐藏div
$( ".container"). slideToggle();
});
/********添加多个事件处理********/
//空格相隔方式
$( ".header"). on( "mouseout click", ".btn-test", function () {
//显示隐藏div
$( ".container"). slideToggle();
});
//大括号替代方式
$( ".header"). on({
"mouseout" : function () {
alert( "这是mouseout事件!");
},
"click" : function () {
$( ".container"). slideToggle();
}
}, ".btn-test");
//删除事件
$( ".header"). off( "click", ".btn-test");
});
script >
< script >
$( function () {
//利用bind()方法，给P标签设置click方法 ======失败 没有任何反应=======
$( ".container p"). bind( "click", function () {
alert( "bind()添加单击事件成功!");
});
//利用live()方法.给P标签设置click方法 =======成功调用方法============
$( ".container p"). live( "click", function () {
alert( "live()添加单击事件成功!");
});
//利用delegate()方法.给P标签设置click方法 =======成功调用方法============
$( ".container"). delegate( "p", "click", function () {
//显示隐藏div
alert( "delegate()添加单击事件成功!");
});
//利用on()方法.给P标签设置click方法 =======成功调用方法============
$( ".container"). on( "click", "p", function () {
//显示隐藏div
alert( "on()添加单击事件成功!");
});
//按钮添加P标签
$( ".btn-test"). click( function () {
$( ".container"). append( "
这是新增的段落!
");
});
});
script >
body >
html >