jq绑定事件的方法

末蓝、 2022-05-27 00:11 230阅读 0赞

bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+ ，所以jq事件绑定可以直接都使用on来代替其他三种。

$(selector).on(event,childselector,data,function)

event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

单事件处理：例如 $(selector).on("click",childselector,data,function);

多事件处理：1.利用空格分隔多事件，例如 $(selector).on("click dbclick mouseout",childseletor,data,function);

2.利用大括号灵活定义多事件，例如 $(selector).on(\{event1:function, event2:function, ...\},childselector);

空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；

childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；

data：可选；需要传递的参数；

function：必需；当绑定事件发生时，需要执行的函数

$(".container").on({drop:function(e){
    	e.preventDefault();
        //jquery的file要去e.originalEvent里面拿
        var files = e.originalEvent.dataTransfer.files;
        console.log(files);
        alert(1)
    }})

$(".container").on("drop",function(e){
    	e.preventDefault();
        //jquery的file要去e.originalEvent里面拿
        var files = e.originalEvent.dataTransfer.files;
        console.log(files);
        alert(1)
    })

以上方式只能给页面已有元素绑定事件，如果给未来添加进来的元素绑定事件，比如给p绑定事件，用

$(".container").on("drop","p",function(e){
    	e.preventDefault();
        //jquery的file要去e.originalEvent里面拿
        var files = e.originalEvent.dataTransfer.files;
        console.log(files);
        alert(1)
    })