| th1 | th2 | th3 | th4 | th5 |
|---|
Frontend - Event 事件（change、dblclick、click、keydown、addEventListener）
目录
一、常用事件
（一）下拉选项切换 change（同理：CheckBox、RadioBox）
（二）双击 dblclick
（三）单击 click
（四）键盘按下 keydown（如，回车键）
二、监听事件 addEventListener
（一）意义
（二）用法
（三）举例
三、监听事件 jQuery on
举例（设置 DataTable 的一级二级联动下拉框）
1. 模板文件
2. luobogan.js（公共文件）
一、常用事件
（一）下拉选项切换 change（同理：CheckBox、RadioBox）
$("#id_select").change(function () {
console.log('下拉选项切换事件')
});（二）双击 dblclick
// 第1种：
$("body").on("dblclick", "#id_tb_tbody >tr", function () {
console.log('双击表格某行事件')
});
// 第2种：
$("#id_tb_tbody").on("dblclick", "tr", function () {
console.log('双击表格某行事件')
});（三）单击 click
$('#id_add_btn').click(function () {
console.log('单击按钮事件')
});（四）键盘按下 keydown（如，回车键）
$('#id_input').keydown(function (e) {
if (e.keyCode == 13) {
console.log('键盘按下事件，13 代表回车')
}
});二、监听事件 addEventListener
（一）意义
针对"没有刷新当前模板，后期新加的模板元素"，由于某些事件早在初始化时已渲染，可使用addEventListener给新元素（DOM 对象）重新补充事件。
（二）用法
document.querySelector("#id_input").addEventListener(参数1, 参数2, 参数3);其中，addEventListener的参数：
参数1：事件类型；字符串；大小写敏感。
参数2：事件触发时执行的函数；方法。
参数3：事件是否在捕获或冒泡阶段执行；默认为false。
（三）举例
给“新增的input框元素”绑定“回车按下事件”
// 定义一个事件需要的方法
function showKey(e) { // 注意：需要写一个 e 参数，才能用 e.keyCode 做判断
if (e.keyCode == 13) {
console.log(e.keyCode)
}
}
// input输入框绑定监听事件
document.querySelector("input").addEventListener('keydown', showKey); // 针对class名
// 注意：
// 1. 在参数2处，调用的方法不用打括号，也不用传e参数
// 2. querySelector可用getElementById
document.getElementById('#id_input').addEventListener('keydown', showKey) // 针对id名
三、监听事件 jQuery on
举例（设置 DataTable 的一级二级联动下拉框）
1. 模板文件
Test
2. luobogan.js（公共文件）
/**
* 设置 DataTable 的一级二级联动下拉框
* @备注：该方法是公共文件的
* @tbody_data 整个表格内容数据（每行每列）、双阵列
* @datatable DataTable 结构
* @init 是否初始化整个表格（boolean值）
* @sel_idx 一级下拉框所在列
* @sel_opts 一级下拉选项（阵列）
* @link_sel_idx 二级下拉框所在列
* @get_link_opts 获取二级下拉选项的方法
*/
function set_tb_sel(tbody_data, datatable, init, sel_idx, sel_opts, link_sel_idx, get_link_sel_opts) {
if (init) { // 是否先初始化表格
datatable.clear().draw();
}
for (let idx = 0; idx < tbody_data.length; idx++) {
let tr_data = tbody_data[idx]; // 获取当前行
opts_data = ''; // 组装一级下拉选项
tr_data[sel_idx] = opts_data; // 将该行的第sel_idx处的单元格，设置为select格式
tr_data[link_sel_idx] = ''; // 设置第sel_idx处的单元格，设置为select格式
datatable.row.add(tr_data).draw(); // 将每行数据存入datatable中
console.log('此代码所在方法可作为公共方法，接下来绑定监听事件，实现不同的模板执行不同的处理')
// 有两种绑定监听事件
// 第一种
// $('#fir_sel' + idx).on('change', function () {
// get_link_sel_opts('#fir_sel' + idx, 'link_sel' + idx); // 在本方法中绑定change的监听事件，能实现不同模板去调用不同模板的get_link_sel_opts方法
// })
// 第二种
$('#fir_sel' + idx).change(function () {
get_link_sel_opts('#fir_sel' + idx, '#link_sel' + idx); // 注意该处仍处于for循环中，给每一行的每个下拉框设置唯一ID
})
}
}