Jquery 事件绑定 取消事件绑定 事件对象、阻止浏览器默认动作、阻止事件冒泡

1.事件绑定
jquery事件的简单操作:
$().事件类型(function事件处理);
$().事件类型();
1.1 jquery事件绑定
事件绑定后可以很方便地取消绑定。
$().bind(事件类型,function事件处理);
$().bind(类型1 类型2 类型3,事件处理); //给许多不同类型的事件绑定同一个处理
//不同事件使用”一个”空格分隔
$().bind(json对象); //同时绑定多个不同类型的事件
(事件类型:click mouseover mouseout focus blur 等等)
事件处理:有名函数、匿名函数
简单事件绑定:
在这里插入图片描述
给同一对象的多个不同类型事件绑定同一个处理:
在这里插入图片描述
json对象批量绑定事件:
在这里插入图片描述
1.2 取消事件绑定
之前取消事件:
dvnode.onclick = null; //dom1级事件取消
dvnode.removeEventListener(类型,(有名)处理,事件流); //dom2级事件取消
jquery方式取消事件绑定:
① $().unbind(); //取消全部事件(无视事件类型、无视处理函数类型)
② $().unbind(事件类型); //取消指定类型的全部事件(无视处理函数类型)
③ $().unbind(事件类型,有名(事件)处理函数); //取消指定类型事件的指定处理
注意:第③种取消事件绑定,事件处理必须是有名函数。

给div绑定多个事件:
在这里插入图片描述
在这里插入图片描述
2. 事件对象、阻止浏览器默认动作、阻止事件冒泡
$().bind(‘click’,function(evt){ });
$().click(function(evt){});
$().bind(‘mouseover’,f1);
function f1(evt){}
事件对象:就使用以上的evt即可,在jquery框架内部有做浏览器兼容处理。
以上evt对主流的事件对象 和 IE的事件对象有封装。
以上jquery事件的具体操作是对javascript底层代码的封装,具体:
dvnode.onclick = function(evt){}
dvnode.addEventListener(类型,funciton(evt){})
dvnode.attachEvent(类型,function(){window.event})
Jquery的evt是对javascript evt/event的封装

阻止浏览器默认动作、阻止事件冒泡:
dom2级浏览器默认动作阻止:
事件对象.preventDefault(); 主流浏览器
事件对象.returnValue = false; IE浏览器
dom2级事件冒泡阻止:
事件对象.stopPropagation(); 主流浏览器
事件对象.cancelBubule = true; IE浏览器
在jquery里边:

$().bind(‘click’,function(evt){
	evt.preventDefault();
	evt.stopPropagation();
});

preventDefault()方法是jquery的方法,名字与js底层代码的名字一致而已。
并且其有做浏览器兼容处理
stopPropagation()方法是jquery的方法,名字与js底层代码的名字一致。
其有做浏览器兼容处理

猜你喜欢

转载自blog.csdn.net/qq_37171379/article/details/89298685
今日推荐