一、click( ) 与 dblclick() --双击
- click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发
- 在同一元素上同时绑定 click 和 dblclick 事件是不可取的。
$(".div").click(function(){
alert("hello")
})
$('p').click(function(e) {
alert(e.target.textContent); // 打印所点击对象的文本
})
function abc(e) {
alert(e.data) //1111
}
$("button:eq(2)").click(1111, abc); // 点击按钮,调用data方法
//click 事件的3种写法
//1
$("#box").click(function(){
alert("Hello ");
});
//2
$('#box').bind("click", function(){
alert("Hello");
});
//3
$('#box').on('click', function(){
alert("Hello");
});
二、mousedown() 与 mouseup()
- mousedown强调是按下触发
- 任何鼠标按钮被按下时都能触发mousedown事件
- 用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3
// 点击按钮,弹出是哪个键按下了,左键是1,中间滚轮是2,右键是3
$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which)
})
function fn(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").mousedown(1111, fn)
}
a();
三、mousemove() 鼠标移动
- mousemove事件是当鼠标指针移动时触发的,即使是一个像素
- 如果处理器做任何重大的处理,或者如果该事件存在多个处理函数,这可能造成浏览器的严重的性能问题
<div class="aaron1"> <p>鼠标在绿色区域移动触发mousemove</p> <p>移动的X位置:</p> </div> $(".aaron1").mousemove(function(e) { $(this).find('p:last').html('移动的X位置:' + e.pageX) })
四、mouseover() 与 mouseout()
移入移出事件
<div class="aaron1">
<p>鼠标移进此区域触发mouseover事件</p>
<a>进入元素内部,mouseover事件触发次数:</a>
</div>
var n = 0;
//绑定一个mouseover事件
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html('进入元素内部,mouseover事件触发次数:' + (++n))
})
五、mouseenter() 与 mouseleave()
与mouseover() /mouseout() 类似
mouseenter事件和mouseover的区别
关键点就是:冒泡的方式处理问题
简单的例子:
mouseover为例:
<div class="aaron2">
<p>鼠标离开此区域触发mouseleave事件</p>
</div>
如果在p元素与div元素都绑定mouseover事件,鼠标在离开p元素,但是没有离开div元素的时候,触发的结果:
- p元素响应事件
- div元素响应事件
这里的问题是div为什么会被触发? 原因就是事件冒泡的问题,p元素触发了mouseover,他会一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就会被触发
所以在这种情况下面,jQuery推荐我们使用 mouseenter事件
mouseenter事件只会在绑定它的元素上被调用,而不会在后代节点上被触发
<style>p{height: 50px;border: 1px solid red;margin: 30px;}</style>
<div class="aaron1">
<p>鼠标离开此区域触发mouseover事件</p>
<a>mouseover事件触发次数:</a><br/>
<a>mouseover冒泡事件触发次数:</a>
</div>
<div class="aaron2">
<p>鼠标进入此区域触发mouseenter事件</p>
<a>mouseenter事件触发次数:</a><br/>
<a>mouseenter冒泡事件触发次数:</a>
</div>
var i = 0;
$(".aaron1 p").mouseover(function(e) {
$(".aaron1 a:first").html('mouseover事件触发次数:' + (++i))
})
var n = 0;
$(".aaron1").mouseover(function() {
$(".aaron1 a:last").html('mouseover冒泡事件触发次数:' + (++n))
})
<script type="text/javascript">
var i = 0;
$(".aaron2 p").mouseenter(function(e) {
$(".aaron2 a:first").html('mouseenter事件触发次数:' + (++i))
})
var n = 0;
$(".aaron2").mouseenter(function() {
$(".aaron2 a:last").html('mouseenter冒泡事件触发次数:' + (++n))
})
</script>
六、hover() 事件
在元素上移进移出切换其换色,一般通过2个事件配合就可以达到,这里用mouseenter与mouseleave,这样可以避免冒泡问题
$(ele).mouseenter(function(){ $(this).css("background", '#bbffaa'); }) $(ele).mouseleave(function(){ $(this).css("background", 'red'); })
直接用一个hover方法,可以便捷处理
$("p").hover(function(){
$(this).css();
})
七、focusin() 与 focusout()
当一个元素,或者其内部任何一个元素获得焦点的时候,
例如:input元素,用户在点击聚焦的时候,如果开发者需要捕获这个动作的时候,jQuery提供了一个focusin事件<input type="text" />
$("input:first").focusin(function() { $(this).css('border','2px solid red');// input 获得焦点,边框变红 })
$("input:first").focusout(function() {
$(this).css('border','2px solid blue');// 失去焦点,
})
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin('请输入你的名字', fn)
}
a();
focus blur 事件在表单事件里