关于定义多个事件的疑惑

来源：2-8 DOM0级事件

神尾观铃丶

2019-09-09 15:03:20

2-9课程内老师说了，DOM 0级事件的引入是为了处理定义多个事件；但是按照视频内的写法，依旧还是只能用来定义一个事件呀，我个人认为与在标签上写事件没有什么区别，老师能跟我讲一下如何定义多个事件吗？

还有下方的代码，是我为了尝试在li上定义多个相同事件的代码，最后在控制台输出报错了，console.log(x[i])和console.log(this.x[i])都报错了，想问一下是为什么

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>

    <script>
        var x = document.getElementsByTagName("li");
        for (var i = 0; i < x.length; i++) {
            console.log(x.length);
            x[i].onclick = function () {
                console.log(this.x[i]);
            }
        }
    </script>
</body>

</html>

写回答

2回答

好帮手慕慕子

2019-09-09

已采纳

同学你好，

老师这里举个简单的例子，帮助同学理解两种方式的区别。例如：我们需要修改li绑定点击事件为鼠标移入事件的时候，如果是写在标签上的话，那就需要一个一个的修改标签上事件，但如果使用DOM0级事件，只需要在js中修改一句代码就可以了。而且，将html结构和js逻辑代码分开，更符合编码的规范哦
同学粘贴的这段代码就是同时给li绑定多个事件哦
代码报错主要是因为js作用域的问题，同学目前先了解是这个原因造成的报错，后面js高级课程中老师详细的讲解什么是作用域
建议：可以调整代码直接输出this, 就是指向当前点击的元素哦