怎么在一个函数里控制一个按钮鼠标悬浮，离开，点击这3种状态呢？

Question

就是如果一个个的设onclick这些不是很麻烦吗，所以我就想能不能只调用一个函数就可以完成好几种变化，点击背景颜色改变这类样式变化。

Answer 1

建议你去《JavaScript高级程序设计》中看下什么是重载；

如果你不想看，那么推荐你使用jQuery，在JQ中有一个函数叫做jQ.on()；

方法的使用：

$('选择器').on({

    'click':function(){

         //在这里执行你的点击操作

     },

    'mouseover':function(){

        //在这里执行你的鼠标移入的操作

     },

    'mouseout':function(){

        //在这里执行你的鼠标移出操作

    }

});

Answer 2

你说的这种需求，策略模式是一种很好的应对，但是对于业务的扩展来说，有些时候还是不足的。

首先，一楼的说法必须得以来jQuery，在不依赖jQuery的前提下

我给出我的做法吧。

HTMLDOcument.prototype.getElementsByAttribute=function(attr){

    var result=[];
    
    var eles=document.getElementsByTagName("*");
    
    for(var i=0;i<eles.length;i++){
        if(eles[i].hassAttribute(attr)){
            results.push(eles[i]);
        }
    }
    
    return results;
};

function strategyMethodBind=function(srcElem,eventTypes){

    for(var item in eventTypes){
        srcElem.addEventListener(eventTypes[item].type,
        eventTypes[item].handler,false);
    }

}


window.onload=function(){

    [...document.getElementsByAttribute('strategy')].forEach(x=>{
    
        strategyMethodBind(x,{
            type:"click",
            handler:function(){
            
            }
        });
   
    })
}