javascript - 使用setAttribute()添加“onclick”函数

Question

为什么以下内容不起作用？
显然没有添加该功能！

function activatetypeinput(event, devtype){
  //The function is called but it doesn't set the attribute
  var dev_input = document.getElementById("device_input");
  dev_input.setAttribute("onclick","add_device_input(event, this);");
}

在我的HTML中，我有类似以下内容（除其他外）：

<select class="text-input" id="device_input">
   <option>--</option>
</select>

Answer 1

问题




  “为什么以下内容不起作用？显然未添加功能！”
  ...
  dev_input.setAttribute("onclick","add_device_input(event, this);");




解释


尽管我没有找到有关此特定情况的参考，但我会指出我观察到的内容：


查看Devtools F12，您会看到添加了onclick属性以及该值。尽管它在那里并且在语法上正确，但是它不起作用。请参阅“演示-来源：#btn3”部分
如果通过JavaScript将相同的属性和值添加为属性，则它作为属性起作用。属性不会显示在标记中，而属性不会显示在标记中。对于所有意图和目的，onclick属性和onclick属性是一个相同的对象。
这是jQuery方法attr()和prop()的标准行为。例如，我经常看到这种情况：

👍$(":checkbox").prop("checked", true);

👎$(":checkbox").attr("checked", true);




事件处理


事件被注册到DOM内的元素或与浏览器相关的非DOM对象（如Window）。事件注册有3种类型：


事件上的属性：古老而又肮脏，被Web开发社区普遍劝阻和反对。这是OP代码试图使用setAttribute()方法以编程方式创建的事件处理程序的类型。似乎on事件超出了set/get/removeAttribute()方法的范围，而且很可能也是jQuery方法attr()的范围（未经测试，并不奇怪）。参见部分：演示-来源：#btn0

<button onclick="funcName(event)">Discouraged</button>


⭐On-event属性：这是事件处理的旧方法，它也被人们看不起，但由于与前一个事件侦听器相比，它的处理能力有限。就DOM元素而言，onclick属性和onclick属性是相同的。使用此而不是setAttribute()。请参阅“演示-来源：#btn1”部分

⭐document.getElementById('id').onclick = funcName;


事件侦听器：这种类型的事件处理采用方法add/removeEventListener("event", funcName)，是最标准，最新和首选的方法。请参阅“演示-来源：#btn2”部分

document.getElementById('id').addEventListener("event", funcName);

有关为什么要对前两种事件处理进行谴责的详细信息，请出于技术原因而阅读DOM on-event handlers，出于开发和设计方面的原因而阅读此Reddit article。我对这个主题有个人矛盾，因为不赞成使用事件处理程序，并且表示，行为，结构，语义等方面的概念不像以前那么重要。




解



除了使用事件属性之外，我们还可以使用onclick属性来解析整个元素的htmlString。可以使用以下方法完成：


innerHTML覆盖内容


要么


aa insertAdjacentHTML()不会覆盖内容；灵活;快速


🌟请参阅部分：演示-来源：#btn4🌟

var htmlString = `<button onclick="funcName(event, this)">4</button>`

document.querySelector('${selectorOfTarget}').insertAdjacentHTML("${position}", htmlString);

“ selelectorOfTarget”：一个CSS字符串，表示我们希望在其中或周围插入htmlString的DOM元素。


"div" .......：

"#ID“ ....... ::

".CLASS" ....：

#ID + ul ....：

            

#ID + ul li .：

            

