标签: javascript-events

我遇到window.onload和document.onload事件的问题.我读到的所有内容都告诉我,在DOM完全加载其所有资源之前,这些内容不会触发,似乎这对我来说不会发生:

我在Chrome 4.1.249.1036(41514)和IE 8.0.7600.16385中尝试了以下简单页面,结果相同:两者都显示消息"It failed!",表示myParagraph未加载(因此DOM似乎不完整).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script type="text/javascript">
            window.onload = doThis();
            // document.onload gives the same result

            function doThis() {
                if (document.getElementById("myParagraph")) {
                    alert("It worked!");
                } else {
                    alert("It failed!");
                }
            }
        </script>
    </head>

    <body>
        <p id="myParagraph">Nothing is here.</p>
    </body>
</html>

我在外部.js文件中使用比这更复杂的脚本,但这说明了问题.我可以让window.onload设置一个计时器半秒来运行doThis(),但这似乎是一个不优雅的解决方案,并没有回答为什么window.onload似乎没有做什么的问题每个人都这样说.另一个解决方案是设置一个定时器,用于检查DOM是否已加载,如果不是,它将在半秒后调用自身(因此它将继续检查,直到加载DOM),但这对我来说似乎过于复杂.是否有更合适的事件要使用？

pg.myfunc = function(){
    var i = 1, j = 2;
    this.selected = 1;
    xx.newObject = this.parentElement;

...

在xx.newObject = this.parentElement;做什么？

我一直在使用.bind('input')jQuery,因为它似乎是检测他们是否复制/粘贴到框中的最佳解决方案,或者只是键入然后从浏览器中选择下拉菜单.我和其他人的问题change()是,至少对我来说,它们只会在用户对盒子的焦点丢失时触发.

我的问题是.bind('input')在IE8中对我不起作用,但在FF4/5中有效.我一直试图寻找替代方案,但已经出现了问题.有什么建议吗？

我有很多以链接开头的Backbone.js动作

<a href="#makeCookies">Make Cookies</a>

和Backbone.View事件哈希一样

'click [href=#makeCookies]': 'makeCookies'

和一个事件处理函数

makeCookies: function (event) {
    event.preventDefault();
    //code to make cookies
    //I have no intention of ever using #makeCookies in the URL,
    //it's just there so I can wire up the event handler properly
}

是否有一种干净的方法来避免这种样板event.preventDefault().我想过只使用<button>标签而不是<a>标签,但这似乎不合适.

在将元素添加到DOM后,有没有人知道如何在元素的javascript中触发事件？

一般的想法是这样的:

var elem = document.createElement('div');
elem.addEventListener('ON_ADD_TO_BODY', function(){console.log(elem.parentNode)});
//... LATER ON ...
parentElemInBody.appendChild(elem); // <- Event is triggered here after append

在将元素添加到DOM之前,有些函数不应被触发,因此在添加元素之前延迟执行是有意义的.

有没有办法在没有明确需要稍后调用它们的情况下执行此操作,或者我应该执行一些包含a setTimeout和检查以查看元素是否已添加到DOM的hack ？

我有一个代码在init上使用$ scope.$,然后在函数中,所以代码执行多次.如果在再次绑定它之前我怎么能解除绑定.我试过$ scope.$ off但是没有这样的功能,docs.angularjs.org/api对$ on一无所知.我正在使用角度1.0.6.

出于某种原因,当将参数传递给匿名函数时,事件侦听器会为每个元素触发两次.即,元素上的click事件el将注册一次,因此触发一次.

el.addEventListener("click", handle, false);
el.addEventListener("click", handle, false);

但是如果我想将自己的参数传递给它,它将会注册并触发两次.

el.addEventListener("click", function() { handle(event, myArgument); }, false);
el.addEventListener("click", function() { handle(event, myArgument); }, false);

问题是为什么以及解决方案是什么？

我在其他地方寻找,似乎无法找到解决方案或理解为什么会出现这个问题.我尝试在如何将参数传递给addEventListener中传递的侦听器函数中实现解决方案？但他们没有帮助 -

我做了基本的匿名函数或闭包,然后是更高级的版本,如下所示,但确实有效.

我不明白为什么传递没有参数导致元素事件注册一次并传递参数导致元素事件注册两次.

这是代码:

<html>
    <head>
        <script type="text/javascript">
            var handle_2 = function(evt, type) {
                var test;
                switch (type) {
                    case "focus": 
                        console.log(evt.target.value);
                        break;
                    case "click":
                        console.log(evt.target.id + " was clicked");
                        break;
                    default: console.log("no type found");
                }
            };

            window.onload = function() {
                var textbox = document.getElementById("t1");
                var button = document.getElementById("btn");
                textbox.value …

我有一个Chrome扩展程序需要产生类似人类的鼠标和键盘行为(具体来说,生成具有isTrusted值的事件true).除了滚动chrome.debuggerAPI 之外,我可以做我需要的一切.

但似乎该Window.scroll()方法足以达到Chrome 52和Firefox 48.0a1的目的.通过将事件侦听器附加到页面可以观察到这一点,如下所示:

document.addEventListener("scroll", function (event) { 
    console.log("event trusted? " + event.isTrusted);
});

然后window.scroll(0, 10);在开发者控制台中运行类似的东西.这将登录event trusted? true到开发人员控制台.

我的问题是:为什么会这样？由于滚动事件是由脚本明确生成的,因此isTrusted属性不应该是false这种情况吗？

我真的想做一些简单的事情.单击某个元素,我触发另一个元素的单击,但我在我的控制台上得到以下错误.

Uncaught RangeError: Maximum call stack size exceeded

我的代码如下;

$('body').on('click', '.actual-click-element', function(event) { 
    $('.trigger-click-element').trigger('click');
    event.preventDefault(); 
});

我想知道为什么我得到这个错误,我不知道这是如何递归的.有任何想法吗？

浏览器读取并运行JavaScript文件,文件中写入的同步任务立即变为执行中任务,setTimeout回调变为macrotasks,并且promise回调变为微任务.一切都是好的.

在我见面之前,我以为我掌握了JavaScript事件循环requestAnimationFrame.

@TJ Crowder为我提供了以下代码片段.

const messages = [];
setTimeout(() => {
  // Schedule a microtask
  Promise.resolve().then(() => {
    log("microtask");
  });
  
  // Schedule animation frame callback
  requestAnimationFrame(() => {
    log("requestAnimationFrame");
  });
  
  // Schedule a macrotask
  setTimeout(() => {
    log("macrotask");
  }, 0);
  
  // Schedule a callback to dump the messages
  setTimeout(() => {
    messages.forEach(msg => {
      console.log(msg);
    });
  }, 200);

  // Busy-wait for a 10th of a second; the browser will be eager to repaint when this task completes
  const …