javascript - 怎么用原生js写一个类似jQuery 里on方法的函数

问题描述

问 题

从https://segmentfault.com/q/10...看了但是还是没看明白，能不能来个大神详细讲解一下，现在我的问题就是：有一个页面（body）下面有5个div，用keydown事件控制焦点在5个div上移动，获得焦点的div动态添加class="focus";能否写一个函数来操作，当焦点停在class=focus的元素上时，给他绑定事件（也就是jQuery的on方法），最好把这个方法绑定到body上

解决方案

认真看一下好像没确定题主要的是什么。。我假设有5个class=focus的元素，随机点击任意元素

1.所有 HTML 元素都是或者继承自 HTMLElement 类型
2.HTMLElement.prototype.on ==》增加一个on函数，所有html元素都能使用
3.假如在body上绑定一个事件，判断是否冒泡自 class=focus 的元素，是就执行

HTMLElement.prototype.on = function(evt, cls , fn){
        this.addEventListener(evt, function(event){
            if(event.target.classList.contains(cls)){
                //使回调函数this指向的是class=focus的元素
                fn.call(event.target, event)
            }
        })
    }

    //例子：绑定在body上
    document.body.on('click', 'focus', function(event){
        console.log(this, event)
    })

这只是简单封装，可以考虑的情况

1. document不是HTMLElement类型
2. 需要绑定多个元素（数组），如document.querySelectorAll返回的是类数组
3. 需要绑定多个点击事件或class
4. 绑定的不一定是class，还有ID这些
5. on只传两个参数
   6.兼容问题

。。。。

考虑的有很多，列举一些供参考，有空补上

这篇关于javascript - 怎么用原生js写一个类似jQuery 里on方法的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！