jQuery基础三事件处理

时间：2021-11-23 22:16:30

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的，当一个文档或者它的某些元素发生某些改变或操作时，浏览器会自动生成一个事件，虽然利用传统的JavaScript事件能完成这些交互，但是jQuery增加并扩展了基本事件的处理机制，不仅提供了更加优雅的事件处理语法，而且极大的增强了事件处理能力。

$(document).ready()方法和window.onload的 区别

  1. 执行时机
    window.onload方法是在网页中所有的元素(包括元素关联的文件)完全加载到浏览器后才执行。即JavaScript此时才可以访问网页中所有的元素。jQuery中的$(document).ready方法则是在DOM完全就绪时就可以进行调用。此时网页的所有元素对jQuery而言都是介意访问的，但是，这并不意味着这些元素关联的文件都已经下载完成。

  2. 多次使用
    window.onload不能同时编写多个，如果出现多个window.onload，则会执行最后的一个onload函数进行处理，而$(document).ready则可以多次使用。

  3. 简写方式
    window.onload没有简写方式，而$(document).ready(function(){ })可以简写为$(function(){ })也可以简写为$().ready(function(){ })

事件处理

1.事件绑定
2.合成事件
3.事件冒泡
4.移除事件
5.模拟操作

如果能够根据提示想出个大概到此就可以结束了，请耐性的记忆，加油！

——————————————-华丽的分隔符————————————————–

  • 事件绑定

    bind()方法来对匹配的元素进行特定事件的绑定。可以绑定自定义事件

    语法格式： bind(type,[data],fn);
    参数简介：
    type 为要绑定的事件类型用有:blur、focus、load、click、dbclick、mousedown、mouseup、mouseover、mouseout、mouseenter、mouseleave、mousemove、change、select、keydown、keypress、keyup、error、resize、scroll、unload等，也可以是自定义名称。
    data 为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
    fn 用来绑定处理的函数。

注意：jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了”on”。

  • 合成事件

    hover()方法和 toggle()方法

    语法格式： hover(enten , leave);
    简介说明：hover方法用来模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数(enter);当光标移除这个元素时，会触发指定的第二个函数(leave);hover方法确切的来说就是代替了bind(“mouseenter”)和bind(“mouseleave”)

语法格式：toggle(fn1，fn2，……，fnN)
简介说明：toggle方法用来模拟鼠标连续单击事件。第一次单击触发第一个函数，第二次单击触发第二个函数，以此类推，循环调用，注意两个参数的特别适用两个状态的转化。

  • 冒泡事件

    1.什么是冒泡
    外层元素绑定与内层元素相同的事件类型，当触发内层元素绑定的事件后，外层元素也会触发同类型的事件，这就是冒泡，之所以称为冒泡是因为事件会按照DOM的层次结果像水泡一样不断向上直至顶端。
    2.冒泡事件引发的问题
    冒泡事件可能会引起预料之外的效果，扩大事件的影响，触发一事件，进而会引发多事件的发生。因此我们要避免事件冒泡，对事件进行作用范围控制
    3.解决冒泡事件
    要解决冒泡事件先要理解事件对象event

$("element").bind("clikc",function(event)){        //event ：事件对象
//...
}

在程序中使用事件对象，只要为函数添加一个参数，这样在触发此事件时，事件对象就被创建了，这个事件对象只有事件处理函数才能够访问到，事件处理函数访问结束后，时间对象就被销毁。
停止事件冒泡可以组织事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。在函数最后添加event.stopPropagation()语句即可阻止事件冒泡。另外在此说下事件捕获，事件捕获和事件冒泡是两件相反的过程，事件捕获是从最顶端向下开始出发，但是由于浏览器的兼容问题，使用事件捕获建议利用原生的JavaScript。
4.阻止默认行为
网页中的元素有自己默认的行为，例如，单击超链接后会跳转。单击”提交”按钮会进行表单的提交，有时候我们需要阻止元素的默认行为。event.preventDefault()方法来阻止元素的默认行为。另外注意，在表单提交的时候，如果按钮上面还绑定了js事件，则会优先处理js事件，然后再进行表单提交。
5.事件对象的属性
jQuery对事件常用的属性进行了封装，使得事件处理在各个浏览器下都可以运行而不需要进行浏览器判定。

event.type      //判断获取事件的类型

event.preventDefault()方法        //阻止默认的事件行为

event.stopPropagation()方法       //阻止事件冒泡的行为

event.target     //获取触发事件的元素对象

event.pageX和event.pageY     //获取光标相对于页面的x坐标和y坐标,存在滚动条会加上滚动条的宽度或高度

event.which     //获取鼠标单击事件的左中右键(1=左，2=中，3=右)，在键盘事件中获取键盘的按键ASCⅡ码

event.metaKey   // 为键盘事件获取Ctrl按键

  • 移除事件

    unbind()方法
    语法结构：unbind(type,[data]);
    参数说明:
    如果没有参数则表明删除所有的绑定事件。
    如果只提供了事件类型作为参数，则只删除该类型的绑定事件。
    如果把在绑定时传递的处理函数名作为第二个参数，则会只有这个特定的事件处理函数会被删除。

  • 模拟操作
    完成模拟操作，在页面加载完成后自动处理。不仅能触发支持浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。
    trigger(type , [type])
    参数一要触发的事件类型
    参数二要传递的事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件时代码处理还是用户触发的。
$("#btn").trigger("click");

trigger()方法触发事件后，会执行浏览器默认的操作，

$("input").trigger("focus");   //不仅仅会触发绑定的事件，还会选中input选择框

如果想只触发绑定的事件，而不想执行浏览器的默认行为，可以利用triggerHandler()方法。

bind()方法总结
bind()方法不仅能够为元素绑定浏览器支持的具有相同名称的事件，也可以绑定自定义事件。还有以下用法

1.一次性为元素绑定多个事件类型

$("div").bind("mouseover mouseout" , function(){
    //...
})

2.添加事件命名空间，便于管理

$("div").bind("click.plugin",function(){
    //...
});
$("div").bind("mouseenter.plugin",function(){
    //...
});
$("div").bind("dbclick.plugin",function(){
    //...
});
$("button").click(function(){
    $("div").unbind(".plugin");
});

在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。

3.相同事件名称，不同命名空间执行方法
可以给元素绑定相同的事件类型，然后以命名空间的不同按需要调用，

$("div").bind("click",function(){
    //...
});
$("div").bind("click.plugin",function(){
    //...
});
$("button").click(function(){
$("div").trigger("click!") //注意！作用匹配所有不包含在命名空间的click方法。
});

One(type，[data]，fn)方法
对于只需要触发一次随后就立即解除绑定的方法，one()方法可以为元素绑定处理函数。One()方法的结构与bind()方法类似，使用方法与bind()方法相同.

另外jQuery1.7版本中新增了on()、off()、delegate()、undelegate()事件的绑定
on()方法代替了bind()、delegate()、live()方法、off()方法代替了unbind()、undelegate()、die()方法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
标签：

相关文章