如何在一个HTML文档中使用多个javascript事件？_Javascript_Events_Mouseevent_Keyevent

如何在一个HTML文档中使用多个javascript事件？

javascript events

如何在一个HTML文档中使用多个javascript事件？,javascript,events,mouseevent,keyevent,Javascript,Events,Mouseevent,Keyevent,我有一个包含两个javascript事件的页面，一个由鼠标触发，另一个由键盘触发。当我加载页面时，我可以让一个或另一个工作，但不能两者都工作。如果我先按一个键，该函数将运行，但我无法执行鼠标单击或其他按键操作。反之亦然。我知道jQuery使这变得更容易，但我不希望让我的用户为每个页面下载它，所以我尝试用老式的方式。我已经阅读了尽可能多的关于javascript事件的内容，但是我被这篇文章困住了事先谢谢你，布拉德。注意：在Chrome和Safari中，我得到了上述结果，Firefox和Oper

我有一个包含两个javascript事件的页面，一个由鼠标触发，另一个由键盘触发。当我加载页面时，我可以让一个或另一个工作，但不能两者都工作。如果我先按一个键，该函数将运行，但我无法执行鼠标单击或其他按键操作。反之亦然。我知道jQuery使这变得更容易，但我不希望让我的用户为每个页面下载它，所以我尝试用老式的方式。我已经阅读了尽可能多的关于javascript事件的内容，但是我被这篇文章困住了

事先谢谢你，布拉德。注意：在Chrome和Safari中，我得到了上述结果，Firefox和Opera将只使用击键功能

<html>
<head>
<script>
function create(event) {
var x=event.clientX-14;
var y=event.clientY-33;
var output = document.write("<p id=\"text\" style=\"background-color: white; position:    absolute; top:" + y + "px;left:" + x + "px;\";>You're Text, your M@jesty!</p>");
}
function type(event)
{
var letter_in = event.keyCode;
var letter = String.fromCharCode(letter_in);
//var shift = event.shiftKey;
//if (shift === false) {letter = String.toLowerCase;}
document.write(letter);
}
</script>
</head>

<body onmousedown="create(event)" onkeydown="type(event)">

</body>
</html>


函数创建（事件）{
var x=event.clientX-14；
变量y=event.clientY-33；
var output=document.write（“您是文本，您的M@jesty！”；
}
功能类型（事件）
{
var字母_in=event.keyCode；
var letter=String.fromCharCode（中的字母_）；
//var shift=event.shiftKey；
//if（shift==false）{letter=String.toLowerCase；}
文件。写（信）；
}

这是因为您正在使用

document.write（）

清除页面上的所有内容，包括处理程序

加载文档后调用

document.write（）

，会隐式调用

document.open（）

，从而清除文档

因此，要解决这个问题，您需要使用类似

innerHTML

的方法来仅更新页面中元素的内容

见：


函数创建（事件）{
var x=event.clientX-14；
变量y=event.clientY-33；
var output=document.getElementById（“foo”）.innerHTML=“您是文本，您的M@jesty！“；
}
功能类型（事件）
{
var字母_in=event.keyCode；
var letter=String.fromCharCode（中的字母_）；
//var shift=event.shiftKey；
//if（shift==false）{letter=String.toLowerCase；}
document.getElementById（“foo”）.innerHTML=字母；
}

您应该认真研究使用jQuery。@BenM：“我知道jQuery使这更容易，但我不希望让我的用户为每个页面下载它。”。OP想要做的没有jQuery是很容易的。对不起，错过了。这里很晚了！非常感谢！这正是我想要的；我取消了type（）函数中的行注释，以创建小写字母。它可以用shift键创建大写字母，但当不按下shift键时，它不会创建小写字母，而是输出“undefined”，您知道这一点吗？再次感谢。

<html>
  <head>

  </head>

  <body onmousedown="create(event)" onkeydown="type(event)">
    <div id="foo"></div>

    <script>
      function create(event) {
        var x=event.clientX-14;
        var y=event.clientY-33;
        var output = document.getElementById("foo").innerHTML = "<p id=\"text\" style=\"background-color: white; position:    absolute; top:" + y + "px;left:" + x + "px;\";>You're Text, your M@jesty!</p>";
      }
          function type(event)
          {
            var letter_in = event.keyCode;
            var letter = String.fromCharCode(letter_in);
            //var shift = event.shiftKey;
            //if (shift === false) {letter = String.toLowerCase;}
            document.getElementById("foo").innerHTML = letter;
          }
    </script>
  </body>
</html>