【js】对常见事件的一个总结
ps: 内容涉及(kendo Ui, jQuery)
如下图所示：要求实现功能点
(1)用户名(复选下拉框，可选择多个)和用户名(文本输入框)相勾连
复选下拉框改变，文本框也改变；如果选择了用户名下拉框/用户名文本框，则用户名复选框为不被勾选状态
(2)如果点击了(用户名是否全选)复选框为已勾选状态，用户名复选下拉框及用户名文本框清空
keyup：触发事件
keyup：文本输入框输入内容/内容改变便触发该事件
/**
* templateuser3：文本输入框的id
* getSe3：复选框
*/
//当输入内容时，立即触发某事件，宜用onkeyup，onchange会有延时。
$("#templateuser3").keyup(function(){
if($('#templateuser3').val()!=""){
//复选框改变选择状态(取消勾选)
$('#getSe3').prop("checked",false);
mySe3=false;
}
});
change改变事件
change：对dom进行改变之后触发改事件
/**
* inqu3_1-0-formworktemplate3_1：kendoUi的复选下拉框id
* getSe3：复选框Id
* RootgetUser：给复选下拉框添加下拉选项的集合
* mySe3：全局变量，判断复选框(getSe3)是否勾选
*/
$('#getSe3').on("change", function (e) {
//判断复选框是否勾选
if($("#getSe3").is(":checked")){
mySe3=true;
//清空复选下拉框(文本框)的选项
document.getElementById("inqu3_1-0-formworktemplate3_1").length = 0;
//kendoUi的kendoMultiSelect(复选下拉框)
var multiselect =$('#inqu3_1-0-formworktemplate3_1').data("kendoMultiSelect");
//清空复选下拉框已勾选数据
multiselect.setDataSource("");
$('#templateuser3').val("");
var aaa={
data: RootgetUser};
var dataSource1 = new kendo.data.DataSource(aaa);
var multiselect2 =$('#inqu3_1-0- formworktemplate3_1').data("kendoMultiSelect");
//给复选下拉框添加下拉选项数据
multiselect2.setDataSource(dataSource1);
}else{
mySe3=false;
}
});
click 点击事件
click：点击某个dom元素之后触发该事件
/**
* rootModel：点击按钮的id
* saveTemplate:kendoUi的弹窗id
*/
$("#rootModel").on('click', function () {
var winAddUrl = $('#saveTemplate').data("kendoWindow");
//打开弹窗
winAddUrl.center().open();
});