jquery中的事件

发表于 | 分类于

jquery中的事件

加载DOM

​ 浏览器，在页面加载完成后，浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中，通常使用window.onload方法而在jQuery中，使用的是$(document).ready()方法。$(document).ready()方法是事件模块中最重要的一个函数，可以极大地提高Web 应用程序的响应速度。jQuery就是用$(document).ready()方法来替代传统JavaScript的windo.load 方法的。通过使用该方法，可以在DOM载入就绪时就对其进行操作并调用执行它所绑定的函数。在使用过程中，需要注意$(document).ready()方法和window.onload方法之间的细微区别。

执行时机

$(document).ready()方法和window.onload 方法有相似的功能，但是执行时机方面是有区别的。window.onload方法是网页中所有的元素(包括元素的所有关联的文件)完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。

  1. 需要注意一点，由于$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的html下载完毕，并且已经解析为DOM树了，但有可能图片还未加载完毕，所以图片的宽高这些不一定有效。要解决这个问题，可以使用jQuery中另一个关于页面加载的方法——–load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容(包括窗口、框架、对象和图片等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

    jquery代码如下

1
2
3
$(window).load(function(){
    //你写的代码
})

多次使用

javascript代码如下

1
2
3
4
5
6
function one(){
    console.log("one");
}
function two(){
    console.log("two");
}

当页面加载完毕后，通过javascript代码来调用one和two函数

1
2
window.onload = one;
window.onload = two;

然而当代码运行以后，发现只打印了two

因为javascript的onload事件一次只能保存对一个函数的引用，它会自动覆盖之前的函数

为了达到两个函数都触发，只能创建一个新的方法来实现

1
2
3
4
window.onload = function(){
  one();
  two();
}

另外 $(document)也可以简写 $() 不带参数时，默认的参数就是doument可以简写$().ready(function(){//代码})

事件绑定

当文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为：

1
bind(type,[,data],fn);

bind()方法有3个参数，

  • 第一个参数：是事件类型

    类型包括:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等 当然也可以是自定义名称。

  • 第二个参数：是可选参数 作为event.data属性值传递给事件对象的额外数据对象

  • 第三个参数；则是用来绑定的处理函数

###合成事件

jquery有两个合成事件—hover()方法和toggle()方法 类似read()方法

hover()方法和toggle()都属于jquery自定义的方法

  1. hover()方法

    语法结构hover(enter,leave);

    hover()方法用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的第1个函数(enter)

    当光标移出这个元素时，会触发指定的第2个函数（leave）

    转换成代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    $(function(){
        $("#panel h5.head").hover(function(){
            $(this).next().show();
        },function(){
           $(this).next().hide();
      });
    });


    //或者
    $(function(){
         $("#panel h5.head").mouseover(function(){
             $(this).next().show();
         }).mouseout(function(){
             $(this).next().hide();
         })
    })

    ​

    2.toggle()方法

    结构：toggle(fn1,fn2,....fnN)

    toggle()方法用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数（fn1）;

    当在次单击同一元素时，则触发指定的第2个函数（fn2）如果有更多的 依次触发 知道最后一个

1
2
3
4
5
6
7
$(function(){
       $("#panel h5.head").toggle(function(){
           $(this).next().toggle();
       }.function(){
        $(this).next().toggle();
       })
})