Question

我有一些我修改过的代码，它们有HTML格式的内联脚本。

举个例子，在我的文档中，这样的按钮很少。

<button class="btn-primary" onclick="selectAll()">All Students</button>

如何以最佳方式避免这种内联样式？

其他信息：我正在使用查询文件。任何意见都将不胜感激。

Answer 1

使用基于标准的现代 element.addEventListener() 方法配置您的事件处理程序。

// Get your element reference
var btn = document.querySelector("button.btn-primary");

// Configure an event handler.
// NOTE: You don't invoke the function here so no () after the function name
btn.addEventListener("click", showAll);

// This is the callback function
function showAll(){
  console.log("You clicked the button!");
}

<button class="btn-primary">All Students</button>

或者，在JQuery中，使用 element.on() 方法：

// Get your element reference
var $btn = $("button.btn-primary");

// Configure an event handler.
// NOTE: You don't invoke the function here so no () after the function name
$btn.on("click", showAll);

// This is the callback function
function showAll(){
  console.log("You clicked the button!");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-primary">All Students</button>

Answer 2

您可以设置按钮的ID，如

<button class="btn-primary" id="btn">All Students</button>

然后创建单独的js文件＆＃34; script.js＆＃34;并在其中写下

window.onload = function(){
var btn = docuemtn.getElementById('btn');

btn.addEventListener('click',function(e){
   selectAll();
});
}

将js文件链接到html文件，写在html文件的底部

<script src="script.js"></script>

避免内联onClick函数的最佳解决方案是什么？

2 个答案: