jQuery 事件

文档和窗口加载事件

DOM加载完毕后执行的事件

特别注意：DOM加载完毕并不代表其关联文件加载完毕。

例如：

<img  src=”https://www.baidu.com/img/2016_8_14female_better_
47932c92937c2b1c84bfbb1c28bb2193.gif” />

DOM加载完毕仅仅是这个标签节点字符串加载完毕，但是这个节点的属性对应的资源可能还没加载完毕，即：
src属性对应的：
https://www.baidu.com/img/2016_8_14female_better_47932c92937c2b1c84bfbb1c28bb2193.gif 
这张图片可能还没加载完毕。正是因为他不用等待关联的文件加载完毕，所以执行效率会快很多。

$(document).ready(function(){

});

简写方式：
$(function(){

});
或
$().ready(function(){

});

多次执行

一个页面中可以有多个

$(function(){ 

//DOM加载完毕后要执行的代码

});

函数。

所有对象加载完毕后执行

如果想要在所有对象都加载完毕后执行：

$(window).load(function(){

});

事件绑定bind()方法

事件三要素：

• 事件源
• 事件类型  
• 事件的处理函数

为每个匹配元素的特定事件绑定事件处理函数。

事件绑定的语法

一个事件源绑定一个函数

$(‘选择器’).bind(‘事件类型’,事件处理函数).

例如:
$(‘ul li’).bind(‘click’,function(){  })

而前面所学习的

$(‘ul li’).click(function(){});

正是这种的简写形式.

可以把函数定义在外面，绑定的时候，写函数名称。

一个事件源绑定多个函数

  $("#div1").bind("click", function () { 
alert("first click!"); 
  }).bind("click", function () { 
alert("second click!"); 
}); 

多个事件绑定同一个处理函数

$(‘选择器’).bind(‘事件1 事件2…’,事件处理函数).

第一个参数: 事件类型,可以有多个使用空格隔开.

第二个参数: 事件处理函数.

$('#mydiv').bind('mouseover mouseleave',function(){
    $(this).toggleClass('mydiv');
})

多个事件绑定不同处理函数

$(‘选择器’).bind({‘事件1’:function(){},’事件2’:function(){}}).

$('#mydiv').bind({
      'mouseover':function(){
           $(this).css('background','red');
      },
           'mouseout': function(){
            $(this).css('background','green');
      }
       }
);

事件移除unbind()

为什么是取消绑定事件

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

1.所有事件取消绑定
$(‘选择器’).unbind()
2.取消指定的事件类型绑定
$(‘选择器’).unbind(‘click’);
3. 取消指定的事件类型对应的函数绑定

var foo = function () {
    // 处理某个事件的代码
};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 
$("p").unbind("click", foo); // ... 再也不会被触发 foo

 

 

注意:

取消的事件处理函数和添加的事件处理函数必须是同一个函数对象.              

以下是错误的写法:

$(‘p’).bind(‘click’,function(){});

$(‘p’).unbind(‘click’,function(){});

因为每次都定义一个不同的函数对象

事件 绑定/移除  on()/off() 用法

事件绑定on和取消绑定off

 合成事件hover()方法

hover()方法相当于mouseenter与mouseleave事件的组合，用于模拟鼠标指针悬停事件。

 toggle()方法用于模拟鼠标连续click事件

//toggle方法在1.9版本时就已经删除了，不建议再使用。如果要使用，可以换jquery版本。

$("body").toggle(
    function () { }, //第一次点击触发
    function () { }, //第二次点击触发
    function () { } //第三次点击触发
);
同时toggle()方法还有一个作用：切换元素可见状态

$('input').toggle( 
    function () {
       $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
    },
    function () {
      $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
    }
 );

事件委派delegate()方法

jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。 跟live方法类似，但是效率比live方法更高。

语法:
$(‘外部已存在元素’). delegate(‘新增元素选择’,事件类型 ,事件处理函数)

例如: 
$(‘table’).delegate(‘tr a’,’click’,function(){})
	在新增的元素table的tr中的a标签上添加事件.
table 是已存在的元素
	tr a 是以table为父元素的选择器,但是tr可以是新添加的元素.

 trigger()和triggelHandler()方法

在每一个匹配的元素上触发某类事件。

语法:

先前触发事件执行：$(“form”).submit();

现在触发事件执行：$(“form”).trigger(‘submit’);

或 $(“form”).triggerHandler(‘submit’);(没有浏览器默认动作)

triggerHandler()  只会执行具体事件，没有浏览器默认动作

 事件对象Event及常用属性

写在回调函数中的参数event即为事件对象。

type属性，获取事件的类型。

preventDefault()方法，阻止默认行为

stopPropagation()方法，阻止事件冒泡

target属性，获取事件触发的元素

pageX,pageY属性，获取光标相对于页面的坐标

mataKey属性，获取crtl按键

1、event.type：获取事件的类型

2、event.target：获取触发事件的元素

3、event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

4、event.preventDefault() 方法：阻止默认行为

5、event.which：获取在鼠标单击时，单击的是鼠标的哪个键

 阻止浏览器默认行为preventDefault()

浏览器默认动作：

点击表单提交按钮:  默认提交表单

点击超链接:  默认打开页面链接

利用提交事件可以实现表单域验证，当验证失败时阻止提交表单.

在超链接a标签上添加事件,仅仅让事件生效从而阻止打开链接.

e.preventDefault();  //相当于是一个 return false

 事件冒泡stopPropagation()方法

所有触发的事件现在会冒泡到DOM树上了. 举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。阻止冒泡e.stopPropagation();