使用setattribute添加“onclick”函数

时间：2018-05-14 00:20:59

标签： javascript jquery

为什么以下不起作用？ 显然这个功能没有添加！

function activatetypeinput(event, devtype){
  //The function is called but it doessn'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>

2 个答案:

答案 0 :(得分：2)

我不知道你的尝试：

＆＃13;
＆＃13; 
function activatetypeinput(event, devtype){
  //The function is called but it doessn't set the attribute
  var dev_input = document.getElementById("device_input");
  dev_input.setAttribute("onclick","add_device_input(event, this);");
}
 
function add_device_input(e, t){
  console.log(t);
}
 
activatetypeinput();
＆＃13; 
<select class="text-input" id="device_input">
  <option>--</option>
</select>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

<小时/>

问题

  

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

<小时/>

Explination

<小时/> 虽然我没有找到这个特定情况的参考，但我会指出我观察到的内容：

  • 查看Devtools F12 ，您会看到添加了onclick属性以及值。虽然它存在并且在语法上正确，但它不起作用。 请参阅演示 - 来源：#btn3

  • 如果通过JavaScript将 添加为相同的属性和值作为属性 ，它将作为属性使用。属性不会显示在标记中，而属性则不会。出于所有意图和目的，onclick属性和onclick属性是同一个 。

  • 此行为是jQuery方法attr()和prop()的标准行为。作为一个例子，我经常看到这个：

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

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

<小时/>

事件处理

<小时/> 事件被注册到DOM中的元素或与浏览器相关的非DOM对象（如Window）。有三种类型的事件注册：

  1. 事件属性：一样粗暴，对网络开发社区感到沮丧和不满。这是OP代码尝试使用setAttribute()方法以编程方式创建的事件处理程序类型。似乎 on event 超出了set/get/removeAttribute()方法的范围，而且很可能是jQuery方法attr()（未经测试且不那么好奇）。 参见章节：演示 - 来源：#btn0

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

  2. ⭐活动后属性：这是事件处理过时并且也被忽视，但因为它与其前身事件监听器相比有限。 就DOM元素而言，onclick属性和onclick属性是同一个属性。使用此而不是setAttribute()。 请参阅演示 - 来源：#btn1

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

  3. 事件监听器：此类事件处理采用方法add/removeEventListener("event", funcName)，是最标准，最新和首选的方式。 请参阅演示 - 来源：#btn2

    部分

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

    <小时/> 有关前两种类型的事件处理受到侮辱的详细信息，请出于技术原因阅读 DOM on-event handlers ，出于开发和设计原因，请阅读 Reddit article 。我个人对这个主题感到矛盾，因为事件处理程序并没有被弃用，诸如表达，行为，结构，语义等分离等概念并不像以前那么重要。

    < / LI>

    解决方案

    除了使用事件属性 ，我们可以使用onclick属性解析整个元素的htmlString。这可以使用：

    完成
    • innerHTML 会覆盖内容

    或

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

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

document.querySelector('${selectorOfTarget}').insertAdjacentHTML("${position}", htmlString);
    • “selelectorOfTarget”： 一个CSS字符串，表示我们希望在其中插入htmlString的DOM元素。
      • "div" .......：＆lt; div id =“ID”class =“CLASS”＆gt;＆lt; / div ＆gt ;
      • "#ID“.......：＆lt; div id =”ID“ class =”CLASS“＆gt;＆lt; / div＆gt;
      • ".CLASS" ....：＆lt; div id =“ID” class =“CLASS”＆gt;＆lt; / div＆gt;
      • #ID + ul ....：＆lt; div id =“ID” class =“CLASS”＆gt;＆lt; / div＆gt;             ＆LT;的 UL ＆GT;＆LT; /的 UL ＆GT;
      • #ID + ul li：＆lt; div id =“ID” class =“CLASS”＆gt;＆lt; / div＆gt;             ＆LT;的 UL ＆GT;＆LT;的利＆GT;＆LT; /的利＆GT;＆LT; /的 UL ＆GT;

    • “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'-->

相关问题
最新问题