自己寫的事件句柄綁定函數(shù)為什么沒用？

前端初學者，寫了一個簡單的事件句柄綁定函數(shù)。

<!DOCTYPE html>
<html>
<head>
    <title>class operation demo</title>
    <style type="text/css">
        .b1{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .b2{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>

    <script type="text/javascript">
        
        window.onload = function() {
            var btn01 = document.getElementById("btn01");
            var box = document.getElementById("box");

            function bind(obj,eventStr,callback) {
            if ( obj.addEventListener )
                obj.addEventListener(eventStr,callback,false);
            else
                obj.attachEvent("on" + eventStr,function(){
                    callback.call(obj);
                });
            }

            function changeClass() {
                // this.className += " b2";
                alert("test");
            }
            
            bind(btn01,"click",changeClass);
        };
    </script>
</head>
<body>
    <button id="btn01">點擊按鈕以后修改box的樣式</button>
        
    <br /><br />
        
    <div id="box" class="b1"></div>
</body>
</html>

提問已修改，現(xiàn)在的問題是：我想用這個按鈕改變指定div（例如body里面的id為box的那個div）的類，但是要怎么修改bind函數(shù)呢？或者有什么更好的解決方案呢？

回答

編輯回答

影魅

bind(btn01,"click",changeClass);傳入一個函數(shù)
你傳的是函數(shù)的返回值
補充：
給你寫個偽jq (jq不是這樣寫的是用的類)

function $(select) {
//你要求的只選擇id
    var el = select instanceof HTMLElement?select:document.getElementById(select);
    var r = {
        bind: function (eventStr, callback) {
            if (el.addEventListener)
                el.addEventListener(eventStr, callback, false);
            else
                el.attachEvent("on" + eventStr, callback);
            return this
        },
        addClass:function (str){
          if(!this.hasClass(str)){
            el.className = el.className+str
          }
          return this
        },
      hasClass:function(str){
        return el.className.split(' ').indexOf(str)>-1
      },
    };

    return r
}

調用：

//只能id的字符串 或者 單個dom元素
$("btn").bind('click', function (e) {
  $(this).addClass('active')
})

2018年3月7日 19:16

編輯回答

苦妄

bind(btn01,"click",changeClass())頁面加載完就函數(shù)changeClass()已經(jīng)執(zhí)行了，改成bind(btn01,"click",changeClass);會再點擊按鈕的時候alert（"test"）

function changeClass() {

    box.className += ' b2'
    // alert("test");
  }
  
  
  
  注意一下b2前面要有一個空格

2017年12月16日 16:03

編輯回答

莓森

以前看過node的爬取文章問什么有的右擊打開源碼基本沒東西了

2017年9月19日 08:35

編輯回答

舊時光

window.onload = function () {
    var btn01 = document.getElementById("btn01");
    var box = document.getElementById("box");

    function bind(obj, eventStr, callback) {
        if (obj.addEventListener) {
            obj.addEventListener(eventStr, callback, false);
        } else {
            obj.attachEvent("on" + eventStr, function () {
                callback.call(obj);
            });
        }
    }

    function changeClass() {
        this.className += " b2";
        alert("test");
    }

    bind(btn01, "click", changeClass);
};

bind(btn01, "click", changeClass); changeClass傳回調函數(shù)，而不是執(zhí)行完了的東西
代碼縮進做好，即使只有一句也要加{}

2018年5月15日 14:01