jquery事件命名空间 jquery的事件处理函数

转载

mob6454cc784c23 2023-08-08 17:43:43

文章标签 jquery事件命名空间 jQuery 事件处理控件 文章分类 jQuery 前端开发

引言：

事件：可以被控件识别的操作，控件对象和具体方法之间的联系桥梁。

概述：

jQuery的事件处理程序：当HTML页面中发生某些事件时所调用的方法，jQuery事件处理方法是jQuery中的核心函数，jQuery通过DOM为元素添加事件。

内容：

jQuery事件的具体内容，小编用一幅图呈现给大家：

jquery事件命名空间 jquery的事件处理函数_控件

这幅图看起来很简单，但是包含了很多jQuery的基础知识概念。

一我们先从jQuery的处理机制开始说，那么jQuery是如何实现事件处理的哪？在jQuery中一共存在俩种方法，一是通过修改DOM属性的方式来添加事件，示例代码如下：其中字体加粗的就是通过把一个函数赋给给了一个button的onclick事件属性。

<html>
    <head>
        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            function showMsg(){
                alert("我是李明");
            }
            $(function(){
                document.getElementById("btn").onclick = showMsg;
            }); 
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="Click me!"/>
    </body>
</html>

当然还存在另外一种方法，直接使用jQuery定位到某个元素，然后绑定事件，在事件中定义并使用函数。示例如下：

$("button#btn").click(function(){
     alter("我是李明");
})

为什么要在#btn前面加上button，就是一个控件类型的标识，如果是div元素，就可以写成div#**。最后关于事件处理方法，这里也要对比一下JavaScript，主要区别在于jQuery比传统的JavaScript的事件句柄属性少了on，也就是在JavaScript的事件是onclick，那么在jQuery中就是click。

二接下来介绍，jQuery事件的基础分类，小编认为jQuery的事件分为三类：

1 页面载入事件$(document).ready()

$(document).ready()事件。（2）window.onload()方法只能一次添加一个事件处理函数，因为onload事件一次只能保存对一个函数的引用，会自动用后面的函数覆盖前面的函数，不能在现有的行为上添加新的行为。但是jQuery就不一样，$(document).ready()方法可以在现有的行为上追加新的行为，事件处理程序函数会根据注册的顺序依次执行。示例如下：

function one(){
	.....
}
function two(){
	.....
}

window.οnlοad=one;
window.οnlοad=two;

$(document).ready(function(){
	one();
})
$(document).ready(function(){
	two();
})

javascript的方法只能执行two方法，但是jQuery的就可以按照顺序，先执行one，再执行two。

jQuery的页面加载事件声明方式有三种：1 基本方式：$(document).ready(function(){ //程序代码 }) ；2 简化方式：$(function(){ //程序代码}) ； 3 此外$(document)可以简写成$(),也就是$()不带参数，默认是document，所以第三种方式：$().ready(function(){ //程序代码 }) 。

2 一般的事件的比较多，较长用的包括：单击双击事件、焦点获取失去事件、鼠标移动事件等等。

3 jQuery合成事件：hover方法、toggle方法。hover方法是mouseenter和mouseleave俩个事件的合成事件，实现方式：$(selector).hover(enter,leave)，当光标移到元素上就会触发第一个函数enter，相当于触发mouseenter事件，当光标移出这个元素时，会触发制定到而第二个函数leave，也就是mouseleave事件方法。toggle方法用于绑定俩个或者多个事件处理器函数，将多个函数做参数放到toggle方法里面，第一次触发第一个，第二次触发第一个，依次类推。

三事件的操作，包括绑定、移除、冒泡、模拟。

$(selector).bind(event,data,function),参数分别代表事件节点，传输数据，执行函数。

$(selector).one(event,data,function)。

（3）live()方法：可以为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数，特点在于本方法能动态添加元素，这样由脚本创建的新元素也一样绑定事件。

$(selector).unbind([events[,handler]]);第二种：使用Event对象来取消绑定事件处理程序，语法结构：$(selector).unbind(eventObj)。

stopPropagation()和preventDefault()方法，preventDefault在jQuery中可以取消默认的行为。

4 模拟事件：在jQuery中可以使用trigger()方法来完成模拟操作，也就是功能实现了，但是显示效果没有完全达到。