原型JavaScript不引人注意的点击事件已添加到按钮

Question

I want to add an unobtrusive event handler to a button using javascript with prototype. 我想使用带有原型的javascript向按钮添加一个简单的事件处理程序。 I'm written a very simple HTML example below where there are two buttons. 我在下面写了一个非常简单的HTML示例，其中有两个按钮。 The first button has the onclick added to it within the HTML. 第一个按钮在HTML中添加了onclick。 The second button has the id "googleButton" that should have an event handler attached to it in my javascript. 第二个按钮的ID为“ googleButton”，应该在我的javascript中附加一个事件处理程序。 I have tried many different forms of attaching the event handler and all of them are throwing errors. 我尝试了许多不同形式的附加事件处理程序，所有这些均引发错误。 I can get this kind of thing to work very easily in jQuery, maybe I'm missing something about the prototype syntax? 我可以使这种事情在jQuery中非常容易地工作，也许我缺少有关原型语法的内容？

Here's the HTML: 这是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>

Here's the javascript: 这是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'));

Here's the error firebug gives: 这是firebug给出的错误：

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

Sorry this is a repost, I deleted the previous question thinking I'd found the problem, but it persists. 抱歉，这是一个转贴，我以为我已经找到问题了，所以删除了先前的问题，但是问题仍然存在。 Others had commented that I needed to do it like this: 其他人则评论说我需要这样做：

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

But that's jQuery syntax, not prototype. 但这是jQuery语法，而不是原型。 Another person said it should be working and that's all I heard. 另一个人说应该正常工作，这就是我所听到的。 Other than the libraries loaded above this is literally the full example. 除了上面加载的库以外，这实际上是完整的示例。

Answer 1

There are two issues: 有两个问题：

First, you're hooking up the handler wrong. 首先，您将处理程序连接错了。 This code: 这段代码：

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

calls googleSearch immediately, passing in 'cityName1' , and passes the return value into observe , exactly the way foo(bar()) calls bar and passes its return value into foo . 立即调用 googleSearch并传入'cityName1' ，然后将返回值传递给observe ，这与foo(bar()) 调用 bar并将其返回值传递给foo的方式完全相同。 That should be: 应该是：

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

...or ...要么

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

...which basically does the above, but using Prototype's Function#curry . ...基本上可以完成上述操作，但是要使用Prototype的Function#curry 。

With either of those, we pass a function into observe that, when called, will call googleSearch passing in 'cityName1' . 无论使用哪种方法，我们都将一个函数传递给observe ，该函数在被调用时将调用googleSearch并传递'cityName1' 。

Second, scripts run immediately when they're encountered in the HTML (unless you use the defer or async attributes, which modify the behavior). 其次，脚本在HTML中遇到时立即运行（除非您使用defer或async属性，这些属性会修改行为）。 Since the script is above the markup for the element in the HTML, the element doesn't exist yet when you're trying to get access to it. 由于脚本位于HTML中元素标记的上方，因此当您尝试访问该元素时该元素尚不存在。

If you move that code into your dom:loaded callback above it, it should work. 如果将代码移到其上方的dom:loaded回调中，则它应该可以工作。

Alternately, you can just move your scripts to the end of the HTML, just before the closing </body> tag, as is usually the recommendation . 或者，您可以将脚本移动到HTML的末尾，即在</body>标记之前，通常是建议。 Then you can do away with dom:loaded ; 然后您可以取消dom:loaded ; all of the elements defined by the markup above the script exist by the time it runs. 脚本上方的标记所定义的所有元素在运行时就已经存在。

原型JavaScript不引人注意的点击事件已添加到按钮

问题描述

1 个解决方案

解决方案1
5 已采纳 2014-04-07 07:10:55

原型JavaScript不引人注意的点击事件已添加到按钮

问题描述

1 个解决方案

解决方案1 5 已采纳 2014-04-07 07:10:55

解决方案1
5 已采纳 2014-04-07 07:10:55