如何给一个按钮实现多个事件

Question

按钮功能

点击一个按钮后，按钮颜色改变，同时触发点击事件

按钮

<button type="button" class="colorchange" onclick="gr('.changeX','.changeY');">Windows</button>
<button type="button" class="colorchange" onclick="gr('.changeY','.changeX');">macOS</button>

点击事件的JS原生代码

function gr(s1,s2){
    var x = document.querySelectorAll(s1);
    var y = document.querySelectorAll(s2);

    var i;
    for (i = 0;i < x.length;i++){
        x[i].style.display = 'block';
    }
    for (i = 0;i < y.length;i++){
        y[i].style.display = 'none';
    }
}

按钮改变的JS原生代码

var lis = document.getElementsByClassName("colorchange");
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function(ind) {
        return function() {
            addClass(this, "active");
            var sib = siblings(this);
            for (var j = 0; j < sib.length; j++) {
                removeClass(sib[j], "active");
            }
        }
    }(i)
}
//样式函数
function addClass(obj, name) {
    obj.className = obj.className + " " + name;
}
//获取其他按钮
function siblings(obj) {
    var sibArr = obj.parentNode.children;
    var sibNewArr = [];
    for (var i = 0; i < sibArr.length; i++) {
        if (sibArr[i] != obj) {
            sibNewArr.push(sibArr[i]);
        }
    }
    return sibNewArr;
}
//删除样式函数
function removeClass(obj, name) {
    var classStr = obj.className;
    var classArr = classStr.split(" ");
    var classNewArr = [];
    for (var i = 0; i < classArr.length; i++) {
        if (classArr[i] != name) {
            classNewArr.push(classArr[i]);
        }
    }
    obj.className = classNewArr.join(" ");

Answer 1

一个按钮实现多个事件的话，需要传递不同的参数，然后根据参数去改变值

Answer 2

没必要想那么复杂，你就用一个点击事件 ，把改变颜色和你想让点击事件干的事一块做了，效果是一样的

Answer 3

你可以写a方法,b方法,c方法 然后用一个触发的方法绑定你的dom 触发的时候 调用a,b,c就好了

Answer 4

根据你的描述，我猜测你应该是要实现这样的功能：只有一个按钮，在Window系统和Mac系统下，分别显示不同的文案，点击时执行不同的事件。那么我认为，你无须写两个button。以下为个人看法：首先，用HTML写一个button，button上有一个属性data。data的值用来标注是Windows还是Mac。当然你可以用JS动态赋值上去。比如0代表WIndows，1代表Mac。button上面显示的文字也是，可以默认一个，也可以通过JS动态赋值。然后就是点击事件。当点击的时候，先判断data的值。然后用一个if else 来执行不同的事件。另外，如果你想要点击切换的话，也可以执行点击的时候改变data的值。这样，在下次点击的时候data的值改变了，就会去执行另外一个方法了。不知道有没有讲明白，如果有需要，请追问。

Answer 5

改用addEventListener绑定事件&nbsp;&nbsp;&nbsp;&nbsp;lis[i].addEventListener("click",&nbsp;function(ind)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addClass(this,&nbsp;"active"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;sib&nbsp;=&nbsp;siblings(this); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;j&nbsp;=&nbsp;0;&nbsp;j&nbsp;<&nbsp;sib.length;&nbsp;j++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;removeClass(sib[j],&nbsp;"active"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}(i),&nbsp;false);