02 jQuery中的事件与动画

jQuery中的事件

在JavaScript中，常用的基础事件有鼠标事件、键盘事件、window事件、表单事件、事件绑定和处理函数的语法格式如下

语法q

　　事件名 = "函数名()"；或者 DOM对象.事件名 = 函数；

1、载入事件

$(function () {});    //推荐使用
$(document).ready(function () {});   //推荐使用
window.onload = function () {}

2、鼠标事件

click() 　　　　　　触发将函数绑定到指定元素的click事件　　　　　　鼠标单击时

mouseover() 　　　触发将函数绑定到指定元素的mouseover事件　　　鼠标指针移过时　　　　

mouseout() 　　　　触发将函数绑定到指定元素的mouseout事件　　　鼠标指针移出时

mouseenter()　　　触发将函数绑定到指定元素的mouseenter事件　　鼠标指针进入时

mouseleave()　　触发将函数绑定到指定元素的mouseleave事件　　鼠标指针离开时

mouseover() 和 mouseenter()的区别：mouseover()包含子元素绑定，而mouseenter不包含子元素绑定

3、键盘事件

keydown()　　　触发或将函数绑定到指定元素的keydown事件　　键盘按下时

keyup()　　　　触发或将函数绑定到指定元素的keyup事件　　　释放按键时

keypress()　　　触发或将函数绑定到指定元素的keypress事件　　产生可打印的字符时

$(document).keydown(function (event){
     if (event.keyCode == "13") {    //按Enter事件
            alert("确认要提交吗？");
          }
      });

4、浏览器事件

此事件是当浏览器窗口大小发生变化时而触发来完成页面的一些特效

语法

$(selector).resize();

绑定事件与移除事件

在jQuery中，如果需要为匹配的元素同时绑定多个事件，则可以使用bing()方法，其语法格式如下

语法

bind(type,[data],fn);

bind() 方法有三个参数，其中参数data不是必需的，如下表所示

type　　　　事件类型　　　主要包括click、mouseover、mouseout等基础事件，此外，还是可自定义事件

[data]　　　可选参数　　　作为event.data属性值传递事件对象的额外数据对象，该参数不是必需的

fn　　　　　处理函数　　　用来绑定处理函数

绑定单个事件

$("#btn").bind("click", function() {
    alert('绑定单击事件');
   });

绑定多个事件

$("#btn").bind({
    "mouseover":function(){
        alert('事件一');
     },
    "mouseout":function () {
        alert('事件二');
    }
});

移除事件

语法

unbind([type],[fn]);

[type]　　　　事件类型　　　　主要包括click、mouseover、moseout 等基础事件外，此外，还可以是自定义事件

[fn]　　　　　处理函数　　　　用来处理绑定的处理函数

如果没有参数则是移除所有被bind()绑定的函数

绑定多个事件的函数还有很多，例如常用的链式编程或on()

绑定事件---on()

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});
或
$( "#dataTable tbody" ).on( "click", function() {
  console.log( $( this ).text() );
});

其用法和bind()类似

绑定多个事件--链式编程

$("#btn").click(function(){
    console.log("单击");
}).mouseover(function(){
    console.log("鼠标悬浮");
});

02 jQuery中的事件与动画

猜你喜欢