Question

我想使用带有原型的javascript向按钮添加一个不显眼的事件处理程序。我在下面写了一个非常简单的HTML示例，其中有两个按钮。第一个按钮在HTML中添加了onclick。第二个按钮的ID为＃34; googleButton＆＃34;应该在我的javascript中附加一个事件处理程序。我尝试了许多不同形式的事件处理程序，并且所有这些形式都抛出了错误。我可以在jQuery中轻松地使用这种东西，也许我错过了关于原型语法的一些东西？

这是HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Assignment 10 - Part 1</title>
        <script src="./js/prototype.js" type="text/javascript"></script>
        <script src="./js/scriptaculous/scriptaculous.js?load=effects,controls" type="text/javascript"></script>
        <script src="./js/assignment10p1.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <fieldset>
            <legend>City Search</legend>
            <label for="cityName1">Enter a city name: </label>
            <input type="text" id="cityName1">
            <input type="button" value="Google City" onclick='googleSearch("cityName1")'>
            <input id="googleButton" type="button" value="Google City">
            <div id="cityAutoComplete" class="autocomplete"></div>
        </fieldset>   
    </body>
</html>

这是javascript：

var cities = ["Aachen", "Aalborg", "Aarhus", "Abbeville", "Abbot", "Abbotsford",
              "Aberdeen", "Abernathy", "Acadia", "Acampo", "Acra", "Adams", "Addison",
              "Addy", "Adrian", "Agate", "Agua Caliente", "Aiken", "Ainsworth",
              "Akron", "Alamo", "Alba", "Albany", "Alberta", "Alden", "Alta", "Amboy",
              "Amherst", "Anchorage", "Anderson", "Andover", "Appleton", "Arcadia", 
              "Ardmore", "Argyle", "Arlington", "Arthur", "Ashburn", "Ashland", 
              "Ashton", "Athens", "Atlanta", "Auburn", "Aurora", "Austin", "Aztec",
              "Bagwell", "Bailey", "Bainbridge Island", "Baker", "Bakersfield", 
              "Baldwin", "Ballard", "Baltic", "Bangkok", "Banner", "Barcelona",
              "Barlow", "Barnesville", "Barnum", "Barrington", "Bartlett", "Barton",
              "Batesville", "Bath", "Battle Creek", "Baxter", "Bay City", "Beach", 
              "Bear Creek", "Beaumont", "Beaver", "Bedford", "Belcourt", "Belfast",
              "Belgium", "Bellingham", "Bellevue", "Belmont", "Belvidere", "Benson",
              "Berkley", "Berlin", "Bethany", "Beverly", "Big Bear", "Biggs", 
              "Billings", "Bingham", "Birmingham", "Bishop", "Blackfoot", "Blain",
              "Bloomfield", "Bloomington", "Blue Springs", "Boggs", 
              "Boiling Springs", "Boise", "Bolton", "Boston", "Bradford", "Bremerton",
              "Brooklyn", "Brooks", "Brunswick", "Brussels", "Buffalo", "Burbank",
              "Burlington", "Butte", "Byron"];

function googleSearch(id) {
    var city = $(id).value;
    window.location.href="http://www.google.com/search?q=" + city;
}

document.observe("dom:loaded", function() {
    new Autocompleter.Local("cityName1", "cityAutoComplete", cities);
});

// This should add the event handler
$('googleButton').observe('click', googleSearch('cityName1'));

这是firebug给出的错误：

TypeError: $(...) is null
$('googleButton').observe('click', googleSearch('cityName1'));

对不起，这是一个转贴，我删除了之前的问题，认为我发现了问题，但它仍然存在。其他人评论说我需要这样做：

$('#googleButton').observe('click', googleSearch('cityName1'));

但那是jQuery的语法，而不是原型。另一个人说它应该工作，这是我所听到的。除了上面加载的库之外，这就是完整的例子。

Answer 1

有两个问题：

首先，您错误地将处理程序连接起来。这段代码：

$('googleButton').observe('click', googleSearch('cityName1'));

立即

调用 googleSearch，传递'cityName1'，并将返回值传递给observe，完全按照foo(bar())的方式传递1}} 调用 bar并将其返回值传递给foo。那应该是：

$('googleButton').observe('click', function() {
    googleSearch('cityName1');
});

...或

$('googleButton').observe('click', googleSearch.curry('cityName1'));

...基本上可以做到，但使用Prototype＆＃39; s Function#curry。

使用其中任何一个，我们会将函数传递给observe，当被调用时，会调用googleSearch传递'cityName1'。

其次，脚本在HTML中遇到时会立即运行（除非您使用defer或async属性来修改行为。由于脚本位于HTML中元素的标记之上，因此当您尝试访问该元素时，该元素尚不存在。

如果您将该代码移到其上方的dom:loaded回调中，它应该有效。

或者，您可以在结束</body>代码as is usually the recommendation之前将脚本移动到HTML的末尾。然后你可以取消dom:loaded;脚本上方标记定义的所有元素在运行时都存在。

原型javascript不显眼的点击事件添加到按钮

1 个答案: