gpt4 book ai didi

JavaScript 附加事件

转载 作者:搜寻专家 更新时间:2023-11-01 04:44:59 25 4
gpt4 key购买 nike

我看到你可以附加这样的事件

<button type="button" id="myButton" onclick="myFunction()">

如果没有 "onclick=",你能做同样的事情吗,比如:

document.getElementById('myButton'). //and here attach the event on click to myFunction

我试图将 JavaScript 和 HTML 分开。

最佳答案

它类似于 onclick方法,实际上使用相同的事件处理程序,但已从 HTML 中删除:

document.getElementById('myButton').onclick = function(){
// do stuff
myFunction();
}

如果您没有 id在您还可以使用的元素上:

var inputs = document.getElementsByTagName('input');

for (var i=0, len=inputs.length; i<len; i++){
if (inputs[i].type == 'text'){
// assuming you want to affect text-inputs in this case
inputs[i].onclick = function(){
// do stuff. In here 'this' refers to inputs[i] element
myFunction();
};
}
}

另一种方法,使用 Array.prototype.forEach() , 包含使用 Array.prototype.slice() 创建的元素数组和 document.querySelectorAll() :

[].forEach.call(document.querySelector('input[type="text"]', yourFunctionName);

这将执行 yourFunctionName()每个函数 <input />元素,属于 type="text" , 由 document.querySelectorAll() 返回通过那个<input />元素作为 this 进入函数.

你也可以使用 addEventListener()在这种情况下:

document.getElementById('myButton').addEventListener('click', myFunction, false);

同样在这种情况下,使用 document.querySelector() (与 document.querySelectorAll() 相反),它使用 CSS 符号返回与传入的选择器匹配的第一个元素:

// gets the element with an 'id' of 'myButton', binding the 'click' event-handler:
document.querySelector('#myButton').addEventListener('click', myFunction, false);

或者:

// gets the first of the <input> elements, binding the 'click' event-handler:
document.querySelector('input').addEventListener('click', myFunction, false);

引用资料:

关于JavaScript 附加事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10335343/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com