jQuery绑定Dom元素操作事件方法
- 1.常见的$(DOM元素).click(function(){});
- 2.通过bind()方法。(不推荐，已经被on()方法替代了)
- 3.通过delegate()方法。相对bind()方法来说可以动态绑定元素。
- 4.通过on()方法。语法和delegate有点不同。（推荐）
- 这个是菜鸟教程的在线编辑器地址：https://www.runoob.com/try/try.php?filename=tryjs_events
- 扩展：
1.常见的$(DOM元素).click(function(){});
DOM元素可以通过id、class、标签获取
通过标签名获取，获取button的DOM对象。
$("button").click(function(){
$("body").append("<p>标签</p>")
});点击按钮，页面出现标签。
通过标签的id属性获取DOM对象
$("#text").click(function(){
$("body").append("<p>id</p>")
});点击按钮，页面会出现标签、id。因为同一个标签可以绑定多个点击触发事件，
调换触发顺序，页面显示的顺序也不一样。同时可以通过禁止后面的点击事件触发，从而不显示标签。
不过语法得变一下，因为这三个button不存在子父级关系。
通过class属性获取DOM对象。
$(".text").click(function(){
$("body").append("<p>class</p>");
});
2.通过bind()方法。(不推荐，已经被on()方法替代了)
语法为：$(selector).bind(event,data,function(){})，其中event可以绑定多个事件，使用空格隔开。缺点：不可以选择还未生成的DOM元素进行绑定事件，不可以选择子元素。
event：必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data：可选。规定传递到函数的额外数据。
function：必需。规定当事件发生时运行的函数。
<script type="text/javascript">
$(document).ready(function(){
$("button").bind("click mouseenter",{ "name" : "xxx","age" : 18},function(event){
alert(event.data.name);
alert(event.data.age);
$("p").css("background-color","yellow");
});
});
</script>
3.通过delegate()方法。相对bind()方法来说可以动态绑定元素。
语法：$(selector).delegate(childSelector,event,data,function)
childSelector：必需。规定要附加事件处理程序的一个或多个子元素。
event：必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data：可选。规定传递到函数的额外数据。
function：必需。规定当事件发生时运行的函数。
<script type="text/javascript">
$(document).ready(function(){
$("div").delegate("button","click",function(){
$("div").append("<p>这是一个段落。</p>")
});
$("div").delegate("p","click",function(){
alert("动态绑定")
});
});
</script>
4.通过on()方法。语法和delegate有点不同。（推荐）
语法：$(selector).on(event,childSelector,data,function)
event：必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
childSelector：必需。规定要附加事件处理程序的一个或多个子元素。
data：可选。规定传递到函数的额外数据。
function：必需。规定当事件发生时运行的函数。
<script>
$(document).ready(function(){
$("div").on("click","button",{"name": "xxx","age": 18 },function(event){
$("div").append("<p>这是一个段落。</p>");
$("div").append(event.data.name);
$("div").append(event.data.age);
});
$("div").on("p","click",function(){
alert("动态绑定")
});
});
</script>
这个是菜鸟教程的在线编辑器地址：https://www.runoob.com/try/try.php?filename=tryjs_events
大家可以自行尝试。
扩展：
当第一个点击事件触发后，禁止后面的点击事件。(标签必须有子父级关系)
语法：event.stopPropagation()
打开注释，就只弹出span。
