addEventListener&onclick

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <ul id="color-list">
    <li id="addEvent">red</li>
    <li id="on_click">yellow</li>
  </ul>
  <script type="text/javascript">
    (function() {

      addEvent.addEventListener("click", function() {
        alert("我是addEvent1");
      }, false);
      addEvent.addEventListener("click", function() {
        alert("我是addEvent2");
      }, false);

      on_click.onclick = function() {
        alert("我是click1");
      }
      on_click.onclick = function() {
        alert("我是click2");
      }
      //如果id可以直接选择器的话,为什么这么写会错?
      color-list.style.color = 'blue';
      console.log(on_click)
    })();

  </script>
</body>

</html>

这两者的区别:
onclick只弹出一次:我是click2【第一次click事件会被第二次所覆盖】
addEventListener却可以先后运行,弹出两次,不会被覆盖。

不懂:
on_click和addEvent应该是未定义啊,为什么可以正确运行?
在sf上已解决:https://segmentfault.com/q/1010000013509289?utm_source=index-hottest

猜你喜欢

转载自blog.csdn.net/s1124yy/article/details/79432128