Javascript 对象方法计算函数
Javascript object methods evaluate functions
首先,我是 javascript 的新手。
我的问题是如何向按钮添加事件侦听器并从 myObj 脚本调用该函数。我尝试 google 但我不知道它的关键字是什么。谢谢
<div id="my-btn"></div>
<script>
myObj.button('my-btn',{
onClick: function() {
alert('Button is clicked !');
},
onCancel: function() {
alert('You cancel the process !');
}
});
</script>
还有我的对象
var myObj = {
button: function(btnId, methods)
{
var btn = document.getElementById(btnId);
for (var method in methods)
{
if (method.toLowerCase() == 'onclick')
{
//btn.addEventListener('click', function(e) {
//}
// i want to add listener
// and call the function "onClick"
}
}
// render button
btn.innerHTML = '<input type="button" value="My Button"></button>';
}
}
谢谢你的建议。
这是一种方法。
<html>
<head></head>
<body>
<div id="my-btn"></div>
</body>
<script>
const myObj = {
button: (btnId, methods) => {
const btn = document.getElementById(btnId);
for (let method in methods) {
const nameLower = method.toLowerCase();
if (nameLower.startsWith('on')) {
btn.addEventListener(nameLower.substr(2), function(e) {
methods[method]();
});
}
}
// render button
btn.innerHTML = '<input type="button" value="My Button"></button>';
}
};
myObj.button('my-btn',{
onClick: () => alert('Button is clicked !'),
onCancel: () => alert('You cancel the process !')
});
</script>
</html>
我们可以通过将函数名称转换为小写字母并去除 "on"
前缀来将函数名称映射到它们的事件。所以 onClick
变成 click
。您可以通过在 myObj.button
.
的调用中使用标准事件名称来简化事情
首先遍历函数,映射名称并添加事件侦听器。在事件侦听器中,我们所做的就是调用参数中提供的函数。
首先,我是 javascript 的新手。 我的问题是如何向按钮添加事件侦听器并从 myObj 脚本调用该函数。我尝试 google 但我不知道它的关键字是什么。谢谢
<div id="my-btn"></div>
<script>
myObj.button('my-btn',{
onClick: function() {
alert('Button is clicked !');
},
onCancel: function() {
alert('You cancel the process !');
}
});
</script>
还有我的对象
var myObj = {
button: function(btnId, methods)
{
var btn = document.getElementById(btnId);
for (var method in methods)
{
if (method.toLowerCase() == 'onclick')
{
//btn.addEventListener('click', function(e) {
//}
// i want to add listener
// and call the function "onClick"
}
}
// render button
btn.innerHTML = '<input type="button" value="My Button"></button>';
}
}
谢谢你的建议。
这是一种方法。
<html>
<head></head>
<body>
<div id="my-btn"></div>
</body>
<script>
const myObj = {
button: (btnId, methods) => {
const btn = document.getElementById(btnId);
for (let method in methods) {
const nameLower = method.toLowerCase();
if (nameLower.startsWith('on')) {
btn.addEventListener(nameLower.substr(2), function(e) {
methods[method]();
});
}
}
// render button
btn.innerHTML = '<input type="button" value="My Button"></button>';
}
};
myObj.button('my-btn',{
onClick: () => alert('Button is clicked !'),
onCancel: () => alert('You cancel the process !')
});
</script>
</html>
我们可以通过将函数名称转换为小写字母并去除 "on"
前缀来将函数名称映射到它们的事件。所以 onClick
变成 click
。您可以通过在 myObj.button
.
首先遍历函数,映射名称并添加事件侦听器。在事件侦听器中,我们所做的就是调用参数中提供的函数。