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){}内部，这里省略了)

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);

html-body

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

对上面动态生成的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>

html页面中给元素添加事件常见的3种语法相关推荐

HTML中如何给HTML元素添加事件
HTML中如何给HTML元素添加事件方法一: 代码示例: <!DOCTYPE html> <html><head><meta charset="U ...
Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）
Web APIs Web APIs 和 JS 的关联性: Web APIs是 W3C 组织的标准,主要学习DOM 和 BOM Web APIs是 JS 所独有的部分主要学习页面交互功能 Web AP ...
网页制作插入新的元素，并且为插入的元素添加事件
怎样向网页中插入新的元素,在JQuery中有这样的几个函数,其实写网页最大的便利也是在于很多的网页动态的实现都有现成的函数,我们需要做的就是在这个环境中应用这些函数,实现我们的动态的操作. 向网页中插 ...
深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
html5 js选择器,使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 2 3 4 5 使用HTML5的JS选择器操作页面中的元素 6 7 8 9 10 兴趣爱好: 11 12 ...
第四篇 fluter中为应用添加事件和导航
第四篇 fluter中为应用添加事件和导航一.添加事件 1.需要声明一个收藏集合_saved 2._buildRow中传入已经收藏的集合 3.添加点击事件二.导航跳转 1.导航栏由RandomWo ...
js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
html语言添加下划线,HTML页面中怎么文本添加下划线？
怎么在HTML页面中给文本添加下划线?下面本篇文章就来给大家介绍一下HTML.CSS给文本添加下划线的方法,希望对大家有所帮助. HTML添加下划线在HTML中可以使用标签定义下划线文本,即为文本添 ...
给未来元素添加事件 jquery 1.10.2 版本
<div class='dv'><button type='button' class='btn'>点击事件按钮</but ...

html页面中给元素添加事件常见的3种语法