标签: javascript-events

如果删除DOM元素,那么以该元素开头的任何事件都会继续冒泡吗?

如果我删除用于启动事件气泡的DOM元素,或者其子项启动事件气泡,我应该期待什么行为?如果元素被删除,它会继续冒泡吗?

例如 - 假设您有一个表,并希望检测表格单元格上的单击事件.JS的另一部分执行了一个AJAX请求,一旦请求完成,它将最终完全替换表.

如果我单击表格会立即在表格被成功完成AJAX请求取代后会发生什么?我问,因为我看到一些行为,其中点击事件似乎没有冒泡 - 但很难复制.

我正在观看桌子的父元素上的事件(而不是将事件附加到每个TD),并且它有时似乎没有达到它.

编辑:再次遇到这个问题,最后得到了它的根源.根本不是一个冒泡的问题!请参阅下面的答案了解详情.

javascript dom javascript-events event-bubbling

19
推荐指数
3
解决办法
4488
查看次数

Backbone View事件未触发

我正在使用Rails3作为我的后端,Jammit使用资产......现在我试图不压缩甚至打包.

简单事件不会运行,但警报('asd')int inialize正在按预期工作.

我已经在其他对象中尝试了其他类型的事件,但它没有用.

我的代码如下:

var InvoiceStock = Backbone.View.extend({
  initialize: function(args) {
    _.bindAll(this, 'find_product', 'product_added');

    this.products = new ProductCollection();

    this.products.bind('add', this.product_added);

    alert('asd');
  },

  events: {
    "keypress #product_finder": "find_product"
  },

  find_product: function(e) {
    alert('teste');
  },

  product_added: function(product) {
    alert('pqp4');
  }
});
Run Code Online (Sandbox Code Playgroud)

和我的RUBY HTML:

 <%= text_field 'search', :isbn_or_isbn10_or_publisher_or_authors_or_name_like, :id => 'product_finder' %> ou
 <%= link_to 'criar um produto', '', :id => 'new_product_link' %>.
Run Code Online (Sandbox Code Playgroud)

产生这个:

<label>Adicionar</label>
<input id="product_finder" class="ui-autocomplete-input" type="text" size="30" name="search[isbn_or_isbn10_or_publisher_or_authors_or_name_like]" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
ou
<a id="new_product_link" href="">criar um produto</a>
Run Code Online (Sandbox Code Playgroud)

javascript javascript-events backbone.js

19
推荐指数
1
解决办法
2万
查看次数

如何使用JavaScript在Firefox中触发鼠标滚轮事件?

我正在尝试使用WebDriver进行自动化测试,但它目前无法模拟鼠标滚轮事件.作为一种解决方法,我试图用JavaScript来解雇这些事件.我现在正在直接在HTML页面上进行实验,而不是在WebDriver框架内.

我特意尝试在滚动div元素上触发鼠标滚轮事件.

到目前为止,我已经能够使用Chrome和IE9做到这一点,但我似乎无法在Firefox(5.x)中使用任何东西.

我正在使用以下跨浏览器代码来检测何时触发鼠标滚轮事件,这是我从网上抓取的.当我在我创建的滚动div(id ='view')中滚动鼠标滚轮时,此代码能够在所有浏览器中拾取事件.

<script type="text/javascript">
  function wheel(event) {
    var delta = 0;
    if (!event) {
      event = view.event;
    }
    if (event.wheelDelta) {
      delta = event.wheelDelta / 120;
    }
    else if (event.detail) {
      delta = -event.detail / 3;
    }

    alert(delta);
  }

  var view = document.getElementById('view');

  if (view.addEventListener) {
    view.addEventListener('DOMMouseScroll', wheel, false);
  }

  view.onmousewheel = wheel;
</script>
Run Code Online (Sandbox Code Playgroud)

调用时,下面的函数可以在Chrome和IE9中触发鼠标滚轮事件,并在上述处理程序中获取预期行为.

function ChromeWheel () {
  var evt = document.createEvent("MouseEvents");
  evt.initEvent('mousewheel', true, true);
  evt.wheelDelta = 120;
  view.dispatchEvent(evt);
}
Run Code Online (Sandbox Code Playgroud)