• 
  
  
  
  “ position”：一个字符串，用于确定相对于目标元素将htmlSting插入的位置：
  
  

  <!--"beforebegin"-->
  <ul>
  <!--"afterbegin"-->
    <li>ITEM</li>
    <li>ITEM</li>
    <li>ITEM</li>
  <!--"beforeend"-->
  </ul>
  <!--"afterend"-->
  

  
  
  
  htmlString：一个从字面上表示HTML的字符串。代替使用字符串文字，使用Template Literals：
  
  字符串字面量
  
  

  '<div id="'+ID+'" class="'+CLASS+'">+CONTENT+</div>'
  

  
  
  模板文字
  
  

  `<div id="${ID}" class="${CLASS}">${CONTENT}</div>`
  

  
  
  
  
  🟊（请参阅部分：事件处理-列表项：2。事件属性和部分：演示-来源：#btn1。）
  
  
  
  演示版
  
  
  
  
  
  

  var htmlString = `<button id='btn4' onclick='showHide(event)'>4</button>
  <div class='content hide'>
    <h4>Dynamically Registered On Event Attribute by Parsing htmlString</h4>
    <pre><code>
  document.querySelector('#btn3+div+hr').insertAdjacentHTML('afterend', htmlString);
  </code></pre>
  </div>
  <hr>`;
  
  function showHide(event) {
    var tgt = event.target;
    if (tgt.tagName === "BUTTON") {
      var code = tgt.nextElementSibling;
      code.classList.toggle('hide');
    }
    return false;
  }
  
  //#btn1
  //On-Event Property
  document.getElementById('btn1').onclick = showHide;
  
  //#btn2
  //EventListener
  document.getElementById('btn2').addEventListener('click', showHide);
  
  //#btn3
  //Dynamically registered On event Attribute by setAttribute() method. 
  document.getElementById('btn3').setAttribute('onclick', "showHide(event, this)");
  
  //#btn4
  //Dynamically Registered On Event Attribute by Parsing htmlString
  document.querySelector('#btn3+div+hr').insertAdjacentHTML('afterend', htmlString);

  
  

  * {
    margin: 0;
    padding: 0
  }
  
  button {
    padding: 2px 5px;
  }
  
  button+div {
    opacity: 1;
    transition: opacity 1s ease;
  }
  .content {
    margin: 0 0 20px 0
  }
  button+div.hide {
    opacity: 0;
    transition: 1s ease;
  }
  code {
    background: #000;
    color: lime;
  }

  
  

  <!--#btn0-->
  <button id='btn0' onclick="showHide(event, this)">0</button>
  <div class='content hide'>
    <h4>On-Event Attribute</h4>
    <pre><code>
  &lt;button id='btn0' onclick="showHide(event, this)"&gt;On-Event Attribute&lt;/button&gt;
  </code></pre>
  </div>
  <hr>
  
  <!--#btn1-->
  <button id="btn1">1</button>
  <div class='content hide'>
    <h4>On-Event Property</h4>
    <pre><code>
  document.getElementById('btn1').onclick = showHide;
  </code></pre>
  </div>
  <hr>
  
  <!--#btn2-->
  <button id='btn2'>2</button>
  <div class='content hide'>
    <h4>EventListener</h4>
    <pre><code>
  document.getElementById('btn2').addEventListener('click', showHide);
  </code></pre>
  </div>
  <hr>
  
  <!--#btn3-->
  <button id='btn3'><del>3</del></button>
  <div class='content'>
    <h4>Dynamically Registered On Event Attribute by <code>setAttribute()</code> method <b>FAILED</b></h4>
    <pre><code>
  <del>document.getElementById('btn3').setAttribute('onclick', 'showHide(event)');</del>
  </code></pre>
  </div>
  <hr>
  
  <!--#btn4 is dynamically created and will be inserted here-->
  <!--Selector: '#btn3+div+hr' ||  Position: 'afterend'-->

关于javascript - 使用setAttribute()添加“onclick”函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50321775/

上一篇：javascript - API 设计 - 存储像 HTML 这样的富文本的最佳实践是什么

下一篇：javascript - 函数只返回第一个值

相关文章：

if/else 循环中的 javascript 变量声明

javascript - 在 QUnit 测试中设置 $(this) 的范围

jquery - 如何在使用 kendo UI 上传小部件的页面上以编程方式上传文件

javascript - 如何从 javascript Intl.DateTimeFormat 获取时区缩写

javascript - WordPress 主题选项错误

jquery - 根据下拉值在 jquery datepicker 中仅显示天数

javascript - 根据其他复选框的选择来限制复选框的选择

javascript - 正则表达式 - 在 JS 中使用/* 而不在注释中获取我的代码

javascript - 无法在 d3.js 中添加轴

javascript - 如何创建具有已定义变量和函数的 JavaScript 对象？

©2023 IT工具网  联系我们