概述

JQuery增加和扩展了基本的事件处理机制，不仅提供了更优雅的事件处理语法，而且大大增强了事件处理能力

jQuery中的事件

加载DOM

在jQuery中，$(文档)。在JavaScript中，ready()方法被用来代替window.onload方法，但是它们也有一些不同

1.执行时间

例如，我们有一个包含许多图片的网页

$(文档)。ready()方法可以在加载该网页的DOM树后执行，而window.onload方法必须在加载DOM树和图片后执行。

如果我们使用jQuery，当我们想要完成整个页面的加载时，我们可以使用load()方法

以下两个代码的功能相同

//jquery $(窗口)。load(function(){//code 1 })；//JavaScript window . onload=function(){//code 2 }；2.多次使用

JavaScript的onload事件一次只能保存对一个函数的引用，而$(document)。ready()可以保存多个功能

函数one(){ alert(' 1 ')；}函数二(){ alert(' 2 ')；}//JavaScript window . onload=one；window . onload=2；//只执行两个()//jquery $(文档)。ready(function(){ one()；});$(文档)。ready(function(){ two()；});//one()和two()都将执行3。速记

$(文档)。ready(函数(){ })；可以缩写为$(function(){ })；

事件绑定

bind()函数的语法：bind(类型，[。数据]，fn)

第一个参数是事件类型

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

第三个参数是用于绑定的处理函数

例如，有两个div，隐藏第二个div，当我们单击第一个div时，显示第二个div

div id=' div 1 '/div div id=' div 2 '/div脚本类型=' text/JavaScript ' $(function(){ $(' # div 1 ')。bind('click ')，function(){ $(this)。下一个()。show()；});});添加功能，如果点击div1时显示div2，隐藏，否则显示

$(function(){ $('#div1 '))。bind('click '，function(){ if($(this))。下一个()。是(' : visible '){ $(this)。下一个()。hide()；}else{ $(this)。下一个()。show()；} });});缩写：

$('#div1 ')。单击(function(){ if($(this))。下一个()。是(' : visible '){ $(this)。下一个()。hide()；}else{ $(this)。下一个()。show()；}})复合事件

1.hover()方法

用于模拟光标悬停事件。当光标在元素上移动时，触发第一个函数，当光标移出元素时，触发第二个函数

$('#div1 ')。悬停(function(){ $(this))。下一个()。show()；}，function(){ $(this)。下一个()。hide()；});2.切换()方法

用于模拟连续的鼠标点击事件。当鼠标第一次点击一个元素时，触发第一个函数，当鼠标点击同一个函数时，触发第二个函数

$('#div1 ')。toggle(function(){ $(this))。下一个()。show()；}，function(){ $(this)。下一个()。hide()；});防止事件冒泡并防止默认行为

1.防止事故冒泡

StopPropagation()方法

2.防止默认行为

PreventDefault()方法

注：1。在jQuery中返回false可以防止事件冒泡和默认行为

2.jQuery不支持事件捕获

事件对象的属性

1、事件类型

更改方法的功能是获取事件的类型

$('#div1 ')。点击(函数(ev){ alert(ev . type)；//点击})2、event.target

获取触发事件的元素

$('#div1 ')。click(function(ev){ alert(ev . target . id)；//div1 })3、event.relatedTarget

获取相关元素

4.event.pageX和event.pageY

获取光标相对于页面的x和y坐标

$('#div1 ')。click(function(ev){ alert(ev . pagex '，' ev . pagey)；//275，181 })5、事件

这个方法的作用是在鼠标点击事件中获取鼠标的左、中、右按钮；在键盘事件中获取键盘的按键

$('#div1 ')。点击(函数(ev){ alert(ev . what)；//1是鼠标左键，2是鼠标中键，3是鼠标右键}) Remove事件

Unbind()方法语法：unbind([type]，[data])；

第一个参数是事件类型，第二个参数是要移除的函数

看一个例子，用以下事件绑定div1

$('#div1 ')。bind('click '，function(){ alert(' 1 ')；}).bind('click '，function(){ alert(' 2 ')；}).bind('mouseover '，function(){ alert(' 3 ')；}) 1.如果没有参数，删除所有绑定的事件

$('#div1 ')。unbind()；//删除所有事件

2.如果事件类型作为参数提供，则只会删除此类型的绑定事件

$('#div1 ')。解除绑定(“mouse over”)；//删除鼠标悬停事件

3.如果绑定时传递的处理函数作为第二个参数，则只删除这个特定的时间处理函数

模拟操作

1.普通模拟

在jQuery中，可以使用trigger()方法完成模拟操作。例如，您可以使用以下代码来触发id为btn的按钮的点击事件

$('#btn ')。触发器(' click ')；

2.触发自定义事件

trigger()方法不仅可以触发浏览器支持的同名事件，还可以触发自定义名称的事件。

$('#btn ')。bind('myclick '，function(){ alert(' 1 ')；});$('#btn ')。触发器(' my click ')；3.传输数据

$('#btn ')。bind('myclick '，函数(event，message1，message 2){ alert(message 1 message 2)；});$('#btn ')。触发器(' myclick '，['1 '，' 2 '])；4.执行默认操作

$(“输入”)。触发器(“焦点”)；

上面的代码将触发输入元素的焦点事件，也将使输入元素本身获得焦点

如果您只想触发绑定在输入元素上的特定事件，并取消浏览器对此事件的默认操作，则可以使用triggerHandler()方法

其他用途

添加事件命名空间以便于管理

例如，您可以标准化由具有名称空间的元素绑定的多个事件类型

$(“div”)。bind('click.plugin '，function(){ alert(' 1 ')；});$(“div”)。bind('mouseover.plugin '，function(){ alert(' 2 ')；});$(“div”)。bind('dbclick.plugin '，function(){ alert(' 3 ')；});$(“按钮”)。单击(function(){ $('div ')。解除绑定('。plugin’)；})以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！