绑定事件的方法：
1.通过DOM对象属性。
<a href=" " id="login_button">登录</a>
js代码：
$(‘login_button‘).onclick = function(){}
2.通过HTML元素属性。就是在html结构中，给你要添加事件的元素添加一个事件属性
<a href="#" onclick="login()">登录</a>
3.在<a>标签的href属性值中使用"javascript:"语句来声明href属性值中的语句为JavaScript语句。
<a href="javascript:search()">查询</a>
例一：通过DOM对象属性，即在js代码中通过id绑定
登录提交按钮：
<input id="login_button" type="submit" value="登录">
js代码：
$(function() { ???$("#login_button").click(function() { ???????$.ajax({ ???????????url : "/nutzbook/user/login",//请求的链接地址 ???????????type : "POST",//请求方式常用的是 get或者post，默认为get请求 ???????????data : $(‘#loginForm‘).serialize(),//jQuery的serialize()方法通过序列化表单值，把序列化的值传给ajax()作为url的参数，这样就不需要一个一个获取表单中的值然后传给ajax() ???????????dataType : "json",//预期服务器返回的数据类型 ???????????????success : function(data) {//要求为Function类型的参数，请求成功后调用的回调函数 ???????????????console.info(data); ???????????????if (data != null) { ???????????????????alert("登陆成功"); ???????????????????location.href = "/nutzbook/detailform.html"; ???????????????} else { ???????????????????alert("登陆失败,请检查账号密码"); ???????????????} ???????????} ???????}); ???????return false; ???});});例二：给超链接添加事件
在<a>标签的href属性值中使用"javascript:"语句来声明href属性值中的语句为JavaScript语句。
<a id="btn" href="javascript:search()" class="easyui-linkbutton">查找</a>
js代码：
$(function(){ ???????????search(); ???????}); ???????/* 查询 */ ???????function search() { ???????????$(‘#form1‘).form(‘submit‘, {//使表单form1成为ajax提交方式的表单 ???????????????url : encodeURI("/nutzbook/member/query"),//提交表单动作的URL地址，encodeURI()函数可把字符串作为 URI 进行编码 ???????????????success : function(data) {//在表单提交成功以后触发的回调函数，参数data为返回的json数据 ???????????????????//console.info(data);//json对象数组 ???????????????????data = JSON.parse(data);//将json对象数组转换为json对象 ???????????????????//console.log(data);//json对象 ???????????????????$(‘#dg‘).datagrid(‘loadData‘, data); //请求成功后将查询结果显示在id=dg的表格中 ??????????????????????} ???????????}); ???????}例三：通过HTML元素属性。就是在html结构中，给你要添加事件的元素添加一个事件属性
登录提交按钮：
<button id="btn-login" type="button" onclick="login()">登 录</button>
js代码：
// 登录function login() { ???var userName = $(‘#input-username‘).val(); ???var passWord = $(‘#input-password‘).val(); ???if (userName == "" || userName == undefined) { ???????$("#remind-info").html("<font color=‘red‘>请输入用户名!</font>"); ???????return; ???} ???if (passWord == "" || passWord == undefined) { ???????$("#remind-info").html("<font color=‘red‘>请输入密码!</font>"); ???????return; ???} ???$("#remind-info").html(""); ???$("#btn-submit").attr("disabled", true); ???$("#remind-info").html("<img id=‘loding‘ src=‘img/loading.gif‘ />"); ???$.post("user/login", { ???????username : userName, ???????password : passWord ???}, function(result) { ???????if(result == ""){ ???????????$("#remind-info").html("发生错误,请联系管理员"); ???????}else{ ???????????var result = eval(‘(‘ + result + ‘)‘); ???????????if (result.code == ‘000‘) { ???????????????if($("#cbx-remb-me").attr(‘checked‘) == true){ ???????????????????setCookie("username",userName); ???????????????????setCookie("password",passWord); ???????????????????setCookie("remberme","true"); ???????????????} ???????????????window.location.href = "../../cas/page/index.jsp"; ???????????} else { ???????????????var authResult = result.dataMap; ???????????????if(!isEmpty(authResult)){//产品认证失败 ???????????????????if(userName.indexOf("admin") > -1){ ???????????????????????//跳转，重新录入注册码 ???????????????????????window.location.href = "../../page/auth/auth.html"; ???????????????????}else{ ???????????????????????$("#remind-info").html("<font color=‘red‘>产品已到期,请联系管理员重新注册!</font>"); ???????????????????} ???????????????}else{ ???????????????????$("#remind-info").html(""); ???????????????????$("#remind-image").html(""); ???????????????????$("#btn-submit").attr("disabled", false); ???????????????????$("#remind-info").html("<font color=‘red‘>"+result.message+"!</font>"); ????????????????} ???????????} ???????} ???});};例四：easyUI中绑定事件
easyUI表格：
<!-- 表格 --> ???<table id="dg" class="easyui-datagrid" ???????style="width: 500px; height: 200px" ???????data-options=" ???????????rownumbers:true, ???????????ctrlSelect:true, ???????????method:‘get‘, ???????????toolbar: ‘#tb‘, ???????????onClickRow:endEdit, ???????????onDblClickRow:editRow ???????????????????????"> ???????<thead> ???????????<tr> ???????????????<th data-options="field:‘name‘,width:100,editor:‘text‘">姓名</th> ???????????????<th data-options="field:‘old‘,width:80,editor:‘numberbox‘">年龄</th> ???????????????<th data-options="field:‘pinYin‘,width:100,align:‘right‘,editor:‘text‘">拼音</th> ???????????????<th data-options="field:‘position‘,width:100,align:‘right‘,editor:‘text‘">职位</th> ???????????????<th data-options="field:‘ck‘,checkbox:true"></th> ???????????</tr> ???????</thead> ???</table>
js代码：
/* 双击事件对应的方法——编辑 */ ???????function editRow(index, row) {//这里的参数为onDblClickRow事件的参数，index为点击的行的索引值，row为对应于点击行的记录。事件和函数相关联，函数里调用相关方法和参数 ???????????$(‘#dg‘).datagrid(‘beginEdit‘, index);//beginEdit为方法名，index为方法的参数 ???????????indexEdit = index; ???????} ???????????????/* 单击事件对应的方法——退出编辑 */ ???????function endEdit(){ ???????????if(indexEdit!=undefined){//如果开启了行编辑，则关闭 ???????????????$(‘#dg‘).datagrid(‘endEdit‘, indexEdit); ???????????????????????????} ???????}例五：easyUI中下拉列表框通过id在js中绑定事件
<!-- 下拉列表 --> ???????????<select id="cc" name="position" class="easyui-combobox" ?panelHeight="100" > ???????????????<option value="总经理">总经理</option> ???????????????<option value="开发">开发</option> ???????????????<option value="实施">实施</option> ???????????????<option value="" selected>全部</option> ???????????</select>
js代码：
/* 下拉列表选项 */ ???????????????$(‘#cc‘).combobox({ ???????????????onChange: function(newValue,oldValue){//在字段值发生更改的时候触发 ???????????????//console.info(newValue); ???????????????$(‘#cc‘).combobox(‘setValue‘, newValue);//设置下拉列表框的值 ???????????????search(); ????????????} ???????});Jquery绑定事件
原文地址：https://www.cnblogs.com/hmwnote/p/8464123.html