[JavaScript知识库]html页面中给元素添加事件常见的3种语法

1. 使用元素的事件属性

1.1 用法

onxxxx=“f();”
例如为Btn按钮添加单击事件

<script>
function aaa(){
	alert("你点击了...");
}
</script>
<button onclick="aaa();">点击弹出</button>

JavaScript鼠标事件：JavaScript鼠标事件

2. 使用jquery对象

2.1 用法

例如：选择器.xxx(function(){
//js代码
//this
});

<script>
	$("#btnId").click(function(){
		alert("你好");
	});
</script>
<button id="btnId">按钮</button>

该方法只能给固有元素添加事件

固有元素&动态生成的元素

固有元素：
当调用事件函数给元素添加时，元素已经生成
动态生成的元素：
当调用事件函数给元素添加事件时，元素还没有生成,

3. 使用jquery的on函数

3.1 用法

父选择器.on(“事件类型”，子选择器，function(){
})

父元素：必须是固有元素，可以直接父元素，也可以间接父元素。
事件类型：跟事件属性和事件函数一一对应。
子选择器：目标元素，跟父选择器构成一个父子选择器

该方法不但能给固有元素添加事件，还能够给动态生成的元素添加事件

3.2 给固有元素添加事件

例如下面table标签的tbody元素是动态生成的:
(以下代码在$.ajax({})的success：function(ret){}内部，这里省略了)

1. html-script

var htmlStr = "";
$.each(ret.activitys,function(index,object){
	htmlStr += "<tr>";
	htmlStr += "<td> <input type=\"checkbox\" value=\""+object.activityId+"\">"+object.activityName+"</td>";
	htmlStr += "</tr>";
});
$("#tbodyId").html(htmlStr);

2. html-body

<table>
	<thead>
		<tr>
			<th>名称</th>
		</tr>
	</thead>
	<tbody id="tbodyId">
	
	</tbody>
</table>

3. 对上面动态生成的input标签，也就是checkbox添加单击事件，实现：如果tbody中所有checkbox都被选择，则id="checkAll"的checkbox也选中，反之有一个checkbox没有选中，则不选中。
   这里比较的是被选中元素数组的长度

<script>
	$(function(){
		$("#tbodyId").on("click","input[type='checkbox']",function(){
			if($("#tbodyId input[typd='checkbox']").size() == $("#tbodyId input[typd='checkbox']:checked").size()){
				$("#checkAll").prop("checked",true);
			}
			else{
				$("#checkAll").prop("checked",false);
			}
		});
	});
</script>