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

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

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

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

 >0:指定顺序


2.当为

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

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

    <ul id="parent-list">

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

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

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

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

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

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

    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!");

    }

    });

  • 你可能感兴趣的:(javascript)