前端按钮事件兼容性实现与懒加载函数优化-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button class="google">google</button>
  <button class="ie">IE</button>
<script>
  let google = document.querySelector('.google')
  let ie = document.querySelector('.ie')

  // 浏览器事件兼容性
  function addEvent(type, element, fun) {
    if(element.addEventListener) {
      element.addEventListener(type, fun, false)
    }else if(element.attachEvent) {
      element.attachEvent('on'+type, fun)
    }else{
      element['on'+type] = fun
    }
  }
  // 惰性函数方式
  /* function addEvent(type, element, fun) {
    if(element.addEventListener) {
      addEvent = function(type, element, fun) {
        element.addEventListener(type, fun, false)
      }
    }else if(element.attachEvent) {
      addEvent = function(type, element, fun) {
        element.attachEvent('on'+type, fun)
      }
    }else {
      addEvent = function(type, element, fun) {
        element['on' + type] = fun
      }
    }
    return addEvent(type, element, fun)
  } */
  // 惰性函数方式优化
  /* let addEvent = (function() {
    if(document.addEventListener) {
      return function(type, element, fun) {
        element.addEventListener(type, fun, false)
      }
    }else if(document.attachEvent) {
      return function(type, element, fun) {
        element.attachEvent('on'+type, fun)
      }
    }else {
      return function(type, element, fun) {
        element['on'+type] = fun
      }
    }
  })() */
  addEvent('click', google, ()=>{
    console.log('google')
  })
</script>
</body>
</html>