繁体   English   中英

链接列表:使用事件监听器使我的HTML结构尽可能简单

List of Links: Using Event Listeners to Keep My HTML Structure As Simple As Possible

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

只要我记得,我一直在做以下事情:

<ul>
  <li><a href="somewhere">Some text</a></li>
</ul>

因为它只是一个链接列表,没有别的,我知道我可以这样做来简化结构:

<ul>
  <li onclick="window.location.href='somewhere'">Some text</li>
</ul>

我刚刚将HTML结构减轻了50%。 如果我有100行,我将有100个元素而不是200个。

当然,我应该onclickonclick上使用事件监听器,但我不知道如何...如何使用事件监听器(而不是内联onclick )来创建链接列表? 看到这里的动机。

1 个回复

如果你不介意使用jQuery,你可以看看将点击处理程序绑定到元素的基本jQuery教程。 这样,您可以立即为所有 <li>设置onclick

http://jsfiddle.net/7zba5/1/

HTML:

<ul>
    <li data-url="http://www.google.com">Google</li>
    <li data-url="http://www.stackoverflow.com">Stack Overflow</li>
    <li data-url="http://www.superuser.com">Super User</li>
</ul>

JavaScript的:

$('li').click(function() {
    window.location.href = $(this).data('url');
});
1 通过使用单击事件侦听器将HTML减少50%?

我在这里阅读这篇文章,作者说: 还请尝试使您的HTML结构尽可能简单。 请记住以下几点: 可以始终替换为: 我们只是将HTML结构简化了50%。 如果您有100行,那么您将有100个标签而不是200个标签。(当然,在内联onclick上我甚至会使用侦听器。 ...

2 简单的事件系统,无法从列表中删除侦听器

我通过按照教程制作了一个简单的事件系统,侦听器的注册和触发事件运行良好,但是我无法从中删除任何侦听器。 这就是它的称呼(这是一个单例): 因此,我希望将侦听器从适当的列表中删除,但它会保留在那里。 UnregisterListener方法不执行任何操作。 有什么方法可以快速修 ...

2019-06-28 07:40:13 2 75   c#
3 在Javascript中添加事件侦听器会使我的数学(简单)加倍

我将尝试尽可能简洁,但超出了我的深度(我应该在婴儿游泳池中:) 我正在尝试为我的儿子创建一个简单的网站,该网站提供一个随机句子,并在其中应有副词的空白处出现。 然后,用户必须猜测下面显示的三个随机词中的哪一个是副词。 然后,我试图实现一个计分系统,这正是我的问题所在。 当按钮是静态的时,我让它工 ...

4 我的动态添加的事件侦听器在小屏幕上附加(使用完全相同的 html),但不在大屏幕上

我建了一个小网站,动态地将代码添加到 html divs 。 设置数据后,我使用div的id添加一个click事件和mouse enter/leave事件。 它只是普通的HTML 、 javascript和css 。 当我在小屏幕上打开页面时,事件会附加,但是当我调整屏幕大小或以大尺寸打开时,事件 ...

5 使用 JPA 事件侦听器时,是否可以注入实际事件?

我知道有 Hibernate 方法可以创建这样的事件侦听器: 和 JPA 方式是这样的: 我想使用通用的 JPA 解决方案。 JPA 中是否有某种方法可以访问实际事件(如休眠PostInsertEvent ),以便访问有关旧/当前状态、findDirty 属性等的实体状态信息? ...

6 列出元素的事件侦听器

尝试使用以下代码列出网站上的事件侦听器: 但是在console.log()行上获取了Undefined 。 这是一个网站,我需要查看“画廊”选项卡中&lt;a&gt;链接上附加了哪些事件侦听器。 编辑:有人可以告诉我如何收听附带的事件,或者删除它们,那会很棒。 浏览器: ...

2016-12-01 16:31:56 1 3546   jquery
7 是否可以在Android中链接事件监听器?

我有一个包含QuickContactBadges的活动。 我正在寻找一种方法,可以在QuickContactBadge上链接事件侦听器,也可以从覆盖内调用默认侦听器。 具体来说,我要执行的操作是单击QuickContactBadge,以显示QuickContact卡,然后单击setRes ...

8 可以为环境指定事件监听器吗?

我正在制作我的第一个laravel应用程序,并且我有一个UpdateLoginInfo类,该类更新用户的last_login值并增加他们已登录的次数。我在auth.login期间在EventServiceProvider中监听它,如下所示: 它的运行效果很好,但是在测试时,能够以不同的用 ...

9 可以导入jQuery事件监听器?

我在ZURB基础6.4框架(ZURB模板)中进行JS集成。 我已经了解了有关使用CommonJS和ES6导入和导出JS模块的一些基本知识,但是我决定坚持使用ES6。 现在,我有以下包含jquery Eventlisteners的JS代码: 现在,此代码位于非常JS文件中,然后通过 ...

10 是否可以在 jQuery 中嵌套事件侦听器

一旦“转换”结束,我将使用“transitionend”来运行进一步的代码。 我一直没有成功尝试嵌套事件侦听器,因此我可以在初始转换完成后观看进一步的转换。 从下面的代码中可以看出,我一直在进行测试,尝试先停止冒泡并删除以前的事件侦听器,但没有任何成功。 在下面,第一个偶数侦听器工作,然后第二 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM