jQuery事件处理

举报
编程 小白 发表于 2022/05/12 16:36:21 2022/05/12
【摘要】 jQuery事件处理  jQuery可以很方便地使用事件对象对触发事件进行处理。jQuery支持的事件包括键盘事件、鼠标事件、表单事件、文档加载事件和浏览器事件等。 1.指定事件处理函数  事件处理函数指事件触发时调用的函数。可以通过下面的方法指定事件处理函数:$("选择器").事件名(function(形参){ //函数体})例如,前面多次使用$(document).ready(fun...

jQuery事件处理

在这里插入图片描述
  jQuery可以很方便地使用事件对象对触发事件进行处理。jQuery支持的事件包括键盘事件、鼠标事件、表单事件、文档加载事件和浏览器事件等。

1.指定事件处理函数

  事件处理函数指事件触发时调用的函数。可以通过下面的方法指定事件处理函数:

$("选择器").事件名(function(形参){
  //函数体
})

例如,前面多次使用

$(document).ready(function(e){
});

指定文档对象的ready事件处理函数,ready事件表示当文档对象就绪的时候被触发。

2.绑定事件处理方法

(1)bind()方法

  使用bind(方法可以为每一个匹配元素的特定事件(如单击事件)绑定一个事件处理函数,事件处理函数会接收到一个事件对象。

bind()方法的语法格式如下所示:

bind(type, [data,] function)

其中,type表示事件类型;data是可选参数,作为event.data属性值传递给事件对象的额外数据对象;function表示绑定到指定事件的事件处理函数。如果function函数返回false,则会取消事件的默认行为并阻止冒泡。

  例1是通过bind()方法为一个按钮绑定一个单击事件,单击按钮后,网页中的一段文字将自动消失,如果再次单击这个按钮,消失的文字又会显示出来。本例重点理解事件的绑定过程。
【例1】

<!doctype html>
<html>
   <head>
   <meta charset="utf-8">
   <title>bind方法</title>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript ">
     $(document).ready(function(){
      $("button").bind("click", function(){
       $("p").slideToggle();
       });
     });
   </script>
  </head>
  <body>
     <p>这是一段文字</p>
     <button>请点击这里</button>
  </body>
</html>

  例2中通过bind()方法指定 contextmenu(鼠标右击)事件的处理函数,在该函数中返回false,从而取消事件的默认行为。
【例2】

<!doctype html>
<html>
   <head>
   <meta charset="utf-8">
   <title>bind方法</title>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript ">
    $(document).ready(function(){
     $(document).bind("contextmenu", function(){
      return(false);
      });
     });
   </script>
   </head>
  <body>
     <p>您右击网页,将不会弹出右键快捷菜单!</p>
  </body>
</html>

在这里插入图片描述

图1 bind方法

(2)delegate()方法

  delegate()方法是对指定元素的特定子元素增加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用delegate()方法的事件处理程序适用于当前或以后由脚本创建的新元素。其绑定事件的语法格式如下:

$(选择器).delegate(childSelector,eventType, function)

其中, ==childSelector== 表示指定事件的子元素选择器;==eventType==指事件的类型;==function==指事件处理函数。

  例3将文档中<ul>元素下的<li>子元素的click事件绑定到指定的事件处理函数,单击<li>元素时,将在所有<li>元素的最后插入一个<li>元素,并且新添加<li>元素的内容是一个定义好的数组内容。

【例3】

<!doctype html>
<html>
   <head>
   <meta charset="utf-8">
   <title>delegate方法</title>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript ">
    $(document).ready(function(){
      listArr=new Array("音乐","排球","羽毛球","篮球","游泳");
      index=0;
     $("ul").delegate("li","click", function(){
      $(this).append("<li>"+listArr[index]+"</li>")
      index++;
      index%=5;
      })
     });
   </script>
   </head>
  <body>
  <ul>
    <li>足球</li>
  </ul>
  </body>
</html>

在这里插入图片描述

图2 delegate方法

3.jQuery事件的方法

  jQuery提供了一组事件相关的方法,用于处理各种HTML事件。jQuery常用事件的方法及说明见表1。

表1 jQuery常用事件的方法及说明
事件的方法 说明
$("选择器").click) 鼠标单击触发事件,参数可选(data,function)
$("选择器").dblelick() 双击触发事件,参数可选(data,function)
$("选择器").mousedown()/mouseup() 鼠标按下/弹起触发事件
$("选择器”).mousemove() 鼠标移动触发事件
$("选择器").mouseover()/mouseout() 鼠标移入/移出触发事件
$("选择器”).mouseenter()/mouseleave () 鼠标进入/离开触发事件
$("选择器").hover(func1,func2) 鼠标移入调用func1函数,移出调用func2函数
$("选择器").focusin() 鼠标聚焦到该元素时触发事件
$("选择器").focusout() 鼠标失去焦点时触发事件
$("选择器").focus()/blur() 鼠标聚焦/失去焦点触发事件(不支持冒泡)
$("选择器").change() 表单元素发生改变时触发事件
$("选择器").select() 文本元素被选中时触发事件
$("选择器").submit() 表单提交动作触发事件
$("选择器").keydown()/keyup() 键盘按键按下/弹起触发事件
$("选择器").keypress() 键盘按下过程中触发事件

  例4是单击按钮后,在一个DIV块上按住左键不放进行拖动,这个DIV块会跟随鼠标移动,松开左键之后,DIV块会停止跟随。
【例4】

<!doctype html>
<html>
   <head>
   <meta charset="utf-8">
   <title>事件举例</title>
   <style>
   #mydiv{ background:#00BFFF;position:absolute;width:100px;height:100px}
   </style>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript">
    $(function(){
     $("#btn").click(function(){//按钮的单击事件
      $("#mydiv").mousedown(function(event){//DIV块的鼠标按下事件
	   var offset=$("#mydiv").offset();//获取DIV块的位置
       x1=event.clientX-offset.left;
       y1=event.clientY-offset.top;
        $("#mydiv").mousemove(function(event){//鼠标移动事件
         //设置DIV块移动后的新位置
         $("#mydiv").css("left",(event.clientX-x1)+"px");
         $("#mydiv").css("top",(event.clientY-y1)+"px");
         });
         $("#mydiv").mouseup(function(event){//鼠标左键抬起事件
		 $("#mydiv").unbind("mousemove");//删除鼠标移动事件
         });
       });
     })
   })
   </script>
   </head>
 <body>
   <button id="btn">鼠标拖动</button>
   <div id="mydiv"></div>
</body>
</html>

在这里插入图片描述

图3 jQuery事件举例

注:本文通过 CDN(内容分发网络)引用jQuery,用户可以不下载存放 jQuery。

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。