jQuery事件绑定与反绑定,模仿鼠标悬停,事件对象

本文主要是介绍jQuery事件绑定与反绑定,模仿鼠标悬停,事件对象,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

页面载入事件

事件绑定

绑定事件的函数   

jQuery事件处理函数的好处

反绑定事件

事件绑定和反绑定的实例

一次性的事件绑定

模仿鼠标悬停事件

jQuery事件对象


页面载入事件

1、JavaScript的页面载入事件:window.onload

缺点:通过这个方法,用户可以设定一些特定的操作,让其在页面的DOM树加载完毕之后执行,但是浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误。

解决方法:等DOM被解析后, 在图像和外部资源加载之前执行我们的函数。

2、 jQuery的页面载入事件(入口函数):$(function(){ js代码 })

事件绑定

一个事件的响应本身可能实现为一个函数,但是真正要使其得到执行,还需要将其与相应的元素动作绑定到一起。

所谓绑定,其实就是将页面元素的事件类型与其在收到该事件之后期望进行的操作联系到一起。例如经常提到的“当我们单击这个按钮的时候,就会执行某些动作”,让这里的“单击”动作与“执行某些动作”连接到一起的操作就是绑定了。

绑定事件的函数   

该函数将为调用它的每个匹配元素的特定事件绑定一个事件处理函数。它最多可以有三个参数,其中事件类型和处理函数为必选参数。

//绑定事件的函数 
$(selector).bind('事件类型',function(){处理代码
})       
//另一种写法
$(selector).事件名(function(){处理代码
})
函数名bind(type,[data],fn)
作用为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数
返回值Object
参数

type(String):事件类型

data (Object):(可选)作为event.data属性值传递给事件对象的额外数据对象

fn ( Function):绑定到每个匹配元素的事件上面的处理函数

例如:$("#testDiv4").bind("click", showMsg); 

为id是testDiv4的元素, 添加列click事件的事件处理函数showMsg.

jQuery事件处理函数的好处

  • 添加的是多播事件委托. 。也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数。
  • 统一了事件名称。
  • 可以将对象行为全部用脚本控制。让HTML代码部分只注意"显示"逻辑,是将HTML的行为, 内容与样式切分干净.。其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式.。使用jQuery事件处理函数可以避免在HTML标签上直接添加事件。

反绑定事件

在对一个元素绑定了某种事件类型之后,可能在后来的某个时刻不再希望让该元素监听该类型的事件,此时就需要反绑定。所谓反绑定,就是解除与元素绑定的某种事件类型及处理函数。jQuery中的反绑定处理函数为unbind([type],[data])函数。

函数名unbind([type],[data])
作用bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。可以将用户用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数,则只删除该类型的绑定事件
返回值Object
参数

type(String):(可选)事件类型

data (Function):(可选)要从每个匹配元素的事件中反绑定的事件处理函数

事件绑定和反绑定的实例

分析:点击提交则会把输入的用户名和密码提交至客户端,点击重置则会使其清空,为重置创建反绑定事件,则再次点击重置时不会清除内容。

<body style="text-align: center;"><div style="margin-top: 3px;"><label>用户名:<input type="text" id="username"></label><br><br><label>密码:<input type="password" id="pwd"></label><br><br><button type="button" id="btn_ok">提交</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="btn_reset">重置</button></div><script>$(function(){//给“重置”按钮绑定click事件$('#btn_reset').bind('click',function(){$('#username').val('')  //设置id为username的按钮的值为空$('#pwd').val('')})//给“提交”按钮绑定click事件$('#btn_ok').bind('click',function(){var n = $('#username').val()  //获取id为username的按钮的值var p = $('#pwd').val()console.log("用户名:"+n)console.log("密码:"+p)})//取消“重置”按钮的click事件$('#btn_reset').unbind('click')})</script>
</body>

一次性的事件绑定

一次性的事件绑定,是指与元素绑定的事件只能被使用一次,也就是说在触发一次之后即便再执行该类型的事件也不会去执行对应的处理函数。

函数名one(type,[data],fn)
作用为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
返回值Object
参数

type(String):事件类型

data (Object):(可选)作为event.data属性值传递给事件对象的额外数据对象

fn ( Function):绑定到每个匹配元素的事件上面的处理函数

实例当所有段落被第一次点击的时候,显示所有其文本:
$("p").one("click", function(){
     alert( $(this).text() );
});

模仿鼠标悬停事件

$(selector).hover(over,out)

    over:回调函数,表示鼠标悬停时调用的函数

    out:回调函数,表示鼠标离开时调用的函数

实例:当鼠标放在一张图片上时显示另一张图片,移开后显示原图片

<body><img src="../images/5.jpg" width="300" height="300"><script>$(function(){$('img').hover(function(evenr){$('img').attr('src','../images/3.jpg')console.log(event.type)},function(){$('img').attr('src','../images/5.jpg')console.log(event.type)})})</script>
</body>

jQuery事件对象

jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入。  

例如      $(selector).bind('click',function(event){  -->'event'代表jQuery的事件对象
                   处理代码
              })

(1)type:事件类型

(2)target:事件对象,获取事件触发者DOM对象

(3)pageXpageY:在鼠标事件中鼠标相对于页面原点的x、y坐标

这篇关于jQuery事件绑定与反绑定,模仿鼠标悬停,事件对象的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/806506

相关文章

Java实现将byte[]转换为File对象

《Java实现将byte[]转换为File对象》这篇文章将通过一个简单的例子为大家演示Java如何实现byte[]转换为File对象,并将其上传到外部服务器,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言1. 问题背景2. 环境准备3. 实现步骤3.1 从 URL 获取图片字节数据3.2 将字节数组

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

Javascript访问Promise对象返回值的操作方法

《Javascript访问Promise对象返回值的操作方法》这篇文章介绍了如何在JavaScript中使用Promise对象来处理异步操作,通过使用fetch()方法和Promise对象,我们可以从... 目录在Javascript中,什么是Promise1- then() 链式操作2- 在之后的代码中使

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

MyBatis的配置对象Configuration作用及说明

《MyBatis的配置对象Configuration作用及说明》MyBatis的Configuration对象是MyBatis的核心配置对象,它包含了MyBatis运行时所需的几乎所有配置信息,这个对... 目录MyBATis配置对象Configuration作用Configuration 对象的主要作用C

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

spring @EventListener 事件与监听的示例详解

《spring@EventListener事件与监听的示例详解》本文介绍了自定义Spring事件和监听器的方法,包括如何发布事件、监听事件以及如何处理异步事件,通过示例代码和日志,展示了事件的顺序... 目录1、自定义Application Event2、自定义监听3、测试4、源代码5、其他5.1 顺序执行

SpringBoot实现导出复杂对象到Excel文件

《SpringBoot实现导出复杂对象到Excel文件》这篇文章主要为大家详细介绍了如何使用Hutool和EasyExcel两种方式来实现在SpringBoot项目中导出复杂对象到Excel文件,需要... 在Spring Boot项目中导出复杂对象到Excel文件,可以利用Hutool或EasyExcel

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误