事件

事件驱动:当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素,即可触发

常用事件:

  

绑定事件

  通过bind()方法为元素绑定事件,可传递三个参数band(type,[data],fn),type表示一个或多个类型的事件名字符串,多个事件用空格隔开;data作为event.data属性值传递一个额外的数据;fn表示绑定到指定元素的函数

  bind({type1:fn1,type2:fn2,...}:将事件和元素绑定

删除事件

  unbind():删除所有事件

  unbind(type):删除指定事件

  unbind(type,fn):删除指定事件的绑定函数

简写事件

  click(fn):单击事件

  dbclick(fn):双击事件

  mousedown(fn):鼠标左键按下事件

  mouseup(fn):鼠标左键弹起事件

  $(window).onload(fn):页面卸载事件

  $(window).resize(fn):文档改变大小事件

  $(window).scroll(fn):滚动条改变事件

  select(fn):文本选定事件

  change(fn):文本改变事件

  submit(fn):表单提交事件,作用对象是form

  mouseover(fn):当鼠标指针位于元素上方时,触发

  mouseout(fn):当鼠标指针离开元素上方时,触发

  mouseenter(fn):当指针进入元素时,触发

  mouseleave(fn):当指针移出元素时,触发

  keydown(fn):键盘按键按下事件,返回键码

  keyup(fn):键盘按键弹起事件,返回键码

  keypress(fn):键盘按键按下事件,返回字符编码

  focus(fn):得到焦点事件,必须作用在当前元素

  blur(fn):失去焦点事件,必须作用在当前元素

  focusin(fn):得到焦点事件,可作用子元素

  foucsout(fn):失去焦点事件,可作用子元素

复合事件

  ready(fn):当DOM加载完毕触发事件

  hover(fn1,fn2):结合mouseenter和mouseleave事件

事件对象:event对象,通过处理函数默认传递接受

  事件对象属性

属性名称 描述 举例
type
事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click.
$("a").click(function(event) {
            alert(event.type);
            });
target
获取事件触发元素DOM对象
$("a[href=http://google.com]").click(function(event) {
            alert(event.target.href);
            });
data
事件调用时传入额外参数.
$("a").each(function(i) {
            $(this).bind('click', {index:i}, function(e){
            alert('my index is ' + e.data.index);
            });
            });
relatedTarget
对于鼠标事件, 标示触发事件时离开或者进入的DOM元素
$("a").mouseout(function(event) {
            alert(event.relatedTarget);
            });
currentTarget
冒泡前的当前触发事件的DOM对象, 等同于this.
$("p").click(function(event) {
            alert( event.currentTarget.nodeName );
            });

结果:P

pageX/Y
鼠标事件中, 事件相对于页面原点的水平/垂直坐标.
$("a").click(function(event) {
            alert("Current mouse position: " + event.pageX + ", " + event.pageY );
            });
 screenX/screenY
获取显示器屏幕位置的水平/垂直坐标(非jQuery)
$("a").click(function(event) {
            alert("Current mouse position: " + event.screenX + ", " + event.screenY );
            });
clientX/clientY
获取相对于页面视口 的水平/垂直坐标(非Jquery)  
$("a").click(function(event) {
            alert("Current mouse position: " + event.clientX + ", " + event.clientY );
            });
result
上一个事件处理函数返回的值
$("p").click(function(event) {
            return "hey"
            });
            $("p").click(function(event) {
            alert( event.result );
            });

结果:”hey”

timeStamp
事件发生时的时间戳.
var last;
            $("p").click(function(event) {
            if( last )
            alert( "time since last event " + event.timeStamp - last );
            last = event.timeStamp;
            });

 

 which  获取鼠标的左中右键(1,2,3),或键盘的按键

 $('input').bind('mousedown',function(e){

  alert(e.which);

});

altKey/shiftKey/ctrlKey/metaKey  获取是否按下了alt、shift、ctrl或meta键

$('input').bind('click',function(e){

  alert(e.ctrlKey);

});

  冒泡行为:如果在页面中重叠多个元素,并且重叠的这些元素都绑定到同一个事件,就会出项冒泡问题

  阻止冒泡:在函数中使用stopPropagation()方法,可阻止冒泡

  默认行为:页面中的元素存在着许多默认行为,如右键document会出现菜单,点击超链接会打开新页面等等

  阻止默认行为:在函数中使用preventDefault()方法,可阻止默认行为

  阻止默认行为和冒泡:return false;

  isDefalutPrevented():判断是否调用了PreventDefault()方法

  isPropagationStopped():判断是否调用了stopPropagation方法

  stopImmediatePropagation():取消冒泡行为,并且取消该事件的后续事件处理函数

  isImmediatePropagationStopped():判断是否调用了stopImmediatePropagation方法

高级事件:

  模拟操作:模拟用户行为的操作

    trigger(operation):模拟用户的operation操作

    trigger(operation,[data1,data2,...]):data表示传递的数据,数据只有一个时,中括号可省略

    triggerHandle(operation):模拟用户行为,但不执行默认行为

    trigger和triggerHandle区别

      trigger会执行默认行为,triggerHandle不执行默认行为

      trigger会匹配所有元素,triggerHandle只返回第一个元素

      trigger返回JQuery对象,可使用连缀,triggerHandle()返回return值或undefined

      trigger会冒泡,triggerHandle不会冒泡

  命名空间

    在操作后面加上".***",可精确命名事件,方便调用

  事件委托:通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素,然后再进行处理

    方法:live(),默认绑定document元素,不推荐使用,JQ1.4.3以后废用

      作用:1、绑定的是父元素, 只会绑定一次事件,不会导致重复

         2、可动态绑定事件

      delegate():live的替代方法,语义清晰

      object.delegate(element,operation,function):object为绑定父元素对象,element为绑定的子元素,operation为对绑定元素的操作,function为调用的方法

  on、off、one:JQ1.7以后使用

    on:绑定方法

      on(operation[ operation2...],fn):operation绑定元素触发事件,可绑定多个;fn触发函数

      on(operation[ operation2...],data,fn):data传递额外的数据

      on({operation1:fn1,operation2:fn2,...}):多元素触发事件相应的函数

      on(operation,false):阻止默认行为和冒泡行为

      on(operation,element,fn):事件委托,element表示绑定的子元素

    off:解绑方法

      off(operation):移除某一元素的操作

      off(operation,fn):移除某一元素的函数

      off(operation,element,fn):解绑事件委托,element表示绑定的子元素

    one:只触发一次

      one(operation,fn):仅一次事件触发

      one(operation,element,fn):绑定的父元素也只触发一次

    

你可能感兴趣的:(事件)