为什么我的按钮点击事件没有火？ [英] why doesn't my button click event fire?
问题描述
我是JavaScript的新手，我编写了这段代码。奇怪的是，如果我在一个方框中输入文字，然后按下按钮，我只能获得文本框的onChange
事件而不是按钮的onclick事件。但是，如果我按下按钮而不先输入文字，按钮点击事件
确实有效。怎么了？
< html>
< body>
< h3>按钮上的事件和文本框< / h3>
< input id =" myTextBox1"类型= QUOT;文本"的onChange = QUOT; doChange1（）" /< br />
< input id =" myTextBox2"类型= QUOT;文本"的onChange = QUOT; doChange2（）" /< br />
< input id =" myButton"类型= QUOT按钮"的onclick = QUOT; doClick（）" value ="点击我
/>
< script type =" text / javascript">
函数doChange1（e）
{
var val = document.getElementById（" myTextBox1"）。value;
alert（"你键入：" + val）;
}
函数doChange2（e）
{
var val = document.getElementById（" myTextBox2"）。value;
alert（" you typed：" + val）;
}
函数doClick（e）
{
var _num = prompt（"输入数字，100）;
alert（"你打字：" + _num）; //数字转换为字符串
自动
}
< / script>
< ; / body>
< / html>
I''m new to JavaScript and I wrote this code to play with. Oddly, if I
enter text in a box and then press the button, I only get the onChange
event for the text box and not the button''s onclick event. But if I
press the button without entering text first, the button click event
does work. What''s up?
<html>
<body>
<h3>Events on Buttons and Text Boxes</h3>
<input id="myTextBox1" type="text" onChange="doChange1()" /<br />
<input id="myTextBox2" type="text" onChange="doChange2()" /<br />
<input id="myButton" type="button" onclick="doClick()" value="Click me"
/>
<script type="text/javascript">
function doChange1(e)
{
var val = document.getElementById("myTextBox1").value;
alert("You typed: " + val);
}
function doChange2(e)
{
var val = document.getElementById("myTextBox2").value;
alert("You typed: " + val);
}
function doClick(e)
{
var _num = prompt("Enter a number", "100");
alert("You typed: " + _num); // number converted to string
automatically
}
</script>
</body>
</html>
推荐答案
Eric写道：
Eric wrote:
我是JavaScript的新手，我编写了这段代码。奇怪的是，如果我在一个方框中输入文字，然后按下按钮，我只能获得文本框的onChange
事件而不是按钮的onclick事件。但是，如果我按下按钮而不先输入文字，按钮点击事件
确实有效。怎么了？
< html>
< body>
< h3>按钮上的事件和文本框< / h3>
< input id =" myTextBox1"类型= QUOT;文本"的onChange = QUOT; doChange1（）" /< br />
< input id =" myTextBox2"类型= QUOT;文本"的onChange = QUOT; doChange2（）" /< br />
< input id =" myButton"类型= QUOT按钮"的onclick = QUOT; doClick（）" value ="点击我
/>
< script type =" text / javascript">
函数doChange1（e）
{
var val = document.getElementById（" myTextBox1"）。value;
alert（"你键入：" + val）;
}
函数doChange2（e）
{
var val = document.getElementById（" myTextBox2"）。value;
alert（" you typed：" + val）;
}
函数doClick（e）
{
var _num = prompt（"输入数字，100）;
alert（"你打字：" + _num）; //数字转换为字符串
自动
}
< / script>
< ; / body>
< / html>
I''m new to JavaScript and I wrote this code to play with. Oddly, if I
enter text in a box and then press the button, I only get the onChange
event for the text box and not the button''s onclick event. But if I
press the button without entering text first, the button click event
does work. What''s up?
<html>
<body>
<h3>Events on Buttons and Text Boxes</h3>
<input id="myTextBox1" type="text" onChange="doChange1()" /<br />
<input id="myTextBox2" type="text" onChange="doChange2()" /<br />
<input id="myButton" type="button" onclick="doClick()" value="Click me"
/>
<script type="text/javascript">
function doChange1(e)
{
var val = document.getElementById("myTextBox1").value;
alert("You typed: " + val);
}
function doChange2(e)
{
var val = document.getElementById("myTextBox2").value;
alert("You typed: " + val);
}
function doClick(e)
{
var _num = prompt("Enter a number", "100");
alert("You typed: " + _num); // number converted to string
automatically
}
</script>
</body>
</html>
好的，这里有几点 - 我会尽力保持这一点：
1.我不喜欢在这里看到任何出乎意料的行为。我在IE和Firefox上测试了你的代码
，按钮点击处理程序每次点击它都会被点击。
2你为什么要复制变更处理程序？更好的是：
< script type =" text / javascript">
函数doChange（btn）
{
var val = btn.value;
alert（" you typed：" + val）;
}
< / script>
然后
< input id =" myTextBox1"类型= QUOT;文本"的onChange = QUOT; doChange（本）" /< br />
< input id =" myTextBox2"类型= QUOT;文本"的onChange = QUOT; doChange（本）" /< br />
当然，在这种情况下，你的处理程序没有得到传递给它的事件对象
。但无论如何你还没有使用它。很快你就会知道
需要了解事件对象和不引人注目的事件处理程序，但
这个帖子太过牵扯。查看
http://www.quirksmode.org/js/ introevents.html 获取概述。
3.您的脚本标签应该真正进入您的头部标签。实际上，
你的脚本应该放在一个单独的文件中。对于一个简单的例子
这样没什么大不了的，但是对于一个更大的项目来说，以这种方式跟踪你的代码非常重要。 。一旦你开始在你的HTML正文中使用
胡椒< scripttags，你很快就会失去
能够跟踪其中的内容。
4.在你的onClick处理程序中，你应该明白_num总是一个
字符串（无论它是否包含数字），它绝不是一个数字。如果你需要一个实际的数字，你可以用数学，你需要打电话给
parseInt（_num）。
Ok, couple of points here - and I''ll try to keep this focused:
1. I don''t see any behavior here that''s unexpected. I tested your code
on IE and Firefox and the button click handler gets fired every time I
click it.
2. Why do you duplicate the change handler? Much better would be:
<script type="text/javascript">
function doChange(btn)
{
var val = btn.value;
alert("You typed: " + val);
}
</script>
then
<input id="myTextBox1" type="text" onChange="doChange(this)" /<br />
<input id="myTextBox2" type="text" onChange="doChange(this)" /<br />
Of course, in that case, your handler doesn''t get an Event object
passed to it. But you weren''t using it anyway. Pretty soon you''ll
need to learn about Event objects and unobtrusive event handlers, but
that''s too involved for this post. Check out
http://www.quirksmode.org/js/introevents.html for an overview.
3. Your script tags should really go inside your head tags. Actually,
your scripts should really go in a separate file. For a simple example
like this it isn''t a big deal, but for a larger project it''s pretty
important to keep track of your code in this way. Once you start
peppering <scripttags in the body of your HTML you quickly lose the
ability to keep track of what''s where.
4. In your onClick handler, you should understand that _num is always a
string (whether it contains digits or not), it''s never a number. If
you wanted an actual number you could do math with, you need to call
parseInt(_num).
Ericaécrit：
Eric a écrit :
我是JavaScript的新手，我编写了这段代码。奇怪的是，如果我在一个方框中输入文字，然后按下按钮，我只能获得文本框的onChange
事件而不是按钮的onclick事件。但是，如果我按下按钮而不先输入文字，按钮点击事件
确实有效。这是怎么回事？
I''m new to JavaScript and I wrote this code to play with. Oddly, if I
enter text in a box and then press the button, I only get the onChange
event for the text box and not the button''s onclick event. But if I
press the button without entering text first, the button click event
does work. What''s up?
你必须不时地说：
函数doChange2（e）
{
var val = document.getElementById（" myTextBox2"）。value;
setTimeout（function（）{alert（" you typed：" + val）; }，200）;
}
对我来说很好
但可能需要比200毫秒更长的计时器
（取决于处理器的容量？）
-
Stephane Moriaux et son（moins）vieuxMacdéjàdépassé
Stephane Moriaux和他的（旧）Mac已经过时
You have to let time to time :
function doChange2(e)
{
var val = document.getElementById("myTextBox2").value;
setTimeout(function(){alert("You typed: " + val);},200);
}
fine for me
but could need a longer timer than 200 miliseconds
(depends of processor''s capacity ?)
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
ASM写道：
ASM wrote:
Ericaécrit：
Eric a écrit :
我是JavaScript的新手，我编写了这段代码。奇怪的是，如果我在一个方框中输入文字，然后按下按钮，我只能获得文本框的onChange
事件而不是按钮的onclick事件。但是，如果我按下按钮而不先输入文字，按钮点击事件
确实有效。这是怎么回事？
I''m new to JavaScript and I wrote this code to play with. Oddly, if I
enter text in a box and then press the button, I only get the onChange
event for the text box and not the button''s onclick event. But if I
press the button without entering text first, the button click event
does work. What''s up?
你必须不时地说：
函数doChange2（e）
{
var val = document.getElementById（" myTextBox2"）。value;
setTimeout（function（）{alert（" you typed：" + val）; }，200）;
}
You have to let time to time :
function doChange2(e)
{
var val = document.getElementById("myTextBox2").value;
setTimeout(function(){alert("You typed: " + val);},200);
}
非常好 - 这在IE上修复了它。它看起来确实在FireFox上运行好了没有这个但是我没能在FireFox上测试它。
但为什么我们需要一个时间延迟/超时在这里？这对我来说没有意义
。如果我们动态执行
构造的代码，或者没有完全下载到浏览器的代码，我可以理解延迟，
但这是一个简单的页面？
Eric
Very good - this fixed it on IE. It seems it did work OK on FireFox
without this but I wasn''t able to test it on FireFox earlier.
But why do we need a time delay/timeout here? This doesn''t make sense
to me. I could understand a delay if we were executing dynamically
constucted code, or code that wasn''t fully downloaded to the browser,
but this is a simple page?
Eric
这篇关于为什么我的按钮点击事件没有火？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
