2.VQuery事件

$函数

绑定事件

  • click方法
    显示隐藏——showhide方法
  • hover方法
    • 解决函数中的this问题
    • callapply

toggle方法

<p>鼠标移动到该段落。</p>
<button>切换 hide() 和 show()</button>
<input type="button" value="1">
<input type="button" value="2">
<script>
$('input').toggle();
</script>
  • 点击计数
VQuery.prototype.toggle = function() {
        var i =0;
        var count =0;
        for (var i = 0; i < this.elements.length; i++) {
            myAddEvent(this.elements[i],'click',function(){
                alert(count++);
            })
        }
};
计数器使用同一个count的情况
VQuery.prototype.toggle = function() {
    var i = 0;
    for (var i = 0; i < this.elements.length; i++) {
        addToggle(this.elements[i]);
    };

    function addToggle(obj) {
        var count = 0;   //count挪到这个位置
        myAddEvent(obj, 'click', function() {
            alert(count++);
        });
    }
};
实现以后的效果,分别计数
  • arguments的使用
    现在来实现这样的效果
$('input').toggle(function() {
            alert('a')
        },function(){
            alert('b')
        },function(){
            alert('c')
        });

下面来实现方法:

VQuery.prototype.toggle = function() {
    var i = 0;
    var _arguments = arguments;
    for (var i = 0; i < this.elements.length; i++) {
        addToggle(this.elements[i]);
    };

    function addToggle(obj) {
        var count = 0;   //count挪到这个位置
        myAddEvent(obj, 'click', function() {
            console.log(arguments)
            arguments[count%arguments.length].call(obj);
            count++;
        });
    }
};

报错:Uncaught TypeError: arguments[(count % > arguments.length)].call is not a function

查看arguments为空

arguments为空

因为这里argumentsfunction参数为0个。

function() {
            console.log(arguments)
            arguments[count%arguments.length].call(obj);
            count++;
        }

要调用toggleargument,老方法,定义_arguments。最后的结果:

VQuery.prototype.toggle = function() {
    var i = 0;
    var _arguments = arguments;
    for (var i = 0; i < this.elements.length; i++) {
        addToggle(this.elements[i]);
    };

    function addToggle(obj) {
        var count = 0;   //count挪到这个位置
        myAddEvent(obj, 'click', function() {
            _arguments[count%_arguments.length].call(obj);
            count++;
        });
    }
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容