jQuery事件模型

提供了统一的事件处理方法

运行添加多个事件处理函数

使用标准事件名称(不带on)

事件实例作为时间处函数的第一个参数

标准化事件实例的最常用的属性

提供了统一的事件取消和组织默认行为的方法


添加事件处理

on(eventType[,selector][,data],handler)       参数:事件名称,选择器,数据,事件处理函数

比如

<script>

    $(function(){

        $('p').on('click',null,null,function(event)

    {

        console.log('p clicked');

    }

})

</script>

null不写也可以,可以链式绑定多个时间处理函数

第二个参数过滤比如'#p1-1'

第三个参数穿数据比如{ foo : 'bar'}

可以在函数里event.data获取到

事件委托:在父元素上绑定事件,再.target得到选择的对象


统一事件方法和属性

阻止冒泡stopPropagation()

阻止默认行为preventDefault()

阻止冒泡和默认行为return false

就是在事件里调用event.stopPropagation()这种

jQuery复习整理(2)

jQuery复习整理(2)

一次性的时间处理

one(eventType[,selector][,data],handler)

只执行一次


移除事件处理

off(eventType[,selector],handler)

不带任何参数就把所有事件处理都移除

jQuery复习整理(2)

jQuery复习整理(2)

红色表示有浏览器兼容问题,jq对兼容器做了处理

阻止冒泡stopPropagation()

阻止默认行为preventDefault()

立刻阻止事件处理函数防止冒泡,就是阻止本身后续绑定的事件stopImmediatePropagation()

另外

isStopPropagation()

isPreventDefault()

isImmediatePropagationStoped()

检测是否有,有就true,没就false



触发事件

大部分事件都是用户主动触发,我们有的时候想主动通过代码触发事件

trigger(eventType[,data])

triggerHandler(eventType[,data])

区别:后面相对前面,不会触发浏览器默认时间,不会产生冒泡,只触发jQ对象集合中的第一个元素的时间处理函数,返回的是事件处理函数的返回值而不是jQ对象,所以不能链式

前者更接近用户操作类型

后者主要是用于触发事件处理函数


快捷方法

jQuery复习整理(2)

jQuery复习整理(2)

eventName([data,]handler)


hover方法

弥补onmouseover()和onmouseout()不足

外部进内部也触发了外部


hover(enterHandler,leaveHandler)

hover(handler) 


自定义事件

监听器模式

和观察者模式

on(customEvent)

trigger(customEvent)


事件命名空间

eventName.namespace


Ajax

jQuery.ajax([settings])

jQuery复习整理(2)

$(document).ready(function(){

    $(search).click(function(){

$.ajax({

        type:"GET";

        url:"";

        datatype:"json";

         success:function(data){

        if(data.success){$("#searchResult").html(data.msg);}

        }else{$("#searchResult").html("出现错误"+data.msg);}

        error:function(jqXHR){

        alert("发生错误:"+jqXHR.status)

        }

    });

})


相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-06-10
  • 2022-12-23
  • 2021-12-04
  • 2021-07-11
  • 2021-03-29
  • 2021-07-09
猜你喜欢
  • 2021-09-05
  • 2021-09-13
  • 2021-12-31
  • 2021-12-21
  • 2021-05-25
  • 2021-11-17
  • 2022-12-23
相关资源
相似解决方案