首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery
JQuery事件绑定bind和live
作者：小萝卜 2023-03-24 【 jquery 】 浏览 606
简介JQuery事件绑定bind和live
bind(type, [, data], fn])
type(String) : 事件类型；事件类型包括以下：blur, focus, load, resize,scroll,mouseover,mouseout,dbclick,click等等。
data(Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象。
fn(Function) : 绑定到每个匹配元素的事件上面的处理函数。
例1.
$("p").bind("click", function(){
alert( $(this).text() );
});
例2.
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler) ;
live：格式和bind一样，live是给动态生成的元素绑定事件
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<style type="text/css">
.item{width:200px;height:200px;background:orange;float:left;margin-right:20px;}
</style>
</head>
<body>
<div id="t" class="item"></div>
<button>创建元素</button>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
//事件方法绑定
$('#t').click(function(){
$(this).css('background','red');
})
//使用方法来绑定事件
$('#t').bind('dblclick', function(){//bind绑定
$(this).css('border','solid 5px green');
});
//动态绑定
$('.item').live('click',function(){//直播
$(this).css('background','red');
})
//获取按钮并且绑定单击事件
$('button').click(function(){
//创建元素
var newD = $('<div class="item"></div>');
//执行插入
$('#t').after(newD);
})
//使用该方式将jquery元素对象变成原生js元素对象
// $('#t')[0].innerHTML = "iloveyou very much";
// var t = document.getElementById('t');
//将原生js元素对象变成jquery对象
// $(t).css('background','black');
</script>
</body>
</html>
很赞哦！ (0)
上一篇：jQuery合成事件
