Event_Delegation - LilyLiya

refer to: https://www.udemy.com/course/the-web-developer-bootcamp/

要求点击事件进行删除操作：在下面的例子中，要求点击每一个li时就把被点击的li删除掉

如果只是单纯的定位所有的原始的li群组，遍历这个群组，然后对它进行点击事件的操作的话，只会对于已经存在的li（两个已经存在的"I AM LI"）有作用，而通过post按钮新增的li不会起作用，所以我们在这儿是直接定位到li的parent，然后选中parent的某个子节点(e.target.nodeName === 'LI')进行删除，nodeName = "P"的那个paragraph元素不会被删除，但是如果是直接e.target.remove()的话，paragraph被点击也会被删除，因为它存在于整个ul内部。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation</title>
</head>

<body>
    <h1>Event Delegation</h1>

    <form action="/dogs" id="tweetForm">
        <input type="text" name="username" placeholder="username">
        <input type="text" name="tweet" placeholder="tweet">
        <button>Post Tweet</button>
    </form>

    <h2>Tweets:</h2>
    <ul id="tweets">
        <li>I AM LI!!!</li>
        <li>I AM LI!!!</li>
        <p>aslkdjaslkdjaksl</p>
    </ul>

    <script src="app.js"></script>
</body>

</html>

const tweetForm = document.querySelector('#tweetForm');
const tweetsContainer = document.querySelector('#tweets');
tweetForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const usernameInput = tweetForm.elements.username;
    const tweetInput = tweetForm.elements.tweet;
    addTweet(usernameInput.value, tweetInput.value)
    usernameInput.value = '';
    tweetInput.value = '';
});

const addTweet = (username, tweet) => {
    const newTweet = document.createElement('li');
    const bTag = document.createElement('b');
    bTag.append(username)
    newTweet.append(bTag);
    newTweet.append(`- ${tweet}`)
    tweetsContainer.append(newTweet);
}

tweetsContainer.addEventListener('click', function (e) {
    console.dir(e.target); //check the details of the e.target,can check the nodeName first 
    e.target.nodeName === 'LI' && e.target.remove();//只有当nodeName是LI时才会删除
})

posted on 2021-01-23 00:31 LilyLiya 阅读(51) 评论(0) 收藏举报

刷新页面返回顶部