当然,它不适用于Firefox.我发现现有的文档太稀疏而且不知道FF如何处理这个问题.任何人都可以向我展示在Firefox中使用滚轮三角形(放置在FF预期的位置)中发射鼠标滚轮事件的最低限度,这样我的处理程序就可以将它拿起来?

javascript firefox javascript-events mousewheel dispatchevent

19
推荐指数
1
解决办法
2万
查看次数

手动dispatchEvent DOMContentLoaded

有没有办法手动触发DOMContentLoaded事件?我正在尝试为一些客户端javascript编写单元测试,它在DOMContentLoaded事件上做了一些事情.

以下不起作用:document.dispatchEvent("DOMContentLoaded")或document.body.dispatchEvent("DOMContentLoaded");

javascript dom javascript-events

19
推荐指数
2
解决办法
9275
查看次数

event.keycode vs event.which

我忽略了Firefox的keydown行为,因为按下回车键(实际上是任何键)而没有专注于特定字段将不会触发keydown事件,它只会触发按键事件.

这可能非常令人困惑,因为keydown和keyup事件使用JavaScript密钥代码,而keypress使用ASCII代码.幸运的是,13(输入/返回)对两者都很常见.

在这种情况下,使用按键的 FF有什么原因吗?有什么好处?

一旦确定,IE8就会愚蠢,因为它不允许preventDefault要求,而returnValue = false另一个SO帖子的以下片段证明非常有用:

event.preventDefault ? event.preventDefault() : event.returnValue = false;
Run Code Online (Sandbox Code Playgroud)

在搜索解决这些问题的过程中,我一直event.keycode对vs 感到困惑event.which.即我使用类似于以下的switch语句做错了:

