标签: javascript-events

所以我有这段代码循环遍历数组并加载图像并在加载图像时通知.

for (var i = 0; i < arr.length; i++) {                
    var imageObj = new Image();
    imageObj.src = url[i];
    imageObj.onload= (function(i){
                return function(){
                    console.log(i, 'loaded');
                }
            })(i);

}

它工作正常.但是,如果我尝试这样做,它将无法正常工作

imageObj.addEventListener('onload', function(
    console.log(i, 'loaded');
}, false);

问题是什么？在这种情况下,我有什么方法可以避免使用闭包吗？

这是一个奇怪的,我很震惊,我从来没有注意到它.它的工作原理如下,如果你的鼠标静止并且div以编程方式在鼠标下方移动,则不会在chrome/safari中触发mouseover事件 - 同样适用于mouseout.当然,如果在鼠标移动到鼠标下方后稍微移动鼠标,它将按预期工作.

我在jsFiddle上创建了一个demo.只需让div在你的鼠标下振荡,在firefox中运行良好,而不是在chrome或safari中运行 - 还没有在ie中测试.

我倾向于这个解决方案...基本上使用以下方法滚动我自己的mouseenter和mouseleave事件:

if (mouseX > divLeft && mouseX < divRight &&
    mouseY > divTop && mouseY < divBottom){
    // mouse is inside div
}

我说mouseenter并离开,因为这种方法没有冒泡

我想知道是否有其他人对此有过想法...我觉得有一个简单的方法可以解决它,但到目前为止谷歌还没有提出任何建议.

我理解Live和Bind之间的区别,但是什么时候应该使用.bind()而不是'标准'事件方法,如下所示.

这两个呼叫的工作方式是否有任何关键差异？

$('.clickme').bind('click', function() {
  // Handler called.
});

$('.clickme').click(function() {
  // Handler called.
});

我做了一个非常简单的按钮点击事件处理程序,我希望<p>在点击按钮时附加元素,你可以在这里查看我的代码:

<div id="wrapper">
    <input id="search_btn" value="Search" type="button">
</div>

$("#search_btn").click(function(){
    $("#wrapper").append("<p id='other'>I am here</p>");
});

我有两个问题要问:

1,为什么我的.append()工作没有像我预期的那样(这是附加<p>元素)

2.在jQuery中,如何检查是否已经附加了一些元素？例如,如何检查是否<p id="other">已经附加在我的情况下？

--------------------更新----------------------------- --------------

请在此处查看我的更新代码.

所以,只有第二个问题仍然存在......

如果我有下面的代码,如果多次按下新的串行按钮,类serial的文本框将被多次绑定到事件.

即使多次调用bind方法,这会阻碍性能还是jQuery只注册事件一次？

$(document).ready(function () {

    MonitorSerialTextBoxes();

    $('#newSerial').click(function () {

       $.tmpl("productTemplate", mymodel).insertAfter($(".entry").last());
       MonitorSerialTextBoxes();

    });

    function MonitorSerialTextBoxes() {
      $('.serial').each(function () {
         // Save current value of element
         $(this).data('oldVal', $(this).val());

         // Look for changes in the value
         $(this).bind("propertychange keyup input paste", function (event) {

         // If value has changed...
         if ($(this).data('oldVal') != $(this).val() && $(this).val().length == 10) {

             // Updated stored value
             $(this).data('oldVal', $(this).val());

             // Do action
         }
      });
    }

});

更新:我相信它会将下面的代码添加到MonitorSerialTextBoxes函数修复thiings？

$('.serial').unbind("propertychange keyup input paste");

来自jQuery文档:

如果注册了多个处理程序,它们将始终按照绑定的顺序执行

考虑一个简单的JS事件

document.getElementsByClassName('test')[0].onclick=function(){
document.getElementsByClassName('test')[0].innerHTML = 'New Text';
}

如何将此代码扩展为通常适用于所有元素class="test".我的意思是点击元素并替换其内容.实际上,我们需要从click事件中获取节点号(在括号内提供).

我试图更好地理解不显眼的代码中的javascript,而不是像jQuery这样的实用方法.

给定element一个包含javascript对象/ DOM元素的变量,如何确定event.target是否是一个元素element？

function(event){
   // assume that var element exists in this scope
   if(event.target == a_child_of(element))
      // do something
}


<div id="myDiv">
   <div class="innerDiv">
      <input type="text"/>
   </div>
</div>

如果element是myDiv,内部div或输入上发生的事件或内部可能存在的任何其他元素myDiv应该使该语句评估为true.

我想我可以使用递归函数来构建子元素数组,然后检查event.target是否在数组中,但我想先看看是否有更简单的答案.

我在这里有以下代码:

$('input[type="checkbox"][id="gridlines"]').change(function () {
    alert('hello world');
});

$('#gridlines').prop('checked', true);

当我加载页面时,选中复选框,但不会提示"hello world"

但是,当我手动单击复选框时,会出现"hello world"

是什么赋予了？

请解释document.hiddenHTML5 Page Visibility API和document.hasFocus().之间的区别.我正在做一个项目,HTML5 Desktop Notification当选项卡没有聚焦时弹出.我有点困惑哪一个使用.

...不限制iframe内的滚动或需要专门命名/标记所有可滚动元素.

想象一下嵌入在父页面中的谷歌地图小部件.放大窗口小部件时,显然不希望父页面滚动.

我以为我前一个问题的答案解决了这个问题:

在iframe内滚动时,身体对那里发生的事情一无所知.但是当iframe卷轴到达底部或顶部时,它会滚动到正文.

取消从iframe传播的事件.

但该解决方案在Firefox中不起作用,因为Firefox不会 - 按设计 - 将iframe捕获的事件传播到父页面,但奇怪的是它会滚动父页面.在这里看到jsfiddle.

$('body').bind('mousewheel DOMMouseScroll', onWheel);

function onWheel (e){
    if (e.target === iframe)
        e.preventDefault();
    console.log(e);
}

那么,当用户在Firefox中缩放嵌入式iframe中的内容时,如何防止页面滚动？