JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)

一、jQuery 页面加载后执行

 

代码执行的时机选择

  - $(document).ready()方法和 window.onload事件具有相似的功能，但是在执行时机方面是有区别的

      - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行

      - $(document).ready()方法注册的事件处理程序，在DOM完全加载后就可以调用

  - 一般来讲, $(document).ready()的执行要优于window.onload事件

  - 需要注意的是，$(document).ready()方法操作页面中的元素时，可能关联文件未加载完毕

基于一个页面执行多个脚本

  - 通过JavaScript注册事件处理程序的传统机制，是把一个函数指定给 DOM 元素的对应属性

   

    或

    window.onload = start;

    但如果指定第二个函数的话，那么就会取代第一个函数

  - 通过$(document).ready()每次都会向内部的行为队咧中添加一个新的函数，当页面加载完成后，所有函数都将得到执行

简写代码

  - $(document).ready()实际上是在基于 document这个元素构建而成的jQuery对象，调用了ready()方法

  - $()工厂函数为我们提供了一种简写方式，即调用这个函数而不用传递参数，该函数的行为就是传递了document参数

  - 也可以直接向工厂函数$()中传递一个函数，此时，jQuery会在内部执行对ready()隐式调用

与其他库共存

  - 在一些情况下，可能会在一个页面中使用多个JS库，由于多个库可能都使用$，因此需要一种方式来避免名称冲突

  - jQuery 提供了一个.noConflict()方法，没用该方法可以将$标识符的控制权交给其他的库

  - 如果将$让给其他库的话，那么$就不再表示jQuery了，在jQuery中也不能使用$。

  - 如果还想使用$的话，有一个在$().ready()中的使用技巧，传递回调函数的时候可以传递一个参数----jQuery对象本身，可重新命名jQuery为$

二、jQuery 事件处理

事件绑定

  - 语法:

      - $obj.bind(事件类型,事件处理函数)

      - 如: $obj.bind('click',fn);

      - 通过 this 引用处理事件的 DOM 元素

      - 简写xingshi $obj.click(fn);

  - 注: $obj.click()则代表触发了click事件

简化事件绑定

  - jQuery提供了一种简化事件操作的方式---简写事件方法，其原理与bind()相同，但可以减少代码编写量，如通过$(obj).click(fn)取代$(obj).bind('click',fn);

三、jQuery 事件冒泡

事件冒泡简介

  - 子节点产生的事件会依次向上抛给父节点

如何取消事件冒泡

  - e.stopPropagation() 可以取消事件冒泡

  - 如:

      - $('div').click(function(e){

             alert("点击了div");

        });

      - $('a').click(function(e){

             alert("点击了一个链接");

             e.stopPropagation();

        });

四、jQuery 事件对象

事件对象概述

  - 事件是一种 JavaScript结构，它会在元素获得处理事件的机会时被传递给被调用的事件处理程序，这个对象中包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法

  - 在处理程序中使用事件对象，需要为函数增加一个参数$(obj).click(function(event){});

事件对象

  - 事件对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息，事件对象的常用属性

五、jQuery 模拟操作

模拟操作的语法

  - $obj.trigger(事件类型)

  - 如: $obj.trigger("focus");

  - 简写形式 $obj.focus();

总结：本章内容主要介绍了  jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)