标签: javascript-events

我有以下代码,旨在为类名为"State"的所有元素创建一个onchange事件处理程序.唯一的问题是我希望将元素传递给'StateChange'函数.如何更新此JS以将"this"传递给StateChange函数？谢谢!

var c = document.getElementsByClassName('State');
for (i = 0; i < c.length; i++) c[i].onchange = createEventHandler( StateChange, c[i] );

编辑:我忘了提供createEventHandler函数.对不起...这是:

function createEventHandler(fn, input) {
      return function () {
          fn(input);
      };
}

还有一些澄清.该函数的目的是避免将onchange事件放在每个元素旁边的类名='State'的需要.结果应该和我写的一样:

<select id="MyState1" class="State" onchange="StateChange(this)">

需要存储一些数据window.load并检索document.ready:

<script>
   $(window).load(function() { // Store here
      $('img.storable').each(function() {
         $(this).data("key", "value");
         console.log($(this).data("key")); // Output: value
      };
   };

   $(document).ready(function() { // Retrieve here
      $('img.storable').each(function() {
         console.log($(this).data("key")); // Output: undefined!
      };
   };
</script>

在输出document.ready是不确定的.我错过了关于dom事件的事吗？

jQuery有一个所谓的新方法on()被建议更换delegate(),live()和.bind().

例如,使用两种方法:

$('#some-button').on('click', function() {
    //do something when #some-button is clicked
});
$('#some-button').live('click', function() {
    //do something when #some-button is clicked
});

哪一个表现更好？(我知道这两个事件上下文都在文档级别.)

我已经建立了一个谷歌地图,其中标记在一些外部链接的翻转时反弹.我创建了这个短函数来反弹标记:

function makeBounce(marker) {
        marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function(){ marker.setAnimation(null); }, 750);
}

我正在用它来执行它:

<a onmouseover="javascript:map.panToBounds(bounds);makeBounce(markersArray[1]);"  href="javascript:google.maps.event.trigger(markersArray[1], 'click');">Marker name</a>

我注意到的是,在标记反弹之前,它们会闪烁.这几乎是不可察觉的,但它真的很烦人(特别是因为谷歌自己的博客发布弹跳标记很顺利:http://googlegeodevelopers.blogspot.com/2010/12/map-markers-they-move.html).

我在这里创建了一个JS Fiddle来演示它:http://jsfiddle.net/RmDuz/(滚动蓝色链接以查看问题).

我已经在FF9和Chrome 16中尝试过了,两者都存在问题.

有什么想法吗？

问题似乎是标记图像是在弹跳之前动态(重新)加载的,因为在Chrome中,我会在标记再次出现之前看到"无图像"框然后反弹.

编辑:我已经改变了代码,以使用map API监听器而不是javascript函数,希望API代码可能更高效,但没有快乐:(

    google.maps.event.addListener(marker, 'dblclick', (function(marker, i) {
        return function() {
            marker.setAnimation(google.maps.Animation.BOUNCE);
            setTimeout(function(){ marker.setAnimation(null); }, 750);
        }
    })(marker, i));

我正在使用dblclick因为我不希望鼠标悬停,这意味着当标记翻转时会触发动画.我只希望在外部链接滚动时触发动画:

<a onmouseover="javascript:google.maps.event.trigger(markersArray[1], 'dblclick');">Link name</a>

我已经更新了JS Fiddle以反映这一点:http://jsfiddle.net/RmDuz/1/

我通过<script>标签在页面上动态插入jQuery库:

jq = document.createElement('script');
jq.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
b.appendChild(jq);

然后我有一些jQuery脚本需要在jQuery库加载完成后运行并准备好使用:

$(f).load(function() {
    $(f).fadein(1000);
});

如何让它等待jQuery加载？

我有以下代码:

function showAddrBox() {
    var prompt = document.getElementById('addr_prompt');
    prompt.style.display = 'block';
    document.generic_form.address.style.display = 'block';
    document.generic_form.onsubmit = validateAddrForm;
}

function hideAddrBox() {
    var prompt = document.getElementById('addr_prompt');
    prompt.style.display = 'none';
    document.generic_form.address.style.display = 'none';
    document.generic_form.onsubmit = null;
}

问题是,有时候我想要保留onSubmit附加的附加功能.我希望能够在onSubmit事件中添加和删除单个函数,而不是仅使用"onsubmit ="进行设置.换句话说,我需要一种方法来完成这样的事情:

document.form.onsubmit += function;
document.form.onsubmit -= function;

有任何想法吗？

我想在three.js中寻找几何/摄像机/灯光(我们添加到场景中的东西)的某种事件处理？

我用谷歌搜索,但找不到任何相关的东西.我做了一个简单的Sphere渲染并尝试在firebug中看到DIV内容,但是只有一个画布,并且在画布上添加任何"onclick"会使所有画布的事件发生,也就是说,它不仅仅用于球体或光线.

有什么建议 ？

我正在编写一个浏览器扩展,需要将处理程序附加到所有页面上的keyup和keydown事件.我可以使用以下内容脚本代码很好地工作.

document.addEventListener("keydown",keyDown, true);      
document.addEventListener("keyup", keyUp, true);

我不能让这个在Gmail中运行.具体来说,在编写新电子邮件的正文时,我无法使其工作.它将适用于我测试过的其他任何地方.我认为问题是因为Gmail正在调用stopPropagation所有键盘事件,但很难调试其最小化代码.我认为将第3个参数设置为true会导致在CAPTURE_PHASE此期间捕获事件,但这不起作用.

如何使用Google Chrome内容脚本在Gmail中编写新主体时捕获keyup和捕获keydown事件？

编辑:

通过添加"all_frames": true,到我的清单,我确保将我的内容脚本注入到DOM的所有iframe中.我甚至尝试使用以下代码:

document.addEventListener("DOMNodeInserted", function (event) {
     if(event.type === "DOMNodeInserted") {
        if(event.srcElement.nodeName === "IFRAME") {
        console.log(event.srcElement.nodeName + " iframe detected");
        event.srcElement.addEventListener("keydown", function(kevent) {
            document.dispatchEvent(kevent);
            }, true);
        event.srcElement.addEventListener("keyup", function(kevent) {
            document.dispatchEvent(kevent);
            }, true);

    }
}
},true);

这仍然无法解决Gmail的问题.

提前谢谢您的时间.

问题陈述摘要:浏览器上的单选按钮html不显示checked属性,但Firebug指示无线电的checked属性设置为checked

经过测试

Broswer:FF 3.6.18和IE8 jQuery:1.5 MVC3(Razor)

细节

使用MVC3(使用Razor)我正在从服务器渲染以下单选按钮.所需的功能是在检查一个无线电时,另一个应该是未选中的,反之亦然.换句话说,允许用户只选择一个选项 - 比如val1或val2.

<div id="myRadioList">
    <div>
        <input type="radio" value="val1" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val1" checked="checked">

    </div>
    <div>
        <input type="radio" value="val2" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val2">
    </div>
</div>

我所观察到的是,如果用户切换所选择的无线电,myRadioName_val2则显示使用firebug检查新选择的无线电(假设),但html仍然反映其他单选按钮已选中.因此,其他一些验证失败了.

我已经尝试删除两个单选按钮的所有已检查属性,然后检查单击的那个.

这就是我正在做的设置当前点击的无线电,这是无效的

$("#myRadioList > div > input[value='myRadioName_val2]').attr('checked', 'checked');

我正在简化我的代码以避免发布不必要的细节.

谢谢!

我有以下简单的代码:

(JSFiddle)http://jsfiddle.net/aR2UX/3/

无论我做什么,模板中的动作都不会触发.我很怀疑这是由于视图呈现的方式,但无论我读什么,我都无法绕过它.

我仍在尝试理解余烬视图,但从我所读到的内容中我的代码应该起作用.它似乎没有,任何人都可以帮助我吗？

(这是在rails 3.2 app中,使用ember-rails,ember 0.9.4和把手模板gem,btw).

非常感谢任何帮助,因为我为这个项目的ember带来了一点风险.