标签: javascript-events

在以下示例中:

  <li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item)">Remove</button>
  </li>

当我点击按钮时,showItem()由于事件冒泡也会调用它.我知道我可以$event用来观察$event.currentTarget和做$event.stopPropagation()等等,但这非常难看.

顺便说一句.我不想停止传播button(在我的情况下button是一个twitter bootstrap dopdown/button- 这只是一个例子)

showItem()当我点击remove按钮时,如何停止调用？

编辑 丑陋的解决方案是:

function remove(item,$event){
  $event.originalEvent.prevent = true;
  // rest of the code
}

function showItem(item,$event){
  if($event.originalEvent.prevent)return;
  // rest of the code
}

在检查页面的DOM时,我想快速了解元素的附加事件

例如,如果按钮具有此HTML DOM

<button id="button1">Click Me</button>

在某个地方(不是我提前知道的地方)它附有一个事件,例如

$("#button1").click(function(){...});

我知道它可以以编程方式完成(我可以使用jQuery查找绑定在元素上的事件吗？)

但有没有办法只使用Chrome/Firefox/IE的开发者工具之一来查看事件列表？

更新:我发现在较新的Chrome版本中我有一个名为EventListeners的标签,但它似乎不允许轻松向下钻取到事件源,因为jQuery包装了原始

MDN建议您执行以下操作来创建和填充服务工作缓存:

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        ... etc ...
      ]);
    })
  );
});

我不明白那段代码.该waitUntil方法也被记录,似乎上面的代码是它目前存在的唯一目的:

ExtendableEvent.waitUntil()方法可延长事件的生命周期.当相关的安装事件的事件处理程序调用时,它会延迟治疗的安装工所安装,直到通过无极成功解析.这主要用于确保在填充所依赖的所有核心缓存之前不会考虑安装服务工作者.

我不明白的是:

• waitUntil一般如何影响代码流？是否会阻止事件传播直到它的承诺结算？
• 为什么在打开工作缓存的环境中需要它？

我问这个问题,因为我上面的代码有问题,我想了解它.

是否有一种规范的方法来使用现有的onmouseover,onmouseout和某种计时器来设置JS onHover事件？或者只是当用户在元素上悬停一段时间时触发任意函数的任何方法.

我试图区分不同用途的keydown,keypress,keyup,input,change在JavaScript事件.

如果它是一个JavaScript自动完成搜索框,我们是否必须使用input事件处理程序？

原因是:

1. 在change用户按Enter键或离开该输入框(通过Tab键或单击输入框外部)之前,不会调用事件处理程序,因此change当用户输入一个以上时,事件不可能符合建议的目的字符到输入框.

2. 该keydown事件处理程序可用于击键"添加"到搜索词,但对于CTRL-V或CMD-V(在Mac上),以贴吧,我们不能真正得到keyCode一个接一个,如果我们贴上这样一句话作为hello在搜索框中-因为只有一个的keydown将是CTRL和一个的keydown的v替代,hello-但我们可以用该输入框的value属性来获取值-但是,如果有什么用户使用鼠标右键单击并选择"粘贴"以将文本添加到框中 - 在这种情况下我们应该使用,还是可以使用鼠标事件处理程序来查看value属性？处理如此低水平的键盘和鼠标太麻烦了.

因此,input事件处理程序似乎恰好符合确切的目的,因为任何值更改,input将调用事件处理程序.这就是input事件处理程序重要且有用的原因.

我们仍然需要keydown事件处理程序,因为如果用户按下向下箭头键以查看可能项目列表,该怎么办？(可能还有ESC使自动完成建议框消失).在这些情况下,不会调用input事件处理程序和change事件处理程序,并且该keydown事件对这些情况很有用.

上述概念是否正确,主要是为了理解input事件？

(了解什么事件处理程序被称为jsfiddle:http://jsfiddle.net/jYsjs/)

我想检测元素的焦点事件,但只有当用户按Tab键启动时才会检测到它.例如:

<input type="text" id="foo" />
<input type="text" id="detect" />

如果用户专注于#foo并按下Tab,我希望一旦#detect聚焦(或焦点事件内的条件为真)就触发事件.相反,如果用户只是单击该#detect字段来聚焦它,我不希望触发该事件(或者我希望焦点事件调用中的条件为假).

我不想使用keydown事件#foo并检查Tab键是否被按下,因为我希望该方法独立于任何其他元素.

我查看了以下代码的控制台输出,但没有注意到两种聚焦方法之间的任何真正差异:

$('#detect').on('focus', function(e){
   console.log(e); 
});

(小提琴)

这有可能以一种相对简单的方式完成吗？

嗨,当我开始进行Web开发时,我意识到javascript事件名称都是小写的,没有分隔符,即"mousedown","mouseup"等.当使用jQuery UI库时,我注意到它们也使用相同的约定; 即"dropdeactivate",如下例所示

javascript $( ".selector" ).on( "dropdeactivate", function( event, ui ) {} )

虽然这对于只有2或3个单词的名称很有效,但对于包含更多单词的名称来说真的很糟糕.

尽管如此,当我必须触发我创建的自定义(合成)事件时,我也遵循了这个惯例,直到最近我决定最好开始使用某种形式的分隔符.现在我使用"drop:deactivate"或"app:ready"之类的东西.

在iOS上苹果最近为HTML 5 Airplay API添加了这个事件,我同意这篇文章的主题http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review,他说:

我认为"webkitcurrentplaybacktargetiswirelesschanged"赢得了记录:有史以来最长的JavaScript事件名称.

这个奇怪的惯例背后的原因是什么？为什么不使用任何形式的分隔符或camelCase约定以更易读的方式命名事件？

我认为有一个原因,很多聪明的人都在努力......但过了一段时间我还在想为什么？

var form = document.forms[0]; 
form.addEventListener("submit", function(){
  var email = form.elements['answer_13829'].value;
  if( email == 'geobraks@yahoo.ca') {
     alert('redirecting the user...');
     window.location = 'xxxx';
     return false;
  }
});

我不明白 - 它仍然提交表格.有人可以修补我的代码并使其工作吗？

我有超级视图谁负责渲染子视图.当我重新渲染的超视图中的所有事件的子视图都将丢失.

这是一个例子:

var SubView = Backbone.View.extend({
    events: {
        "click": "click"
    },

    click: function(){
        console.log( "click!" );
    },

    render: function(){
        this.$el.html( "click me" );
        return this;
    }
});

var Composer = Backbone.View.extend({
    initialize: function(){
        this.subView = new SubView();
    },

    render: function(){
        this.$el.html( this.subView.render().el );             
    }
});


var composer = new Composer({el: $('#composer')});
composer.render();

当我点击click me div时,会触发事件.如果我composer.render()再次执行,所有内容看起来都很相似,但不会再触发click事件.

检查工作jsFiddle.

我正在设计一个非常简单的网页(仅限HTML),我想要实现的唯一"功能"是当用户向下滚动页面时执行某些操作,是否有办法以某种方式捕获该"事件"？