JQuery中的常用事件

JQuery中的常用事件

.click()	鼠标单击触发事件，参数可选（data，function）
.dblclick()	双击触发，同上
.mousedown()/up()	鼠标按下/弹起触发事件
.mousemove()	鼠标移动事件
.mouseover()/out()	鼠标移入/移出触发事件
.mouseenter()/leave()	鼠标进入/离开触发事件*
.hover(func1,func2)	鼠标移入调用func1函数，移出调用func2函数
.focusin()	鼠标聚焦到该元素时触发事件
.focusout()	鼠标失去焦点时触发事件
. focus()/.blur()	鼠标聚焦/失去焦点触发事件（不支持冒泡）
.change()	表单元素发生改变时触发事件
.select()	文本元素被选中时触发事件
.submit()	表单提交动作触发*
.keydown()/up()	键盘按键按下/弹起触发
.on()	多事件的绑定
.off()	移除事件的绑定
.trigger(“event”)	触发事件event调用
.triggerHandler()	触发事件，不会冒泡，不会触发默认事件

注：

1、以上事件函数有三种用法：

//直接绑定事件到元素上
$('.target1').keydown(function(e) {
    $("em:first").text(e.target.value)    //通过对象e获取输入的值
});

//传递参数调用函数处理
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 通过e传递参数数据
});

//手动触发已绑定的点击事件
$elem.click()

2、mouseover与mouseenter区别：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件，称作支持冒泡处理，冒泡处理指子元素与父元素共同定义的事件，在触发子元素时，或者没有定义子元素，事件就会向父级传播，引发父级事件触发。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

3、form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为。传统的方式是调用事件对象  e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可。

    //回车键或者点击提交表单后禁止浏览器默认跳转：
    $('#target2').submit(function() {
        alert('捕获提交表达动作,阻止页面跳转')
        return false;
    });

4、on（）使用

基本用法：.on( events ,[ selector ] ,[ data ] )

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

//多个事件绑定同一个函数，通过空格分离，传递不同的事件名，可以同时绑定多个事件
$("#elem").on("mouseover mouseout",function(){ });

//多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){}, 
    mouseout:function(){}
});

//将数据传递到处理程序
$( "button" ).on( "click", {    //第二个参数传递数据给函数调用
  name: "Mr.Tory"
}, greet );
function greet( event ) {
  alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}

事件对象的属性与方法

.type	事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click
.data	事件调用时传入额外参数
.target	触发该事件的 DOM 元素
.which	指示按了哪个键或按钮
.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
.pageX/Y	相对于文档左/上边缘的鼠标位置
.result	上一个相同事件处理器函数返回的值
.preventDefalut()	阻止事件的默认动作
.stopPropagation()	取消事件冒泡

$("#content").click(function(event) {
   $("#msg").html("<p>外层div元素被单击</p>");
   event.stopPropagation();                         //通过event方法阻止事件冒泡  
});

使用AJAX请求

通过函数$.ajax({name:val, name:val,...});可以实现异步通信，即在不刷新页面的情况下，页面向服务器发送并请求数据然后再加载到页面中。其参数如下：

• url：链接地址，字符串表示
• data：需发送到服务器的数据，以键值对表示{A: '...', B: '...'}
• type：请求类型，"POST" 或 "GET"
• timeout：请求超时时间，单位为毫秒，数值表示
• cache：是否缓存请求结果，bool表示
• contentType：内容类型，默认为"application/x-www-form-urlencoded"，代表以字符串的形式如 id=2019&password=123456传送数据。当我们要传输复杂数据格式时可以将其设置为指定格式或者为false。
• dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
• success：请求成功后，执行的回调函数
• error：请求失败后，执行的回调函数
• complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
• async：是否异步处理，默认为true；设置该值为false后，代码不会继续执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
• username：访问认证请求中携带的用户名，字符串表示
• password：返回认证请求中携带的密码，字符串表示

• cache：当发起一次GET请求后，会把获得的结果以缓存的形式进行存储，当再次发起请求时，如果 cache 的值是 true ，那么会直接从缓存中读取，而不是再次发起一个请求

• processData：默认值是 true，将上传数据转化为字符串的形式。当我们上传文件的时候不希望转换，因此要改成false

$.ajax({
    url: "/register",
    data: {name: 'Anna'},
    type: "POST",
    dataType: "json",
    success: function(data) {
        data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
        ...
    }
});

除了$.ajax()之外，jQuery还在此基础上封装了一些具体的请求函数。$.get(url, data, func, dataType);和$.post(url, data, func, dataType);用于直接以GET或POST形式发送请求。$.getJSON(url, data, func);用于以GET发送请求并接收JSON数据。$('#info-div').load(url, data, func);用于将请求的数据填充到DOM节点info-div中。