div获取焦点响应事件失效及js事件委托机制

1.div的tabindex属性。当你直接为div绑定onfocus()是不会触发的,需要为标签添加tabindex属性。

 -1: 用户不能通过tab键选中,只能通过js或点击获得焦点

   0:用户可以使用tab键选中,通过js获取焦点

 >0:指定顺序


2.当为<li>绑定事件时刚开始的做法是为每个li绑定事件监听。之后想到js事件委托。

将事件监听器添加到它们的父元素,监听器会分析从子元素冒泡上来的事件,并找到具体的子元素:

<ul id="parent-list">

<li id="post-1">Item 1</li>

<li id="post-2">Item 2</li>

<li id="post-3">Item 3</li>

<li id="post-4">Item 4</li>

<li id="post-5">Item 5</li>

<li id="post-6">Item 6</li>

</ul>

// 找到父元素,添加监听器...

document.getElementById("parent-list").addEventListener("click",function(e) {

// e.target是被点击的元素!

// 如果被点击的是li元素

if(e.target && e.target.nodeName == "LI") {

// 找到目标,输出ID!

console.log("List item ",e.target.id.replace("post-")," was clicked!");

}

});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值