标签: javascript-events

我对JavaScript有多深入了解,我发现自己要求那么多.例如,我们有window.onresize事件处理程序,如果我说:

window.onresize = resize;

function resize()
{
  console.log("resize event detected!");
}

这不会杀死连接到同一事件的所有其他功能,只是在控制台中记录我的消息吗？

如果是这样,我认为应该有另一个通知器告诉我关于窗口调整大小事件 - 或者可能是一种解决方法 - 而不会覆盖绑定到同一事件的其他函数.

或者我完全被它的用法搞糊涂了？

基本上我有一个锚元素, <a href='bla..'>link</a>

点击后,我首先想要做的事情,只有在完成后我才想把用户带到它链接到的页面.就像是:

$('a').click(function(ev){
   ev.preventDefault();

   //do something here

   ev.refireDefault();
});

有什么建议？

更新

我很抱歉!我的FireFox决定缓存以前版本的JS,所以我尝试过的只是一个简单的CTRL + F5解决了这个问题.

我正在使用jQuery DataTables并执行服务器端数据.我正试图在ajax调用返回时调用一个函数.我尝试插入这个调用我的函数和原始函数的fnCallback2,但jQuery只是抛出一个错误(并没有告诉我错误是什么)并跳过了.

$("#brands").dataTable( {
"bServerSide" : true,
"sAjaxSource" : "ajax.php",
"fnServerData" : function(sSource, aoData, fnCallback) {
    fnCallback2 = function(a,b,c){
        fnCallback.call(a,b,c);
        update_editable();
    };
    $.ajax( {
        "dataType" : 'json',
        "type" : "POST",
        "url" : sSource,
        "data" : aoData,
        "success" : fnCallback2
    });}});

我也尝试添加fnInitComplete参数,但这只是第一次被调用,而不是在后续页面之后.

"fnInitComplete": function(){
update_editable();
},

如何在ajax请求之后正确调用我的代码,以便调用原始回调？

有没有办法通过点击某个按钮找出哪个javascript函数被触发？

让我来解释......我有一个大的js脚本(不是我做的)一个网页,我已经来检测其功能是通过特定的按键触发,我需要找到这个BTN触发的功能.

看起来mouseup事件只有在它们不与mousemove结合时才被触发.换句话说,按下鼠标左键放开,然后触发mouseup.但是,如果您拖动图像然后放开,则不会触发任何鼠标.这是一个显示此行为的示例:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="Out">
    <img id="Img" src="http://sstatic.net/so/img/logo.png" width=500>
</div>
<script language=JavaScript>
    $(function() {
        $(document).bind("mouseup",function() {alert("UP");});
        //$("#Out").bind("mouseup",function() {alert("UP");});
        //$("#Img").bind("mouseup",function() {alert("UP");});
    });
</script>

如果你加载它,然后单击并放开,"UP"将发出警报.但是,如果你拖动然后放手,则不会触发UP.

如何在完成mousemove时触发mouseup,或者如何检查mousemove事件以确定鼠标左键现已关闭？

从没有JS经验的人那里,你推荐什么学习Node.js？

我在论坛上阅读了很多关于事件驱动,非阻塞,异步,回调等的内容,但我不知道那是什么!

我在哪里可以学习基础知识,以便了解所有术语和将来node.js？

谢谢!

到目前为止,该网站上的大多数人可能都知道:

$("#someTable TD.foo").click(function(){
    $(e.target).doSomething();
});

将会比以下情况更糟糕:

$("#someTable").click(function(){
    if (!$(e.target).is("TD.foo")) return;
    $(e.target).doSomething();
});

现在有多糟糕将取决于你的桌子有多少TD,但只要你有至少几个TD,这个一般原则应该适用.(注意:当然,聪明的事情是使用jQuery委托而不是上面的代码,但我只是试图用明显的区别来做一个例子).

无论如何,我向同事解释了这个原则,他们的回答是"嗯,对于站点范围的组件(例如,日期选择INPUT),为什么停在那里？为什么不将每种类型的组件的一个处理程序绑定到身体本身？" 我没有一个好的答案.

显然使用委托策略意味着重新思考如何阻止事件,这是一个缺点.此外,假设你有一个页面,你有一个"TD.foo",不应该有一个事件连接到它.但是,如果您理解并愿意解决事件冒泡变化,并且如果您执行"如果您将.foo放在TD上,它始终会将事件连接起来"的策略,那么这些似乎都不是很重要.

我觉得我必须遗漏一些东西,所以我的问题是:将所有站点范围的组件的所有事件委托给BODY还有其他任何缺点(而不是直接将它们绑定到所涉及的HTML元素,或委托它们)到非BODY父元素)？

我在JSP页面(jQuery 1.7.2)中有这个jQuery代码:

   function Header() {
      this.add = function ( parentDiv, leftToolbar, rightToolbar ) {
         hbHeader = Handlebars.compile( $( "#hb-header" ).html() );

         $( parentDiv ).html( hbHeader( {user:{tenantDescription:"", firstName:"", lastName:""},
            leftTB:null, rightTB:null } ) );

         $.ajax( {
            url:"${pageContext.request.contextPath}/services/login/sessionUser",
            type:"POST",
            async:true,
            success:function ( result ) {
               app.user = result;
               var ltHtml;
               var rtHtml;
               if ( leftToolbar ) {
                  ltHtml = new Handlebars.SafeString( leftToolbar );
               }
               if ( rightToolbar ) {
                  rtHtml = new Handlebars.SafeString( rightToolbar );
               }
               $( parentDiv ).html( hbHeader( {user:app.user,
                  leftTB:{ …

在Chrome中使用new input ="color"元素会触发一个新的弹出对话框:

我想知道是否有一个事件处理程序在此预览窗口中的值发生更改时触发,而不仅仅是在单击"确定"之后

jQuery('#colorinput').on('change', function() { // fires only after clicking OK
    jQuery('#main').css('background-color', jQuery(this).val()); 
 });?

见http://jsfiddle.net/Riesling/PEGS4/

我需要一个特殊transitionend的事件,在所有转换完成后触发一次,或者如果CSS中没有定义转换则立即触发.

这就是我到目前为止所得到的:

(function($){

  $.event.special.transitionsComplete = {

    setup: function(data, namespaces, eventHandle){    
      var queue = [],
          style = window.getComputedStyle(this, null),
          computedProps = style.getPropertyValue('transition-property').split(', '),
          computedDurations = style.getPropertyValue('transition-duration').split(', '),
          $node = $(this);          

      // only count properties with duration higher than 0s
      for(var i = 0; i < computedDurations.length; i++)
        if(computedDurations[i] !== '0s')
          queue.push(computedProps[i]);           

      // there are transitions
      if(queue.length > 0){
        $node.on('webkitTransitionEnd.x transitionend.x', function(e){          
          queue.splice(queue.indexOf(e.originalEvent.propertyName));          
          if(queue.length < 1)
            $node.trigger('transitionsComplete');
        });

      // no transitions, fire (almost) immediately
      }else{
        setTimeout(function(){
          $node.trigger('transitionsComplete');
        }, 5);

      } …