标签: javascript-events

在HTML5中有一种新的输入类型"搜索".在大多数浏览器上,它只是一个简单的"文本"输入,但对于基于webkit的浏览器,它添加了一个小的交叉来重置输入.

我希望能够处理这个,有没有这样的事件？

希望有人对此有一个很好的答案:

为什么Chrome(14.0)会在刷新页面时触发文档就绪和窗口加载事件？请注意,我不是在谈论新页面加载时会发生什么,而是在加载之前.请参阅以下代码:

<form name="form1" method="post" action="tmp.aspx?a=1" id="form1">
<script type="text/javascript">

    $(document).ready(function () { console.log('document/ready' + new Date()); });

    $(window).load(function () { console.log('window/load' + new Date()); });

</script>

<a href="tmp.aspx?a=1">tmp</a>
</form>

当我第一次访问页面时,我在控制台上获得两个输出,一个用于文档/就绪,一个用于窗口/加载.当我刷新页面时,会快速输出两个,并在此之后立即输出两个(从新页面视图).如果我只是单击直接返回到同一页面的链接(tmp.aspx),则不会发生这种情况.

我相信对此有一个很好的解释.

问候!

编辑:在页面刷新之前,对$(document).ready()和$(window).load()进行了额外调用.因此,当我第一次加载页面时,他们的方法被调用一次,然后我点击刷新并且在页面重新加载之前再次调用方法.之后,当页面刚重新加载时,这些方法称为第三次.

这是一个有趣的jsfiddle.

在Firefox中:

1. 跑小提琴
2. 单击文本输入
3. 点击其他地方.应该说"1模糊".
4. 再次单击文本输入.
5. ALT-TAB到另一个窗口.小提琴现在应该说"2次模糊".

在Chrome中,在第5步,它显示"3次模糊".当整个浏览器失去焦点时,会触发两个单独的"模糊"事件.这是有意义的,因为它意味着在"模糊"处理程序中假设元素实际上在调度事件之前具有焦点是不安全的; 也就是说,失去焦点 - 从"聚焦"到"不在焦点"的过渡 - 是事件发生的原因.当生成两个 "模糊"事件时,在处理第二个事件期间不满足该条件,因为该元素已经不在焦点上.

这只是一个错误吗？有没有办法告诉"模糊"事件是假的？

使用下面的代码我注意到,在我记录事件时,在浏览器控制台中,currentTarget的值记录为null.但是,当我记录e.currentTarget时,它会记录一个值.关于它是如何工作的任何想法？

var button = document.getElementById("btn");

var eventButtonHandler = function(e) {
  var button = e.target;
  console.log(e); // logs MouseEvent object with currentTarget:null
  console.log(e.currentTarget); // logs a value
  if(!button.classList.contains("active"))
    button.classList.add("active");
  else
    button.classList.remove("active");
};

button.addEventListener("click", eventButtonHandler);

可以在这里找到一个jsbin:http://jsbin.com/xatixa/2/watch？html,js,output

是否有任何技术或技术可用于实现JavaScript中的onVisible'事件'实际上是什么？

我希望我的JavaScript能够检测网页中的元素(例如文本段落或图像)在用户向下滚动页面时何时在浏览器窗口中可见.我还想要一个相应的'事件',onNotVisible,当浏览器窗口中曾经可见的元素再也看不到时触发.

如果无法在JavaScript中轻松实现,是否有任何特定于浏览器的事件可以提供相同的功能？

有没有办法在JavaScript中实现事件驱动编程,而不涉及任何DOM元素？比如创建一个事件处理程序,每当数组被排序时执行该事件处理程序.

我有一个Backbone模型:

class DateTimeSelector extends Backbone.Model

  initialize: ->
    @bind 'change:date', @updateDatetime
    @bind 'change:time', @updateDatetime

  updateDatetime: =>
    # do some stuff with the sate and time

我有使用该代码的一些测试茉莉花和sinon.js

describe "DateTimeSelector", ->
  beforeEach ->
    @datetime = new DateTimeSelector()

    describe "updateDatetime", ->
      beforeEach ->
        @updateSpy = sinon.spy(@datetime, 'updateDatetime')

      afterEach ->
        @datetime.updateDatetime.restore()

      # passes
      it "should be called when we call it", ->
        @datetime.updateDatetime()
        expect(@updateSpy).toHaveBeenCalledOnce()

      # fails
      it "should be called when we trigger it", ->
        @datetime.trigger 'change:date'
        expect(@updateSpy).toHaveBeenCalled()

      # fails
      it "should …

我试图用javascript(没有库)拖动图像.我能听到"mousedown"和"mousemove"事件.出于某种原因,我无法在mousemove之后捕获"mouseup"事件.(如果是点击,我可以捕获mouseup,但如果是拖动则不能捕获).我试图在文档,窗口和图像上收听事件.这是我的测试页面的网址:

https://dl-web.dropbox.com/get/Public/move.html?w=74a0d498

任何有关这方面的帮助将不胜感激!谢谢!

我不知道我应该使用哪一个:beforeunload或者onbeforeunload它们似乎都做了非常相似的事情,但具有不同的浏览器兼容性.

一些背景:

我有一张表格.在页面加载时,我将表单序列化并将其保存在变量中.如果用户离开页面,我将表格序列化并比较两者,看看是否有任何变化.但是,如果提交表单,则不应触发该事件.

例1

我按预期工作了.我只是不明白两者之间的区别:

window.onbeforeunload = function(e) {
    if(strOnloadForm != strUnloadForm)
        return "You have unsaved changes.";
}

使用此行停止在保存表单时触发(绑定到.submit())

window.onbeforeunload = null;

例2

window.addEventListener("beforeunload", function( event ) {
    if(strOnloadForm != strUnloadForm)
        event.returnValue = "You have unsaved changes.";
});

使用此行停止在保存表单时触发(绑定到.submit())

window.removeEventListener("beforeunload");

文档说的是什么

我已经阅读了onbeforeunload和beforeunload的文档.在Notesonbeforeunload部分下,它指出:

您可以并且应该通过window.addEventListener()和beforeunload事件来处理此事件.那里有更多文档.¹

这让我觉得我应该使用后者.但是,removeEventHandler的文档说明了这一点:

addEventListener()并且removeEventListener()不存在于旧版浏览器中.您可以通过在脚本的开头插入以下代码来解决此问题,允许使用addEventListener() …

我一直在玩es6类,并尝试设置一个简单的鼠标类.

addEventListener工作,但由于某种原因,我无法删除它们removeEventListener.我猜这与上下文绑定有关,但我无法弄清楚如何解决这个问题.

'use strict'
class Mouser {
    constructor() {
        this.counter = 0
        this.clicked = function (event) {
            this.counter++
            console.log('clicks:', this.counter)
            if (this.counter >= 10) this.remove()
        }
        window.addEventListener('click', this.clicked.bind(this))
    }

    remove() {
        console.log('Removing click listener') // this line runs ..
        window.removeEventListener('click', this.clicked.bind(this))
    }
}

var mouse = new Mouser()