创建事件绑定函数

最新推荐文章于 2023-05-20 01:04:43 发布

TomKing9

最新推荐文章于 2023-05-20 01:04:43 发布

阅读量443

点赞数

分类专栏： js学习

本文链接：https://blog.csdn.net/tomking9/article/details/121788074

版权

JavaScript 事件绑定事件代理函数 DOM元素

关键词由CSDN通过智能技术生成

js学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

是同时能用于普通和代理绑定的事件绑定函数，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#">链接1</a>
  <a href="#">链接2</a>
  <a href="#">链接3</a>
  <button>加载更多。。。</button>
</body>

<script>
  function bindEvent(elem, type, selector, fn) {
    if (fn == null) {  //等于null或者undefined
      fn = selector
      selector = null
    }
    elem.addEventListener(type, event => {  //event由addEventListener传入，包含了触发事件对象的相关信息
      const target =  event.target
      if (selector) {
        // 代理绑定
        if (target.matches(selector)) {
          fn.call(target, event)
        }
      } else {
        //普通绑定
        fn.call(target, event)  //这里是执行fn
      }
    })

  }
  const btn = document.getElementsByTagName('button')[0]
  bindEvent(btn, 'click', function (event) {  //这里是执行bindEvent，定义fn
    console.log(event)
    event.preventDefault()
    alert(this.innerHTML)
  })

  //代理绑定
  const body = document.getElementsByTagName('body')[0]
  bindEvent(body, 'click', 'a', function (event) {
    event.preventDefault()
    alert(this.innerHTML)
  })
</script>
</html>

执行效果：http://cdn.tangmingkang.top/H9W%5B%7DRB0D%7BEXC4%5B62TMH%25S6.png

TomKing9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建事件绑定函数

是同时能用于普通和代理绑定的事件绑定函数，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫

专栏目录