将内联 Javascript 转换为 onclick 事件

Converting inline Javascript to an onclick event

本文关键字：onclick 事件 转换 Javascript      更新时间：2023-09-26

我会直言不讳。我的大部分技能都是纯HTML和CSS。我正在越来越多地尝试扩展到 JavaScript 和 JQuery，并且有一些经验，足以理解许多简单的教程并使用我自己的更改实现它们，但不足以在没有备忘单或类似示例的情况下自己做很多事情。无论如何：

我想尝试这个教程，我发现使用 Ajax 来替换div 的内容，但实现需要糟糕的标记（内联 JS）。他没有建议使用onclick事件的方法，我更喜欢内联JS。

这是他提供的"Ajax 引擎"，我选择导入/链接，因为我觉得在 HTML 中转储所有这些是愚蠢的：

<script type="text/javascript">
// Version 1.1 of May 16, 2013
function RequestContent(url,id) {
var http;
if (window.XMLHttpRequest) {
   try { http = new XMLHttpRequest(); }
   catch(e) {}
   } 
else if (window.ActiveXObject) {
   try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch(e) {
      try { http = new ActiveXObject("Microsoft.XMLHTTP"); } 
      catch(e) {}
      }
   }
if(! http) {
   alert(''n'nSorry, unable to open a connection to the server.');
   return false;
   }
http.onreadystatechange = function() { PublishContent(http,id); };
http.open('GET',url,true);
http.send('');
}
function PublishContent(content,id) {
try {
   if (content.readyState == 4) {
      if(content.status == 200) { document.getElementById(id).innerHTML=content.responseText; }
      else { alert(''n'nContent request error, status code:'n'+content.status+' '+content.statusText); }
      }
   }
catch(error) { alert('Error: '+error.name+' -- '+error.message); }
}
</script>

为了使用函数 RequestContent，他只提供了像这样下载内联 JS 的选项：

<ul>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent1.html','fill-me3')">
Click here</a> to fill the div below with the Master Form .PHP logo.
</li>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent2.html','fill-me3')">
Click here</a> to fill the div below with the Master Form V4 logo.
</li>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent3.html','fill-me3')">
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>

我了解内联JS的工作原理，我只是不确定如何以允许onclick事件的方式编写它。

我将如何转换内联 JS？我真的很感谢你的帮助。

只需将href更改为 onclick ，然后摆脱javascript:。

<ul>
  <li>
    <a onclick="RequestContent('/library/ajaxcontent1.html','fill-me3')">
Click here</a> to fill the div below with the Master Form .PHP logo.
  </li>
  <li>
    <a onclick="RequestContent('/library/ajaxcontent2.html','fill-me3')">
Click here</a> to fill the div below with the Master Form V4 logo.
  </li>
  <li>
    <a onclick="RequestContent('/library/ajaxcontent3.html','fill-me3')">
Click here</a> to fill the div below with the Most Popular logo.
  </li>
</ul>

使用数据属性来保存值将允许您添加更多链接，而无需编写更多 JavaScript。

.HTML

<ul>
  <li>
    <a href="#" class="someLink" data-request-content="ajaxcontent1">
Click here</a> to fill the div below with the Master Form .PHP logo.
  </li>
  <li>
    <a href="#" class="someLink" data-request-content="ajaxcontent2">
Click here</a> to fill the div below with the Master Form V4 logo.
  </li>
  <li>
    <a href="#" class="someLink" data-request-content="ajaxcontent3">
Click here</a> to fill the div below with the Most Popular logo.
  </li>
</ul>

爪哇语

$('.someLink').on('click', function(e) {
  var content = $(e.currentTarget).data('request-content');
  RequestContent('/library/' + content + '.html', 'fill-me3');
});

要在外部 javascript 中使用 onclick 事件，您的元素需要具有 ID：

<ul>
  <li>
    <a id="one">
Click here</a> to fill the div below with the Master Form .PHP logo.
  </li>
  <li>
    <a id="two">
Click here</a> to fill the div below with the Master Form V4 logo.
  </li>
  <li>
    <a id="three">
Click here</a> to fill the div below with the Most Popular logo.
  </li>
</ul>

在外部 javascript 中，您将使用 Document.getElementById() 和 .onclick 属性：

document.getElementById("one").onclick = function() {
    RequestContent('/library/ajaxcontent1.html','fill-me3');
}
document.getElementById("two").onclick = function() {
    RequestContent('/library/ajaxcontent2.html','fill-me3');
}
document.getElementById("three").onclick = function() {
    RequestContent('/library/ajaxcontent3.html','fill-me3');
}

下面是使用 jquery 调用函数的更通用、更简单的方法。应将链接和其他属性添加为锚标记的一部分。

<ul>
<li>
<a href="#" link='/library/ajaxcontent1.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
<li>
<a href="#" link='/library/ajaxcontent2.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
<li>
<a href="#" link='/library/ajaxcontent3.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>
<script>
$(document).ready(function(){
$('a').click(function()
{
  RequestContent($(this).attr("link"),$(this).attr("class"));
});
});
function RequestContent(url,cls)
{
  alert(url);
  alert(cls);
}
</script>

例 ： https://jsfiddle.net/DinoMyte/Lkb0s60n/1/

仅当您

打算导航到目标页面（此框架或其他框架）时，才使用 <a> 元素。对javascript事件使用任何其他元素，并添加CSS以使其看起来可点击（如果您愿意）。（请注意，有一些方法可以使用JQuery或其他JS工具包来缩短下面的脚本）

function NavigateTo(dest) {
  // ...
}
var navTos = document.querySelectorAll('.navTo');
for (var i = 0; i < navTos.length; i++) {
  navTos[i].addEventListener('click', function(evt) {
    NavigateTo(evt.target.dataset.navPage);
  });
}
.link {
  color: blue;
  cursor: pointer;
}
.link:hover {
  text-decoration: underline;
}
<span class="link navTo" data-nav-page="place.htm">Go here</span>

相关文章：