$("#class_Name").bind("keydown", function(event){
    // do not test input if field controls used
    switch(event.which){
       case 13:
       //enter key 
       event.preventDefault ? event.preventDefault() : event.returnValue = false;
       break;
     }
Run Code Online (Sandbox Code Playgroud)


以下是更好的,如果是这样,为什么?

$("body").keypress(function(event){
     // stop inadvertant form submission
     if (event.keycode == "13"){
       event.preventDefault ? event.preventDefault() : event.returnValue …
Run Code Online (Sandbox Code Playgroud)

javascript jquery event-handling javascript-events

19
推荐指数
2
解决办法
1万
查看次数

如何在window.load之前和加载DOM之后执行代码?

好的,这就是情况:我有2页:

  • 1 x html页面
  • 1个外部JavaScript

现在在html页面中,将有内部javascript编码,以允许放置'window.onload',以及其他页面特定的方法/功能.

但是,在外部javascript中,我希望在触发'window.onload'事件之前完成某些事情.这是为了允许首先初始化定制组件.

有没有办法确保在触发'window.onload'事件之前在外部javascript中进行初始化?

我之所以这样说的原因,就是尝试制作可重用的代码(构建一次 - 全部使用),外部脚本必须在主html/jsp/asp中的javascript之前检查它是否在'order/check'中/ php页面接管.而且我也不是在寻找JQuery @ _ @的解决方案

以下是stackoverflow.com上的一些链接我已经浏览了解决方案:
- Javascript - 如何检测文档是否已加载(IE 7/Firefox 3)
- 如何检查页面是否已完全加载(脚本和所有)?
- 页面完全加载时执行Javascript

有人可以帮助或指导我找到解决方案吗,你的帮助将是非常值得赞赏的,请 - 谢谢:D

此致,克雷格


[更新回复 - 2012年11月19日]

大家好,感谢您的建议和建议的解决方案,它们在搜索和测试可行解决方案时都非常有用.虽然我觉得我对自己的成绩并不是百分之百满意,但我知道你的建议和帮助让我更接近解决方案,并且可能确实在类似的情况下帮助其他人.

以下是我的想法:

test_page.html

<html>
<head>
<title></title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript" src="test_script_1.js"></script>
<script type="text/javascript" src="test_script_2.js"></script>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("div_1").innerHTML = "window.onload complete!";
}
</script>

<style type="text/css">
div {
    border:thin solid #000000;
    width:500px;
}
</head>
<body>
    <div id="div_1"></div>

    <br/><br/>

    <div id="div_2"></div>

    <br/><br/>

    <div id="div_3"></div>
</body> …
Run Code Online (Sandbox Code Playgroud)

javascript javascript-events

19
推荐指数
1
解决办法
6万
查看次数

如何在Javascript中粘贴事件后发出警报?

我有一个简单的过去事件

document.getElementById('paste_area').addEventListener('paste', function() {
    document.getElementById('notice').innerHTML='Text was successfully pasted!';
    alert('Pasted');
}, true);
Run Code Online (Sandbox Code Playgroud)

可以在这里找到一个工作示例http://jsfiddle.net/XEQzz/

警告和通知将在粘贴之前显示.如何在粘贴事件实际完成后延迟警报操作?

javascript javascript-events

19
推荐指数
1
解决办法
1万
查看次数

无论添加事件的顺序如何,您如何强制首先运行javascript事件?

我有javascript,人们在他们的页面中包括.在我的javascript中,我有一个jQuery版本(1.8为了方便参考),它被划分为自己的命名空间,并通过全局变量引用(但不是"$"或"jQuery"的两个默认变量之一) .这允许用户在他们的页面中使用jQuery并且不会干扰我在函数内部执行的操作.

所以我们有一个页面已经有jQuery(1.4),并且一切正常,除了用户和我的代码都在元素上监听"点击"事件,他们的第一个,所以在他们这样做的少数事件上return false,jQuery停止传播,我的事件永远不会被触发.我需要先举办活动.用户希望我的onClick功能仍然有效.

现在我知道jQuery在内部通过_data()对象保持自己的事件顺序,通过它可以取消绑定现有事件,绑定我的事件,然后重新绑定现有事件,但这只适用于通过该实例绑定的对象的jQuery.我宁愿不盲目地寻找jQuery对象,希望冲突是由用户自己的jQuery版本引入的.毕竟当用户不通过jQuery绑定事件时会发生什么?试图操纵页面中现有的jQuery对象不是一个好的解决方案.

我知道,根据浏览器,他们使用addEventListener/removeEventListener或attachEvent/detachEvent.如果我只能获得已添加事件的列表,我可以按照我想要的顺序重新绑定它们,但我无法找到方法.通过chrome检查来查看DOM我看不到任何地方的onclick绑定(不在对象上,也不在窗口或文档上).

我正试着弄清楚jQuery绑定其监听的确切位置.为了能够控制自己事件的顺序,jQuery必须全面地听某个地方,然后开启它自己的功能吗?如果我能弄明白在哪,我可以深入了解如何确保我的活动始终是第一位的.或者也许有一些我在谷歌上找不到的JavaScript API.

有什么建议?

javascript jquery javascript-events

19
推荐指数
2
解决办法
2万
查看次数

为什么我的参数不会传递给调度事件?

好的,我已经设置了这样的事件监听器......

window.addEventListener('message', parseMessage, false);

var parseMessage = function(rawMessage) {
    console.log(rawMessage.cmd);
};
Run Code Online (Sandbox Code Playgroud)

然后我就像这样触发事件:

var event = new Event('message', {'cmd':"blerg!"});

window.dispatchEvent(event);
Run Code Online (Sandbox Code Playgroud)

问题是当我希望注销"blerg!"时,解析消息中的console.log正在注销未定义.

我在这里做错了什么事情,如何将'cmd'消息传递给事件?

javascript events javascript-events addeventlistener

19
推荐指数
2
解决办法
1万
查看次数

启用帧间通信的postMessage方法的最大大小是多少?

通过在Google上搜索并查看文档并不清楚.通过Window.postMessage(https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage)发送的邮件的最大长度是多少?我们假设这会因浏览器而异吗?

html javascript iframe html5 javascript-events

19
推荐指数
1
解决办法
6452
查看次数