jq事件
1.jq事件处理
on() :用于绑定事件;
off():事件解绑;
trigger()/triggerHandler():事件触发;
1.事件处理on()绑定事件
1.可以绑定多个事件;
//绑定多个事件 $('div').on({
mouseenter:function(){
$(this).css('background','skyblue'); },
click:function(){
$(this).css('background','purple'); },
mouseleave:function(){
$(this).css('background','blue'); } });
//如果事件相同的话 $('div').on('mouseenter mouseleave',function(){
$(this).toggleClass('current');
})
2.可以事件委派操作,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素;
//把事件绑定在ul身上,点击li会把事件冒泡给ul,
$('ul').on('click','li',function(){ alert(111); })
3.动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件
// on可以给未来动态创建的元素绑定事件
$('ul li').click(function(){
alert(111111); })
var li = $('<li>动态添加的</li>');
$('ol').append(li);
1.事件处理off()解除绑定事件
off()方法可以移除通过on()方法添加的事件处理程序
//事件解绑off $('div').off();
//这个是解除了div身上的所有事件 $('div').off('click');
//这个是解除div身上的点击 $('ul').off('click','li');
//one()只触发一次,就不在触发
$('p').one('click',function(){ alert(111); })
3.事件处理trigger()自动触发事件
//1.元素.事件 $('div').click();
//会触发元素的默认行为
// 2.元素.triggle('事件') $('input').trigger('focus');
// 3.元素.triggerHandler('事件'); 就是不会触发元素的默认行为
$('div').triggerHandler('click'); $('input').on('focus', function () { $(this).val('hello world'); })
2.事件的切换
1.hover([over,]out)
$(".block").on("mouseover mouseout",function (){
console.log(1);
})
$(".block").hover(function (){
//over
console.log("鼠标悬停");
},function (){
//out
console.log("鼠标离开");
});
3.事件的封装方法
//blur([[data],fn])
//change([[data],fn])
//click([[data],fn])
//dblclick([[data],fn])
//error([[data],fn])1.8-
//focus([[data],fn])
//focusin([data],fn)
//focusout([data],fn)
//keydown([[data],fn])
//keypress([[data],fn])
//keyup([[data],fn])
//mousedown([[data],fn])
//mouseenter([[data],fn])
//mouseleave([[data],fn])
//mousemove([[data],fn])
//mouseout([[data],fn])
//mouseover([[data],fn])
//mouseup([[data],fn])
//resize([[data],fn])
//scroll([[data],fn])
//select([[data],fn])
//submit([[data],fn])
例:
//$(".block").click(100,function (e){
// console.log("单击", e.data);
//}).mousedown(function (){
// console.log("鼠标按下");
//}).mouseenter(function (){
// console.log("鼠标进入");
//}).mouseleave(function (){
// console.log("鼠标离开");
//});
事件的执行参数
//eve.currentTarget //当前点击的目标元素
//eve.data //事件传递的数据
//eve.delegateTarget1.7+ //在事件委托中 获取委托的元素
//eve.isDefaultPrevented() //返回值true/false 是否使用过preventDefault
//eve.isImmediatePropag…()
//eve.isPropagationStopped() //返回值true/false 是否使用过stopPropagation
//eve.namespace
//eve.pageX
//eve.pageY
//eve.preventDefault() 阻止事件的默认行为
//eve.relatedTarget
//eve.result
//eve.stopImmediatePro…()
//eve.stopPropagation() 阻止事件冒泡
//eve.target 执行事件的目标元素
//eve.timeStamp 执行的事件 ms
//eve.type 类型
//eve.which 键盘上的ascii值 1 是 鼠标
上一篇: html清除浮动的方法
下一篇: 元素浮动以及清除浮动的方法