jQuery事件绑定:
- 简单事件绑定
jQuery.click(fn) //单击事件
//jQuery对象直接点出来
缺点:不能一次注册多个事件
2. bind方式注册事件(了解)
jQuery.bind(eventType,fn)
//第一个参数:事件类型
//第二个参数:事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});
jQuery.bind(json)
//json为对象{事件类型:事件处理函数,事件类型:事件处理函数...}
$("p").bind({
click:function () {
alert("呵呵")
},
mouseenter:function () {
alert("哈哈")
}
});
缺点:不支持动态事件绑定
- delegate注册委托事件(了解)
jQuery.delegate(selector,eventType,fn)
//这是给父级注册委托事件,利用事件冒泡的原理,对子元素进行操作时
//会冒泡到父级元素,判断是否为 selector 以及 事件类型,如果是就执行处理函数
//反之,不执行
// 第一个参数:selector,要绑定事件的元素
// 第二个参数:事件类型
// 第三个参数:事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
缺点:只能注册委托事件
- on注册事件(重点)
jQuery.on(events[,selector][,data],handler);
// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
A.on注册简单事件
// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
$(selector).on( "click", function() {});
B.on注册委托事件,同样是利用事件冒泡
// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on( "click",“span”, function() {});
jQuery事件执行顺序:先执行自己的委托事件,再执行自己的事件,然后,冒泡父级元素,重复上述
jQuery事件解绑:
- unbind方式(不用)
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
- undelegate方式(不用)
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
- off方式(重点)
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件,这种方式会把 委托事件为click 也解绑
$(selector).off("click");
这三种解绑不需要对应解绑,每种都是可以把三种方式注册的事件全部解绑
例子:
<div>
<p>111111</p>
<p>111111</p>
</div>
// 这个是p自己注册的事件(简单事件)
$("p").on("click", function () {
console.log("呵呵哒");
});
//给div自己执行的
$("div").on("click", function () {
console.log("呜呜呜");
});
//给div里面的p执行 委托事件
$("div").on("click", "p", function () {
console.log("嘿嘿嘿")
});
//$("p").off("click");//嘿嘿嘿 呜呜呜
//$("div").off("click");//呵呵哒
jQuery事件触发
扫描二维码关注公众号,回复:
5250165 查看本文章
//点击$("#btn")对象,触发p元素的点击事件
$("#btn").on("click",function () {
//触发p元素的点击事件
//$("p").click();
//$("p").trigger("click");
});