如何知道点击事件中被点击的内容？

Question

var list = document.createElement("div");
        list.classList.add("list");
        list.innerHTML = '<ul>'+
                        '<li class="on">'+
                            '<span>1</span>'+
                        '</li>'+
                        '<li class="on">'+
                            '<span>2</span>'+
                        '</li>'+
                        '<li>'+
                            '<span>3</span>'+
                        '</li>'+
                        '<li>'+
                            '<span>4</span>'+
                        '</li>'+
                        '<li>'+
                            '<span>5</span>'+
                        '</li>'+
                    '</ul>';

list.addEventListener("click", function(e){
     //How to get the li I clicked
});

我创建了元素作为createElement，内容创建了innerHTML。我创建了一个点击事件。 我不确定如何获得我单击的li。

Answer 1

您可以使用event.target属性：

var list = document.createElement("div");
        list.classList.add("list");
        list.innerHTML = '<ul>'+
                        '<li class="on">'+
                            '<span>1</span>'+
                        '</li>'+
                        '<li class="on">'+
                            '<span>2</span>'+
                        '</li>'+
                        '<li>'+
                            '<span>3</span>'+
                        '</li>'+
                        '<li>'+
                            '<span>4</span>'+
                        '</li>'+
                        '<li>'+
                            '<span>5</span>'+
                        '</li>'+
                    '</ul>';

list.addEventListener("click", function(e){
  console.log('clicked', e.target);
});

document.body.append(list);