<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>onclickメソッドとnew Function</title>
<style type="text/css">
</style>
</head>
<body>
<h2>onclickメソッドとnew Function</h2>
<p id="a01">ここをクリック</p>
<br />
<script type="text/javascript">
function getElementID(nm) {
return document.getElementById(nm);
}
var click = click || {};
click.click_id = (function() {
var that = {};
that.clickListener = function() {
alert("Hello world")
}
that.init = function(s) {
var targetElement = getElementID("a01");
targetElement.onclick = new Function('click.click_id.clickListener(' + ')');
}
return that;
})();
window.onload = function() {
click.click_id.init();
}
</script>
</body>
</html>
解説
onclickメソッドとnew Functionを使って、id=a01のp要素をクリックすると「Hello world」とアラートするコードを作った。new Functionは、こんな使い方ができる。なんか、すごく分かりづらいコードだけど、new Functionを使ったコードの一例として投稿しておきます。
注意
new Function('click.click_id.clickListener(' + ')');のclick.click_id.clickListener()がグローバル関数でないとエラーになる。つまり、window.onload = function() {}の中にclick.click_id.clickListener()があると動かない。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>onclickメソッドとnew Function</title>
<style type="text/css">
</style>
</head>
<body>
<h2>onclickメソッドとnew Function</h2>
<p id="a01">ここをクリック</p>
<br />
<script type="text/javascript">
function getElementID(nm) {
return document.getElementById(nm);
}
window.onload = function() {
var click = click || {};
click.click_id = (function() {
var that = {};
that.clickListener = function() {
alert("Hello world")
}
that.init = function(s) {
var targetElement = getElementID("a01");
targetElement.onclick = new Function('click.click_id.clickListener(' + ')');
}
return that;
})();
click.click_id.init();
}
</script>
</body>
</html>
追記
[JavaScript Dropdown Menu][1]のtinydropdown.jsを読んで勉強していたのですが、new Functionを使用した個所があったので、自分でもnew Functionを使ったコードを考えてみました。new Functionは分かりづらいコードになるだけな気がします。
参考文献
[JavaScript Dropdown Menu][1]
[1]:http://www.scriptiny.com/2011/04/javascript-dropdown-menu/