jQuery---关于事件的运用

事件绑定

事件解绑

交互事件

事件绑定

bind(type,[,data],fn)

type:事件类型

data:作为event.data属性值传递给事件对象的额外数据对象

function greet(event){
    alert("hello"+event.data.name);    
}
$('button').bind('click',{name:'cc'},greet);

fn：处理函数

on(event,[,selector][,data],handler)

//打印tbody-->tr的文本信息
$('#table tbody tr').on('click',function(){
        console.log($(this).text());
});
//和上面的等价
$('#table tbody').on('click','tr',function(){
        console.log($(this).text());
});

事件解绑

unbind()

unbind('click');

删除元素的所有绑定click的事件

unbind('click',handle1)

移除handle1的绑定事件

off()

没有参数，则删除所有绑定的事件

有参数，则删除该类型的绑定事件

交互事件

hover()

用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个fn，当光标移出这个元素时，会触发指定的第2个函数。

移入移出触发的是mouseenter和mouseleave.

$('.ulList').hover(function(){
    $(this).css('background','orange');
},function(){
$(this).css('background','');
});
<ul class="ulList">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

toggle()

用于模拟鼠标连续单击事件。第一次点击会触发指定的第一个fn，第二次点击会触发指定的第2个函数。如果有更多的函数则依次执行。随后每次点击则重复对这些函数轮番调用。该事件在jQuery1.9版本后被删除,实现切换该用方法。


$(function(){
    $('button').click(function(){
	    $p=$(this).next('p');

        if($p.is(":visible")){
            $p.hide();
        }else{
            $p.show();
        }
    });
       //将上面的用toggle改写
    $('.more').click(function(){
         $(this).next('div.content').toggle();
    });

});

<body>
    <button class="more">查看更多</button>
    <div class="content">
        这是一个关于...
    </div>
</body>

事件冒泡

冒泡是指在子元素和父元素都绑定同一个事件，当子元素触发时，父元素的此事件也会触发。js冒泡相关操作请看DOM事件

事件对象

jQuery中对事件进行了兼容处理，能够轻松获取事件对象以及对象的属性。

$('element').bind('click',function(event){

    //event 事件对象

})

阻止冒泡

event.stopProagation()

阻止默认

event.preventDefault()

**:阻止默认也可以写成 return false

事件对象的属性

event.type()

该方法作用是可以获取事件类型

event.target()

获取触发事件的元素

event.pageX()，event.pageY()

该方法获取点击页面的x坐标和y坐标。

event.which()

获取鼠标单击事件中获取到鼠标的左、中、右键分别返回1、2、3

模拟操作

trigger()


$('btn').click()
//和上面等价
$('btn').trigger('click')

加载DOM

$(document).ready()方法

该方法是在DOM载入就绪时就对其进行操作并调用执行他它所绑定的函数。

绑定多个事件则移除执行。

window.onload

是页面所有的元素(包括所关联文件)完全加载后才执行。若多次绑定则只执行最后一次绑定的事件。