js中的alert的总结

最新推荐文章于 2025-11-26 16:15:49 发布

原创最新推荐文章于 2025-11-26 16:15:49 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了使用alert函数时对后台JS执行的影响，指出其会导致执行阻塞，并停止监听键盘事件（除enter外）。通过代码实例展示了如何利用普通事件替代键盘事件，以实现预期功能。

1.alert会阻塞掉后台js执行，同时会停止监听键盘事件，除了enter外。
2.从网上找到的资料来看，对所有的浏览器，alert都会阻塞掉js执行
3.利用js模拟事件会出现问题，创建KeyboardEvent事件，最终所产生的事件的keycode都是0，无论在初始化的时候赋什么值。可以使用普通事件来实现。现放一个别人实现的代码测试：下面是html代码。


<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<meta charset="utf-8" />
<title>Fix them keys, por favor</title>
</head>
<body>
  <header>
    <h1>Keydown testing</h1>
    <hr>
  </header>
  <section id="buttonville">
    <h2>Trigger through generic Event object</h2>
    <ul id="buttons-generic">
      <li>
        <button data-key="37">Left</button>
        <button data-key="39">Right</button>
        <button data-key="38">Up</button>
        <button data-key="40">Down</button>
        <button data-key="13">Enter</button>
        <button data-key="27">Esc</button>
        <button data-key="65">A</button>
      </li>
    </ul>
    <h2>Trigger through KeyboardEvent</h2>
    <ul id="buttons-keyboard">
      <li>
        <button data-key="37">Left</button>
        <button data-key="39">Right</button>
        <button data-key="38">Up</button>
        <button data-key="40">Down</button>
        <button data-key="13">Enter</button>
        <button data-key="27">Esc</button>
        <button data-key="65">A</button>
      </li>
    </ul>
    <hr>
  </section>
  <section id="tracer">
    <ul class="logs"></ul>
  </section>
</body>
</html>

css代码如下

ul.logs {
  list-style:none;
}

ul.logs > li {
  background-color:#FFFFCC;
  padding:5px;
  border-bottom:solid 1px #CCC;
}

js代码如下：


function __triggerKeyboardEvent(el, keyCode)
{
    var eventObj = document.createEventObject ?
        document.createEventObject() : document.createEvent("Events");

    if(eventObj.initEvent){
      eventObj.initEvent("keydown", true, true);
    }

    eventObj.keyCode = keyCode;
    eventObj.which = keyCode;

    el.dispatchEvent ? el.dispatchEvent(eventObj) : el.fireEvent("onkeydown", eventObj); 

} 

function traceEvent(e){
    $(".logs").prepend(jQuery("<li>").html(
      "Key = " + e.keyCode
    ).fadeIn());

    console.log(e);
}

function triggerKeyboardEvent(el, keyCode){
    var keyboardEvent = document.createEvent("KeyboardEvent");

    var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";


    keyboardEvent[initMethod](
                       "keydown",
                        true,      // bubbles oOooOOo0
                        true,      // cancelable   
                        window,    // view
                        false,     // ctrlKeyArg
                        false,     // altKeyArg
                        false,     // shiftKeyArg
                        false,     // metaKeyArg
                        keyCode,  
                        0          // charCode   
    );

    el.dispatchEvent(keyboardEvent); 
}

$(document).ready(function(){

  document.addEventListener("keydown", function(e){
    traceEvent(e);
  });

  $("#buttons-generic").find("button").click(function(){
    __triggerKeyboardEvent(document.body, parseInt($(this).attr("data-key")));
  });

  $("#buttons-keyboard").find("button").click(function(){
    triggerKeyboardEvent(document.body, parseInt($(this).attr("data-key")));
  });

  /*
  setInterval(function(){
    __triggerKeyboardEvent(document.body, 13);
  }, 5000);
  */
});