事件处理程序的最佳做法是什么？我不确定是否应该按下带有触发功能的按钮，或者我应该像jQuery一样等待点击事件上的按钮。
通常你可以这样做：
$('.buttonOK').on('click', function(){
alert('ok');
});
或者只需添加javascript:ButtonAction().
我更喜欢哪一个？
答案 0 :(得分：1)
简答：绝对是第一种方式。事件委托更具性能，但在代码中需要额外的条件，因此它基本上是复杂性与性能权衡。
更长的答案：对于少量元素，添加单个事件处理程序可以正常工作。但是，随着您添加越来越多的事件处理程序，浏览器的性能开始下降。原因是监听事件是内存密集型的。
答案 1 :(得分：0)
我也是新人，但我发现一个很好的做法是“功能性编程”。 这意味着你声明你的功能，然后调用它。当您希望事件发生的多个事件时，这会有所帮助，例如
<?php
include 'db.php';
session_start();
if(array_key_exists("matricula",$_COOKIE))
{
$_SESSION['matricula'] = $_COOKIE['matricula'];
}
if (array_key_exists("matricula",$_SESSION))
{
}
else
{
echo "<script> window.location.replace('login.php') </script>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestão Cartões Diária</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="//cdn.datatables.net/plug-ins/1.10.15/sorting/currency.js" rel="stylesheet">
<link href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<?php
$query = "SELECT `funcao` FROM `tb_usuarios` WHERE `matricula`='".mysqli_real_escape_string($conn,$_SESSION['matricula'])."'";
$result = mysqli_query($conn,$query);
$row = mysqli_fetch_array($result);
if( $row['funcao'] == 'EMPREGADO')
{
include("layout_empregado.php");
}
else
{
include("layout_supervisor.php");
}
?>
</div>
<?php
if (isset($_POST['ano_gasto']) and isset($_POST['mes_gasto']))
{
$SQLSELECT = "SELECT * FROM tb_gastos_alimentacao WHERE matricula LIKE '".mysqli_real_escape_string($conn,$_SESSION['matricula'])."' AND ano LIKE'".$_POST['ano_gasto']."' AND mes LIKE '".$_POST['mes_gasto']."'";
}
else
{
$SQLSELECT = "SELECT * FROM tb_gastos_alimentacao WHERE matricula LIKE '".mysqli_real_escape_string($conn,$_SESSION['matricula'])."'";
}
?>
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>Consulta Gastos Usuário <?php echo $_SESSION['matricula'] ?></h2>
<ol class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li class="active">
<strong>Gastos Cartão</strong>
</li>
</ol>
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<form method="post">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Dados do Usuário <?php echo ($_SESSION['matricula']) ?></h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-xs-2 form-group">
<label>Matrícula</label>
<input class="form-control" type="text" disabled="disabled" value="<?php echo $dados_usuario['matricula']; ?>"/>
</div>
<div class="col-xs-7 form-group">
<label>Portador do Cartão</label>
<input class="form-control" type="text" disabled="disabled" value="<?php echo $dados_usuario['nome']; ?>"/>
</div>
<div class="col-xs-3 form-group">
<label>Nº Cartão</label>
<input class="form-control" type="text" disabled="disabled" value="<?php echo $dados_usuario['cartao']; ?>"/>
</div>
</div>
<div class="row">
<div class="col-xs-2 form-group">
<label>Centro de Custos</label>
<input class="form-control" type="text" disabled="disabled" value="<?php echo $dados_usuario['centro_custo']; ?>"/>
</div>
<div class="col-xs-7 form-group">
<label>Supervisão</label>
<input class="form-control" type="text" disabled="disabled" value="<?php echo $dados_usuario['supervisao']; ?>"/>
</div>
<div class="col-xs-3 form-group">
<label>Lotação</label>
<input class="form-control" type="text" disabled="disabled" value="<?php echo $dados_usuario['lotacao']; ?>"/>
</div>
</div>
<div class="row">
<div class="col-xs-2 form-group">
<label>Mês</label>
<select class="form-control m-b" id="cmbMesGasto" name="mes_gasto">
<option value="%">TODOS</option>
<option>Janeiro</option>
<option>Fevereiro</option>
<option>Março</option>
<option>Abril</option>
<option>Maio</option>
<option>Junho</option>
<option>Julho</option>
<option>Agosto</option>
<option>Setembro</option>
<option>Outubro</option>
<option>Novembro</option>
<option>Dezembro</option>
</select>
<input type="hidden" name="mes_selecionado" id="mes_selecionado" value="" />
</div>
<div class="col-xs-2 form-group">
<label>Ano</label>
<select class="form-control m-b" id="cmbAnoGsto" name="ano_gasto">
<option value="%">TODOS</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
</select>
<input type="hidden" name="ano_selecionado" id="ano_selecionado" value="" />
</div>
<div class="col-xs-2 form-group">
<button class="btn btn-primary" type="submit" name="pesquisa_data" id="pesquisa_data">Buscar</button>
<button class="btn btn-primary" type="submit" name="teste" id="teste">Teste</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Consulta aos Gastos do Usuário <?php echo ($_SESSION['matricula']) ?></h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover dataTables-example" id="tabela" >
<thead>
<tr>
<th>Data Lanc.</th>
<th>Núm. Trans.</th>
<th>Estabelecimento</th>
<th>Localidade</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<?php
$result_set = mysqli_query($conn,$SQLSELECT);
while($row = mysqli_fetch_array($result_set))
{
?>
<tr class="gradeX">
<td><?php echo $row['data_lancamento']; ?></td>
<td><?php echo $row['num_transacao']; ?></td>
<td><?php echo $row['estabelecimento']; ?></td>
<td><?php echo $row['localidade']; ?></td>
<td><?php echo $row['valor']; ?></td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<th>Data Lanc.</th>
<th>Núm. Trans.</th>
<th>Estabelecimento</th>
<th>Localidade</th>
<th>Valor</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<button id="btn">Click</button>
</div>
<?php include("rodape.php"); ?>
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/datatables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.15/sorting/currency.js"></script>
<script src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Page-Level Scripts -->
<script>
$(document).ready(function(){
$('.dataTables-example').DataTable({
dom: '<"html5buttons"B>lTfgitp',
columnDefs: [
{
targets: -1,
data: 'Valor',
render: $.fn.dataTable.render.number( '.', ',', 2, 'R$' )
}
],
buttons: [
{extend: 'copy'},
{extend: 'csv'},
{extend: 'excel', title: 'ExampleFile'},
{extend: 'pdf', title: 'ExampleFile'},
{extend: 'print',
customize: function (win){
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
]
});
});
//Código para selecionar uma linha da tabela
$(document).ready(function() {
var table = $('#tabela').DataTable();
$('#tabela tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
var matricula_recuperada = table.cell('.selected', 0).data();
alert(matricula_recuperada);
} );
} );
</script>
</body>
</html>
我希望这会有所帮助：）