Question

对不起，如果我的问题非常简单，但无法理解。据我所知，通过js而不是html附加链接/按钮监听器是一种很好的做法。我的意思是这是不好的做法：

<a href="javascript:" onclick="temp();">

这很好

<a href="javascript:" id="mylink">
in js code
$("#mylink").on...

据我所知，主要的想法是html页面不能包含任何javascript代码，并且所有js代码必须在js文件中。好的，我喜欢这个主意。

我看到的问题是，实现这种方法的时候是附加这样的监听器。

所有我发现 - 只有在文档准备就绪时才能附加侦听器（否则我们无法将侦听器添加到未准备好的元素）。

但是，如果我有一个页面显示数据库中的100行，那么它的加载速度不快（与短页面相比）。

如果我们等到文档准备就绪，用户就无法使用网站了。

如果我错了，请纠正我，或者说如果没有超时等问题，我们怎样才能让它与长篇文章一起使用。

Answer 1

您可以使用delegated events：处理程序附加到早期存在的父元素（例如文档对象），而不是等待创建/准备元素然后附加事件处理程序，总是存在。

示例：而不是

$('#mylink').on('click', function() { /* do something */ });

它＆＃39; S

$(document).on('click', '#mylink', function() { /* do something */ });

这通常在动态添加元素时使用，但它也可以正常工作＆＃34;当页面加载＆＃34;。

编辑：简短说明：

基本上是DOM事件＆＃34;冒泡＆＃34;：当点击一个元素时，事件不会被发送到该元素，而是发送给它的所有祖先，逐个上升到DOM树。该事件包含最初单击哪个元素的信息，您可以自己过滤/检查元素：

$(document).on('click', function(event) { 
  if( $(event.target).is('#mylink') ) {
    alert('the link was clicked');
  }
});

使用选择器作为.on()中的第二个参数jQuery为您进行过滤，并将this设置为链接而不是文档。

另见此示例：http://jsfiddle.net/qhsktpcs/

Answer 2

确保在此块中添加所有JS代码：

$( function( ) { 
    $( '#mylink' ).on( 'click' , function ( e ) {
         console.log ( 'link clicked' );
         e.preventDefault();
    });
    // the rest of your code ... 
});

否则，它将尝试在尚未创建的元素上注册click events（因为DOM还没有准备好），它将等待，直到所有内容都准备就绪（即使你有大约100行要从中提取）像你说的DB）

**编辑** 示例：http://jsfiddle.net/6ctd2hqs/1/

Answer 3

您可以测试您的页面是否准备就绪，然后开始附加监听器。例如。对于jQuery：

$.ready(function() {
  // listeners here
})

Jquery，链接/按钮的监听器和文档准备问题

3 个答案: