小议jQuery中的事件

阳光穿透心脏的1/2处 2023-08-17 17:19 122阅读 0赞

学了jQuery这么长时间，到这里真的有一种柳暗花明又一村的感觉，在这里先表达一下自己学这一章节的happy心情吧（在严厉的金工实习老师眼皮底下偷偷学习，当然还有各种nerves~）。

1加载DOM

在JS中浏览器装载文档通常使用window.onload方法，而在jQuery中使用的是$(document).ready()方法~这两人区别在哪里呢，JS必须等每一幅图片加载完毕后才能进行操作，网页的所有元素对jQuery而言都是可以访问的，但这并不意味着这些元素关联的文件都已经下载完毕哦，只要DOM就绪就可以操作了，何苦等所有图片都下载完毕，so,速度就这样相形见绌了~还有一点就是JS的onload事件一次只能保存对一个函数的引用，他会自动用后面的函数覆盖前面的函数，因而不在现有的行为上添加新的行为，所以为了达到两个函数顺序触发的效果JS会选择

1 window.οnlοad=function(){
    2     one();
    3     two();
    4 }

但这种方法不能解决某些需求例如多个文件使用window.onload方法加载多个JS文件。这样我们就可以每次调用$(document).ready()方法在现有行为上追加新的行为

1 function one(){
     2     alert("one");
     3 }
     4 function two(){
     5     alert("two");
     6 }
     7 $().ready(function(){
     8     one();
     9 })
    10 $().ready(function(){
    11     two();
    12 });

2事件绑定

bind()方法调用格式为

bind(type \[,data\], fn);

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

与ready()方法一样，bind()方法也可以多次调用，在代码中如果发现$(this).next()被多次调用，可以为它定义一个局部变量

1 $(function(){
     2     $("#panel h5.head").bind("click",function(){
     3         var $content=$(this).next();
     4         if($content.is(":visible")){
     5             $content.hide();
     6         }else{
     7             $content.show();
     8         }
     9     })
    10 })

改变绑定事件的类型及简写绑定事件

1 $(function(){
    2      $("#panel h5.head").mouseover(function(){
    3          $(this).next().show();
    4      }).mouseout(function(){
    5          $(this).next().hide();
    6      })
    7  })

3合成事件

jQuery有两个合成事件，那就是被我们灰常广泛的应用的hover()和toggle()方法，属于自定义方法。

hover()方法的结构为：

hover(enter,leave);该方法用于模拟光标悬停事件，当光标移动到元素上时会触发指定的enter,移出时会触发leave.

eg:

$(function(){
        $("#panel h5.head").hover(function(){
            $(this).next().show();
        },function(){
            $(this).next().hide();
        });
    });

toggle()方法可谓是老生常谈了，这里就不多啰嗦什么了吧~

结构：

toggle(fn1,fn2,fn3,...fnN);模拟鼠标连续单击事件，每次单击都是重复对这几个函数的轮番调用。

4事件冒泡和事件捕获

事件冒泡和事件捕获是一个相反的过程。

很多情况下事件冒泡会产生很多问题，那么如何停止事件冒泡呢~（event.stopPropagation();可谓是杀手锏~

5阻止默认行为

网页中的元素有自己的默认行为，eg单击超链接人家就会跳转，单击提交按钮后表单会提交，但有时我们需要阻止元素的默认行为，

比如当表单不符合提交条件时要阻止表单的提交。在jQuery中我们亮剑"preventDefault()"方法来阻止元素的默认行为。

1 <script type="text/javascript">
     2 $(function(){
     3     $("#sub").bind("click",function(event){
     4         var usename=$("#username").val();
     5         if(username==""){
     6             $("#msg").html("<p>文本框内容不能为空</p>>");
     7             event.preventDefault();
     8 
     9         }
    10     });
    11 })
    12 
    13 </script>
    14     <form action="test.html">
    15     用户名：<input type="text" id="username"/>
    16     <input type="submit" value="提交" id="sub"/>
    17     </form>
    18     <div id="msg"></div>

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。

return false;

这可比同时调用event.preventDefault();//阻止默认行为   和  event.stopPropagation();//停止事件冒泡   简单快捷多了~

6事件对象的属性

event.type,event.target//获取到触发事件的元素.event.relatedTarget//除mouseover和mouseout外的相关元素,event.pageX和event.pageY这些属性就看名字也就明白是怎么回事了，就不多说废话了。

event.which

1 $("a").mousedown(function(e){
    2 alert(e.which)//1=鼠标左键 2=鼠标中键 3=鼠标右键
    3 })

event.metaKey

众所周知，不同浏览器对<ctrl>按键的解释是不同的，有道是魔高一尺道高一丈，针对这个问题，jQuery对此进行了封装，并规定event.metaKey为键盘事件中获取<ctrl>按键。

7移除事件

关于移除事件那点说小不小的事，除了我们所熟悉的unbind()方法还有一个神奇的东西，one()方法，该方法对绑定的函数只触发一次，随后立即解除绑定关系。

8模拟操作

很多情况下是用户通过单击按钮等操作才能触发click事件，但在很多很多情况下需要模拟用户操作，这样有什么好处呢，外卖都送到宿舍门口了，不需要用户单击的才是更方便的啊~

trigger()不仅可以触发浏览器支持的具有相同名称的事件比如click ,也可以触发自定义名称的事件，关键是人家还可以传递参数

1 $("#btn").trigger("click");
    2 
    3 $("#btn").trigger("myClick");
    4 
    5 $("#btn").trigger("myClick",["我的自定义"。“事件”])；

9相关元素的其他用法

A绑定多个事件类型

1 $(function(){
    2      $("div").bind("mouseover mouseout",function(){
    3          $(this).toggleClass("over");
    4      });
    5  });

2添加事件命名空间，便于管理  
例如可以把为元素绑定的多个事件类型用命名空间规范起来

1 $(function(){
     2     $("div").bind("click.plugin",function(){
     3         $("body").append("<p>click事件</p>");
     4     $("div").bind("mouseover.plugin",function(){
     5         $("body").append("<p>mouseover事件</p>");
     6     $("div").bind("dblclick.plugin",function(){
     7         $("body").append("<p>dblclick事件</p>");
     8             });
     9     $("button").click(function(){
    10             $("div").unbind(".plugin")};
    11         });
    12  });

未完待续......

转载于:https://www.cnblogs.com/s-z-y/p/4361071.html