问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

自己写的事件句柄绑定函数为什么没用？

头像
Yiming_Li
    1811022

    前端初学者，写了一个简单的事件句柄绑定函数。

    <!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>

    提问已修改，现在的问题是：我想用这个按钮改变指定div（例如body里面的id为box的那个div）的类，但是要怎么修改bind函数呢？或者有什么更好的解决方案呢？

    cssjavascript
    阅读 2.6k
    4 个回答
    得票最新
    头像
    李十三
      13.6k31929

      bind(btn01,"click",changeClass);传入一个函数
      你传的是函数的返回值
      补充：
      给你写个伪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')
})
      头像
      babe
        963129
        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传回调函数，而不是执行完了的东西
        代码缩进做好，即使只有一句也要加{}

        头像
        千秋一寸心
          172314

          bind(btn01,"click",changeClass())页面加载完就函数changeClass()已经执行了，改成bind(btn01,"click",changeClass);会再点击按钮的时候alert（"test"）

          function changeClass() {

              box.className += ' b2'
    // alert("test");
  }
  
  
  
  注意一下b2前面要有一个空格
          头像
          风灵无畏
            1741126

            以前看过node的爬取文章 问什么有的右击打开源码基本没东西了

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题