【jQuery】(4)---jQuery常用事件

【jQuery入门】(4)---jQuery常用事件

 

一.常用事件列表                               

       1.blur()　　　　　　当失去焦点时触发。包括鼠标点击离开和TAB键离开。

　　2.change()　　　　 当元素获取焦点后，值改变失去焦点事触发。

　　3.click()　　　　　　当鼠标单击时触发。

　　4.dblclick()　　　　  当鼠标双击时触发。

　　5.focus()　　　　   当元素获取焦点时触发。注意：某些对象不支持。

　　6.select()　　　　　　   当input里的内容被选中时触发。

　　7.submit()　　　　　　 提交选中的表单。

 

二、事件常用方法                            

事件名称	说明
bind	绑定事件
hover	切换事件
toggle	顺序执行事件
unbind	移除事件
one	仅执行一次的事件
trigger	DOM加载完毕后自动执行的事件

 

 

 

 

 

 

 

2.1事件绑定

1）方式一：语法：bind(type,[data],fn)

　　type参数可以是顶部的22个方法(注意：不能带括号); 参数data是属性值传递给事件对象的额外数据，fn是处理函数。可以bind多个事件，也可以为同一事件绑定多个函数。

$('#d1').bind('click',function(){//正式写法，常用于解决浏览器兼容性
                $(this).html('hello java');    });

2）方式二（绑定的简写形式）：click( function(){} );

$('#d1').click(function(){//简写形式
                $(this).html('hello java');    });

2.2、切换事件

　语法：hover(fn1,fn2);　　　　鼠标移入执行第一个函数，鼠标移出执行第二个函数。相当于mouseenter与mouseleave。

$("#div1").hover(function(){alert("鼠标移入我啦");},function(){alert("鼠标移出我啦!");})　　

2.3、顺序执行事件

　　　　语法：toggle(fn1,fn2,fn3...)　  当鼠标单击时，依次执行绑定的事件

　$("#div1").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);})

2.4、unbind 移除事件

　　　　语法：unbind([type],[fn])　　　 移除元素已经绑定的事件,type：指定要移除的事件，fn指定要移除的方法。当没有参数时，所有的事件都移除。注意，用live()方法绑定的方法移出不了，live()绑定的方法要用它自己的die()来移出。

　$(":button").unbind();　　         // 移除按钮的所有事件。
　　　　$(":button").unbind("click");　　   //移除按钮的单击事件。
　　　　$(":button").unbind("click",fn1);　　   //移除按钮的单击事件中的fn1函数，如果该事件绑定了多个函数，对其他函数没影响。

2.5、one 仅执行一次的事件

　　　　语法：one(type,[data],fn)　　　　绑定一个仅执行一次的事件

　$("#div1").one("click",function(){ alert("我只执行一次!"); })

2.6、trigger DOM加载完毕后自动执行的事件

　　　　语法：trigger(type,[data])　　　　DOM元素加载完成后自动执行

$("#div1").bind("bclick",function(){ alert("你好"); });
　　　　$("#div1").trigger("bclick");　　　　//注意，trigger一定要放在绑定的事件之后，否则不执行。

2.7.ready()　　当DOM元素加载完成后绑定处理事件

$(document).ready()

 

三. jQuery中事件处理                    

3.1 获得事件对象

click(function(e){    //e：对底层的事件对象做了一个封装        });

3.2 事件对象的属性

①event.type：事件类型                     ②event.target：返回事件源（是DOM对象）

③event.pageX/pageY：返回点击的坐标

$(function(){
        $('a').click(function(e){//对两个对象都绑定了click
        //依据事件对象获得事件源，e是jQuery对象（封装了底层的事件对象）
        var obj=e.target;//target属性返回的是一个dom对象
        alert(obj.innerHTML);
        alert(e.pageX+","+e.pageY);//通过事件对象获得光标点击的X、Y坐标
        alert(e.type);                });                                        });
     <a href="javascript:;">Cilck 1</a><a href="javascript:;">Cilck 2</a>
//在开发过程中一般用$(this)获得当前对象

3.3 停止冒泡：event.stopPropagation()

$(function(){//e是Query封装后的对象，不能再用底层的cancelBubble属性
        $('a').click(function(e){        alert('点击的是连接');
        e.stopPropagation();//停止冒泡    });
        $('div').click(function(e){    alert('点击的是div');        });        });
     <div id="d1"><a href="javascript:;">Cilck Me</a></div>
//停止冒泡个人理解：在这里a标签和div都绑定了click事件，同时a标签是div的子类，所以在不停止冒泡的情况下，当你点击a标签那也会触发父类div的click事件，停止冒泡可以防止这种事情发生。

3.4 停止默认行为：event.preventDefault()

注意事项：原来的写法为<a href="del.do" onclick="return false"></a>

$(function(){
         $('a').click(function(e){        var flag=confirm('确定删除吗？');            
            if(!flag){    //阻止浏览器的默认行为，即不再向连接地址发请求
                e.preventDefault();        }        });       });
     <a href="del.do">删除</a>

 

 想的太多，做的太少，中间的落差就是烦恼，要么去做，要么别想 少尉【15】