jQuery中的事件处理与动画效果

最新推荐文章于 2022-05-07 16:34:13 发布

VIP文章暮白寒窗雪

最新推荐文章于 2022-05-07 16:34:13 发布

阅读量1.1k

点赞数 4

文章标签： jquery javascript

本文链接：https://blog.csdn.net/tiben/article/details/119089462

版权

jQuery中的事件处理与动画效果

一、jQuery的事件处理

事件处理：所谓事件处理，就是指在某一时刻页面上的元素对某一种操作的响应处理
1、页面载入事件
JavaScript的页面载入事件：window.onload

 //DOM加载完毕后添加元素
 //传统方法window.οnlοad= function() {
   
  testDiv.innerHTML= "动态创建的div";
   }

注：虽然能够在DOM完整加载后, 在添加新的元素, 但是不幸的是浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误
解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行。在jQuery中，与此window.onload功能类似的函数是ready(fn)函数
jQuery的页面载入事件(入口函数)：

  $(function(){
    js代码 })

//jQuery 使用动态创建的$(document).ready(function)方法$(document).ready(function() { testDiv.innerHTML= "使用动态创建的$(document).ready(function)方法"; });
或者使用简便语法:
//jQuery 使用$(function)方法$(function() { 
	testDiv.innerHTML+= "使用$(function)方法"; });

2、绑定与反绑定事件监听器

一个事件的响应本身可能实现为一个函数，但是真正要使其得到执行，还需要将其与相应的元素动作绑定到一起
绑定就是将页面元素的事件类型与其在收到该事件之后期望进行的操作联系到一起。例如经常提到的“当我们单击这个按钮的时候，就会执行某些动作”，让这里的“单击”动作与“执行某些动作”连接到一起的操作就是绑定了
（1）绑定事件
通过事件方法绑定事件：已经用过了单个事件的绑定，是通过调用某个事件方法，传入事件处理函数来实现的，如click()、change()等
实现代码

$(selector).bind('事件类型',function(){
   
		       处理代码
		  })	   
         或
		   $(selector).事件名(function(){
   
		       处理代码
		   })

jQuery常用事件方法
![在这里插入图片描述](https://img-blog.csdnimg.cn/1ba355c6cf1f4851a6c8bddd787a9c67.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYmVu,size_16,color_FFFFFF,t_70 （2）反绑定事件
在对一个元素绑定了某种事件类型之后，可能在后来的某个时刻不再希望让该元素监听该类型的事件，此时就需要反绑定。所谓反绑定，就是解除与元素绑定的某种事件类型及处理函数。jQuery中的反绑定处理函数为unbind([type],[data])函数

$(selector).unbind() --> 取消元素上绑定的所有事件
$(selector).unbind('事件名')  --> 取消元素上绑定的指定事件

（3）一次性绑定事件
一次性的事件绑定，是指与元素绑定的事件只能被使用一次，也就是说在触发一次之后即便再执行该类型的事件也不会去执行对应的处理函数。jQuery中用于一次性事件绑定的函数是one(type,[data],fn)函数

$(selector).one('事件类型',function(){
   
		        处理代码
		   })

示例

<body style="text-align: center;">
    <div style="margin-top: 35px;">
        <label>
            用户名：
               <input type="text" id="username">
        </label>
        <br><br>
        <label>
            密码：
               <input type="password" id="pwd">
        </label>
        <br><br>
        <button type="button" id="btn_submit">提交</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" id="btn_reset">重置</button>
    </div>
    <script>
        $(function(){
   
            //给"重置"按钮绑定click事件
            $('#btn_reset').bind(