请问为什么不代理的时候会报错？

来源：19-2 事件-代码演示

最和缓的阳光

2018-03-26

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
</head>
<body>
    <div id="div1">
      <a href="http://imooc.com" id="link1">imooc</a>
      <a href="http://imooc.com" id="link2">imooc</a>
      <p>imooc</p>
      <a href="http://imooc.com" id="link3">imooc</a>
      <a href="http://imooc.com" id="link4">imooc</a>
      <p id="p1">激活</p>
      <p id="p2">取消</p>
    </div>
    <div id="div2">
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>

    <script type="text/javascript">

      function bindEvent(elem, type, selector, fn){
        if (fn === null) {
          fn = selector
          selector =null
        }
        elem.addEventListener(type, function(e){
          var target
          if (selector) {
            // 代理
            target = e.target
            // console.log(target)
            if (target.matches(selector)) {
              fn.call(target, e)
            }
          } else {
            //不是代理
            fn(e)
          }
        })
      }


      var div1 = document.getElementById('div1')
      bindEvent(div1, 'click', 'a', function(e){
        e.preventDefault()
        console.log(this.innerHTML)
      })

      
      var p1 = document.getElementById('p1')
      bindEvent(p1, 'click', function(e){
        console.log(p1.innerHTML)
      })

    </script>
</body>
</html>

SyntaxError: 'function(e){ console.log(p1.innerHTML) }' is not a valid selector

写回答

1回答