JQ事件和事件对象
2018-11-20 本文已影响0人
三岁麻麻
bind()
bind(type [,data],fn);
第二个参数可选，传递给事件对象等额外数据对象 ？？
<ul class="test">
<li title='香蕉'><strong class="bn">香蕉</strong></li>
<li title='香蕉'><strong>苹果</strong></li>
</ul>
<script >
$(function(){
$("li:eq(0)").bind('click',function(){
var ap = $(this).next();//this是携带相应行为的DOM元素
if( ap.is(":visible") ){
ap.hide();
}else{
ap.show();
}
});
});
</script>
简写绑定事件
$().click(function(){});
绑定多个事件直接后面加.
$().mouseover(function(){}).mouseout(function(){});
hover()合成事件
hover(enter,leave);
$(function(){
$('.test').hover(function(){
console.log('鼠标经过');
},function(){
console.log('鼠标离开');
});
});
toggle()合成事件
模拟鼠标连续点击事件
toggel(fn1,fn2,····fnN);依次促发 循环调用
$(function(){
$('.test').toggle(function(){
console.log('第一次');
},function(){
console.log('第二次');
},function(){
console.log('还可以很多次');
});
});
event 事件对象
| 方法 | 介绍 | 示例 |
|---|---|---|
| event.type | 获取事件类型 | |
| event.preventDefault() | 阻止默认事件 | |
| event.stopPropagation() | 阻止事件冒泡 | |
| event.target() | 获取促发事件的元素 | |
| event.relatedTarget | mouseout和mouseover所发生的元素 | |
| event.pageX event.pageY | 光标相对于页面x轴和y轴的坐标 | |
| event.which | 获取鼠标鼠标的左中右键和键盘的按键 | |
| event.metaKey | 键盘中获取<ctrl>键 |
还有更多其他方法 自己查
移除事件
可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件
$(function(){
$('.test').bind('click',function(){
$('.test').append("我是1")
}).bind('click',function(){
$('.test').append("我是2")
}).bind('click',function(){
$('.test').append("我是3")
});
$('.test').unbind('click');//移除绑定事件 参数可以为空
});
若要删除指定的绑定元素 则需要为匿名处理函数指定一个变量
$(function(){
$('.test').bind('click',myFun1 = function(){
$('.test').append("我是1")
}).bind('click',myFun2 = function(){
$('.test').append("我是2")
}).bind('click',myFun3 = function(){
$('.test').append("我是3")
});
$('.test').unbind('click',myFun2);//添加命名
});
one()方法 函数只在第一次用户操作时候执行
one( type, [data],f n );
$(function(){
$('.test').one('click',myFun1 = function(){
$('.test').append("我是1")
});
});
1.7后新增 on(),off(),delegate(),undelegate()
--事件命名空间以及不同命名空间的执行方法--
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>doc测试学习</title>
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<ul class="test">
<li title='香蕉'><strong class="bn">香蕉</strong></li>
<li title='香蕉'><strong>苹果</strong></li>
</ul>
<span >执行不在命名空间的事件</span>
<b>执行自定义事件</b>
<i>移除自定义事件<i/>
<script >
$(function(){
$('.test').bind('click',function(){
console.log(1);
});
$('.test').bind('click.plugin',function(){
console.log(2);
});
$('.test').bind('dbclick',function(){
console.log(3);
});//dbclick是自定义事件 可以通过trigger()来触发
$('span').click(function(){
$('.test').trigger('click!');
//click! !表示不包含在命名空间内的click方法
//去掉！ 则表示两者都被触发
});
$('b').click(function(){
$('.test').trigger('dbclick');
//执行自定义事件
});
$('i').click(function(){
$('.test').unbind('dbclick');
//移除dbclick自定义事件
});
});
</script>
</body>
</html>
