标签: javascript-events

当我们jQuery.Val( value )在DOM元素上使用该方法来改变它的值时.

元素是否应该发送一个事件来通知它的值已经改变了？ - 虽然事件'变更'将被派遣.

如果不应该为什么？

现场演示

谷歌阅读器有一个很好的功能,当你从一个不同的网页切换到网页(给予页面焦点)时,它会显示页面未聚焦时累积的更新.
快速问题#1:他们是如何做到的？

我认为它们可能绑定到鼠标移动事件+键盘事件,因为我不知道任何开箱即用的事件能够提供这种能力.

谷歌搜索是一场噩梦(焦点,标签,网页,用户).

快速问题#2:那里有一些包给我这种能力吗？

我将jQuery标记作为所有Web开发人员ninjas的灯塔,但我并不关心框架(只要它的Javascript)

我正在使用DataTables jQuery插件并在行单击上设置单击处理程序,如下所示:

$('#dt tbody tr').click(function () {
        alert('e');
});

这适用于DataTables结果的第一页.

但是,当我移动到另一页结果时,点击处理程序根本不再注册.

我的假设是DataTables代码正在停止click向我的处理程序传播事件,但因为这只发生在第一次看起来不寻常之后的页面上.

因此,有任何人:

1. 遇到(并且理想地解决)这个问题
2. 找到一种跟踪jQuery/JS事件传播的好方法,以隔离事件被停止的原因

干杯

 var x = event.target||event.srcElement;
 document.getElementById(x.id).style.left =  200 + "px" ;
 document.getElementById(x.id).style.top  =  100 + "px" ;

适用于谷歌浏览器和IE浏览器,但不适用于Firefox.在谷歌上尝试过.谷歌说event.srcElement(适用于IE但不适用于Firefox)所以我添加了event.target但仍然无法正常工作.我需要做什么改变才能在firefox上工作吗？顺便说一句,我使用3.5版本的Firefox.

       function up()
           {
                dragok = false;
                document.onmousemove = null;
                var x = event.target||event.srcElement;
                document.getElementById(x.id).style.left= 200 + "px" ;
                document.getElementById(x.id).style.top= 100 + "px" ;
           } 

请帮助我使它在Firefox上运行

我有一些像这样的标记(类只是用于解释):

<ol id="root" class="sortable">
  <li>
    <header class="show-after-collapse">Top-Line Info</header>
    <section class="hide-after-collapse">
      <ol class="sortable-connected">
        <li>
          <header class="show-after-collapse">Top-Line Info</header>
          <section class="hide-after-collapse">
            <div>Content A</div>
          </section>
        </li>
      </ol>
    </section>
  </li>
  <li>
    <header/>
    <section class="hide-after-collapse">
      <ol class="sortable-connected">
        <li>
          <header/>
          <section class="hide-after-collapse">
            <div>Content B</div>
          </section>
        </li>
      </ol>
    </section>
  </li>
</ol>

也就是说,嵌套的可排序列表.然而,可排序的插件就足够了,因为每个li(以下称"item")都保持其级别,尽管内部列表是连接的.这些项目具有始终可见的标题和处于展开状态时可见的部分,通过单击标题进行切换.用户可以随意添加和删除任何级别的项目; 添加顶级项目将在其中包含空巢列表.我的问题是关于新创建的项目的JS初始化:虽然他们将共享一些常见的功能,我可以通过它来覆盖

$("#root").on("click", "li > header", function() {
  $(this).parent().toggleClass("collapsed");
});

和

li.collapsed section {
  display: none;
}

(附带问题:这是一个使用详细信息/摘要HTML5标签的合适位置吗？看起来有点不确定那些是否会进入最终规范,我想要一个滑动过渡,所以看起来我好像无论如何都需要JS.但我把问题提交给群众.你好,群众.)

如果根列表是唯一保证在页面加载时存在的(相关)元素,为了使.on()有效地工作,我必须将所有事件绑定到该元素并为每个元素拼出精确的选择器,因为我明白它.因此,举例来说,为了将单独的函数绑定到彼此相邻的两个按钮,我每次都必须完全拼出选择器,àla

$("#root").on("change", "li > section button.b1", function() {
  b1Function();
}).on("change", "li > section button.b2", function() {
  b2Function();
});

那是准确的吗？在这种情况下,放弃.on()并在将新项目添加到页面时绑定我的事件更有意义吗？如果这会对响应产生影响,那么项目总数最多可能是数十个.

我正在尝试调试附加到页面上一堆文本框的JavaScript onFocus事件.选择文本框然后跳转到下一个文本框时会出现错误.我正在尝试通过使用Chrome开发工具在onFocus事件中放置一个断点来调试此问题.我面临的问题是,当我选择一个文本框并且捕获断点时,Chrome开发工具会窃取焦点并且不会返回它,因此我无法选中下一个文本框.任何人都有想法解决问题？我想我可以使用警报语句打印我需要的所有信息,而无需使用Chrome开发工具......

如何克服事件处理程序被覆盖？我有一个剧本说a.js

window.onload = function () {
   //Handler in a.js
}

另一个剧本说b.js

window.onload = function () {
   //Handler in b.js
}

哪里,

a.js是我建立的第三方图书馆

b.js是使用我的脚本的发布者[我不能在这里做任何更改]

b.js中的onload处理程序是否会覆盖a.js的处理程序？

如果是,如何防止这种情况发生？

是否会在a.js中构建所有事件处理程序的队列,并在事件帮助中将它们解除？

但是a.js是否会知道事件的所有事件处理程序,直到事先b.js被加载？

思考和参考将有所帮助

以下两种方法有什么区别吗？比#2快#1？

#1
$('#selector').on('click',function(){
  $(this)...
  // do stuff with clicked element
})

and

#2
$('#selector').on('click',function(e){
  $(e.currentTarget)....
  // do stuff with clicked element
})

如何以编程方式在HTML中为标记添加onclick事件？

我希望能够单击一个链接,并将附加到javascript函数的onclick事件在另一个标记上生效.

这是我到目前为止:

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount); 
var cell1 = row.insertCell(0); 
var element1 = document.createElement("input");
element1.type = "text";
element1.id="List["+num+"].id";
element1.name="List["+num+"].id";
element1.onclick="javascript:CalCal()";
cell1.appendChild(element1);

我想CalCal()在onClick事件上调用一个javascript函数.这可能吗？

我有以下HTML:

<div id="channels">
    <ul class="nav nav-tabs" id="ul-channels">
        <li class="channel" data-roomid="lobby"><a class="link-channel" href="#lobby" data-toggle="tab">lobby</a></li>
        <li class="channel active selected" data-roomid="test"><a class="link-channel" href="#test" data-toggle="tab">test</a></li>
    </ul>
</div>

我需要切换标签时发生的事件.像这样:

$('.nav-tabs a').click(function (e) {
    alert("Q");
});

我尝试了很多选择,但我没有成功.我将不胜感激任何帮助.