【前端系列教程之jQuery】09_jQuery事件处理

Myth丶恋晨 2024-04-28 13:13 70阅读 0赞

## 一、页面载入 ##

### ready(fn) ###

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

## 二、事件处理 ##

### on(eve,\[sel\],\[data\],fn)1.7+ ###

在选择元素上绑定一个或多个事件的事件处理函数。

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()  
events,\[selector\],\[data\],fn：  
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click" 或" keydown.myPlugin" 。  
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。  
data:当一个事件被触发时要传递event.data给事件处理函数。  
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

### off(eve,\[sel\],\[fn\])1.7+ ###

在选择元素上移除一个或多个事件的事件处理函数。

off() 方法移除用.on()绑定的事件处理程序。  
events,\[selector\],\[fn\]：  
events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".  
selector:一个最初传递到.on()事件处理程序附加的选择器。  
fn:事件处理程序函数以前附加事件上，或特殊值false.

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

为每个匹配元素的特定事件绑定事件处理函数。  
type,\[data\],function(eventObject)：  
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。  
data:作为event.data属性值传递给事件对象的额外数据对象  
fn:绑定到每个匹配元素的事件上面的处理函数  
type,\[data\],false:  
false: 将第三个参数设置为false会使默认的动作失效。  
events: 一个或多个事件类型的字符串和函数的数据映射来执行他们。

### one(type,\[data\],fn) ###

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

多数情况下，可以把事件处理函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数）。  
type,\[data\],fn：  
type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。  
data:将要传递给事件处理函数的数据映射  
fn:每当事件触发时执行的函数。

### trigger(type,\[data\]) ###

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行

所有触发的事件现在会冒泡到DOM树上了。举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡，或者在事件处理函数中返回false即可。  
type,\[data\]：  
type:一个事件对象或者要触发的事件类型  
data:传递给事件处理函数的附加参数

### triggerHandler(type, \[data\]) ###

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

这个方法的行为表现与trigger类似，但有以下三个主要区别：  
第一，他不会触发浏览器默认事件。  
第二，只触发jQuery对象集合中第一个元素的事件处理函数。  
第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。  
type,\[data\]：  
type:要触发的事件类型  
data:传递给事件处理函数的附加参数

<button id="old">.trigger("focus")</button>
    <button id="new">.triggerHandler("focus")</button><br /><br />
    <input type="text" value="To Be Focused" />
    <script>
        // 如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。
        $("#old").click(function () {
            $("input").trigger("focus");
        });
        $("#new").click(function () {
            $("input").triggerHandler("focus");
        });
        $("input").focus(function () {
            $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
        });
    </script>

### unbind(t,\[d|f\]) ###

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

如果提供了事件类型作为参数，则只删除该类型的绑定事件。

如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。  
type,\[fn\]：  
type:删除元素的一个或多个事件,由空格分隔多个事件值。  
fn:要从每个匹配元素的事件中反绑定的事件处理函数  
type,false：  
type:删除元素的一个或多个事件,由空格分隔多个事件值  
false:设置为false会使默认的动作失效。  
eventObj：  
事件对象。这个 eventObj 参数来自事件绑定函数

## 三、事件委派 ##

### delegate(s,\[t\],\[d\],fn) ###

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。  
selector,\[type\],fn：  
selector:选择器字符串，用于过滤器触发事件的元素。  
type:附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。  
fn:当事件发生时运行的函数  
selector,\[type\],\[data\],fn：  
data:传递到函数的额外数据  
selector,events：  
events:一个或多个事件类型的字符串和函数的数据映射来执行他们。

<div style="background-color:red">
        <p>这是一个段落。</p>
        <button>请点击这里</button>
    </div>
    <script>
    	// 当点击鼠标时，隐藏或显示 p 元素：
    	$("div").delegate("button","click",function(){
          $("p").slideToggle();
        });
    </script>

### undelegate(\[s,\[t\],fn\]) ###

删除由 delegate() 方法添加的一个或多个事件处理程序。  
selector,\[type\],fn：  
selector:需要删除事件处理程序的选择器。  
type:需要删除处理函数的一个或多个事件类型。 由空格分隔多个事件值。必须是有效的事件。  
fn:要删除的具体事件处理函数。  
selector,events：  
selector:需要删除事件处理程序的选择器。  
events:一个或多个事件类型的字符串和函数的数据映射来执行他们。

## 四、事件切换 ##

### hover(\[over,\]out) ###

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。  
over,out：  
over:鼠标移到元素上要触发的函数  
out:鼠标移出元素要触发的函数

## 五、事件 ##

**blur(\[\[data\],fn\])**   
当元素失去焦点时触发 blur 事件。  
这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

**change(\[\[data\],fn\])**   
当元素的值发生改变时，会发生 change 事件。  
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

**click(\[\[data\],fn\])**   
触发每一个匹配元素的click事件。  
这个函数会调用执行绑定到click事件的所有函数。

**dblclick(\[\[data\],fn\])**   
当双击元素时，会发生 dblclick 事件。  
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

**error(\[\[data\],fn\])**   
当元素遇到错误（没有正确载入）时，发生 error 事件。  
这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。  
对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。

**focus(\[\[data\],fn\])**   
当元素获得焦点时，触发 focus 事件。  
可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。

**focusin(\[data\],fn)**   
当元素获得焦点时，触发 focusin 事件。  
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

**focusout(\[data\],fn)**   
当元素失去焦点时触发 focusout 事件。  
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

**keydown(\[\[data\],fn\])**   
当键盘或按钮被按下时，发生 keydown 事件。  
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

**keypress(\[\[data\],fn\])**   
当键盘或按钮被按下时，发生 keypress 事件。  
keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

**keyup(\[\[data\],fn\])**   
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。  
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

**mousedown(\[\[data\],fn\])**   
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。  
mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

**mouseenter(\[\[data\],fn\])**   
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。  
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

**mouseleave(\[\[data\],fn\])**   
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。  
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

**mousemove(\[\[data\],fn\])**   
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。  
mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

**mouseout(\[\[data\],fn\])**   
当鼠标指针从元素上移开时，发生 mouseout 事件。  
该事件大多数时候会与 mouseover 事件一起使用。  
注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。

**mouseover(\[\[data\],fn\])**   
当鼠标指针位于元素上方时，会发生 mouseover 事件。  
该事件大多数时候会与 mouseout 事件一起使用。  
注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。请看下面例子的演示。

**mouseup(\[\[data\],fn\])**   
当在元素上放松鼠标按钮时，会发生 mouseup 事件。  
与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

**resize(\[\[data\],fn\])**   
当调整浏览器窗口的大小时，发生 resize 事件。

**scroll(\[\[data\],fn\])**   
当用户滚动指定的元素时，会发生 scroll 事件。  
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

**select(\[\[data\],fn\])**   
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。  
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

**submit(\[\[data\],fn\])**   
当提交表单时，会发生 submit 事件。  
该事件只适用于表单元素。

**unload(\[\[data\],fn\])**  
在当用户离开页面时，会发生 unload 事件。  
具体来说，当发生以下情况时，会发出 unload 事件：  
点击某个离开页面的链接  
在地址栏中键入了新的 URL  
使用前进或后退按钮  
关闭浏览器  
重新加载页面  
fn：  
在每一个匹配元素的blur事件中绑定的处理函数。  
\[data\],fn：  
data:可传入data供函数fn处理。  
fn:在每一个匹配元素的blur事件中绑定的处理函数。

## 六、事件对象 ##

**eve.currentTarget**   
在事件冒泡阶段中的当前DOM元素

**eve.data**   
当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind

**eve.delegateTarget1.7+**   
当currently-called的jQuery事件处理程序附加元素。  
此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件，事件处理程序附加在正在处理的元素的祖先上。  
对于非授权的事件处理程序，直接连接到一个元素，event.delegateTarget 总是等价于event.currentTarget.

**eve.isDefaultPrevented()**   
根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。  
  
**eve.isImmediatePropag...()**   
根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。

**eve.isPropagationStopped()**   
根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。

**eve.namespace**   
当事件被触发时此属性包含指定的命名空间。

**eve.pageX**   
鼠标相对于文档的左边缘的位置。

**eve.pageY**   
鼠标相对于文档的上边缘的位置

**eve.preventDefault()**   
阻止默认事件行为的触发。  
例如，在执行这个方法后，如果点击一个锚点，就不会让浏览器跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)调用过了。

**eve.relatedTarget**   
在事件中涉及的其它任何DOM元素。  
对于 mouseout 事件，它指向被进入的元素；对于 mousein 事件，它指向被离开的元素。

**eve.result**   
这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。  
  
**eve.stopImmediatePro...()**   
阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

**eve.stopPropagation()**   
防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

**eve.target**   
最初触发事件的DOM元素。

**eve.timeStamp**   
这个属性返回事件触发时距离1970年1月1日的毫秒数。  
这可以很方便的检测某个jQuery函数的性能。

**eve.type**   
返回事件类型

**eve.which**   
针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。  
event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。  
**注：**  
stopPropagation与stopImmediatePropagation的区别：  
https://blog.csdn.net/weixin\_42420703/article/details/104585427

<button>display event.namespace</button>
    <p></p>
    <script>
    	// currentTarget的匹配`this`关键字。
        $("p").click(function(event) {
            alert( event.currentTarget === this ); // true  
        });  
        
        // 获取绑定的数据
        $("a").each(function(i) {
            $(this).bind('click', {index:i}, function(e){
               alert('my index is ' + e.data.index);
            });
        });
        
        // 当单击任何box类中的按钮时，将box的背景颜色更改为红色。
        $(".box").on("click", "button", function (event) {
            $(event.delegateTarget).css("background-color", "red");
        });
        
        // 检测 event.preventDefault() 是否被调用过。
        $("a").click(function(event){
            alert( event.isDefaultPrevented() ); // false
            event.preventDefault();
            alert( event.isDefaultPrevented() ); // true
    	}); 
        
        // 检测 event.stopImmediatePropagation() 是否被调用过。
        $("button").click(function(event) {
            immediatePropStopped(event);
            event.stopImmediatePropagation();
            immediatePropStopped(event);
    	});
        
        // 确定事件在命名空间中使用。
        $("p").bind("test.something", function (event) {
            alert(event.namespace);
        });
        $("button").click(function (event) {
            $("p").trigger("test.something");
        });
        
        // 显示鼠标相对于文件的左侧和顶部边缘的位置
        $(document).bind('mousemove',function(e){
           $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
        });
        
        // 在鼠标离开锚时，提醒输入的元素类型。
        $("a").mouseout(function (event) {
            alert(event.relatedTarget.nodeName); // "BODY"
        }); 
        
        // 显示前一个事件处理函数的返回值。
         $("button").click(function(event) {    return "hey";  });
            $("button").click(function(event) {
                $("p").html( event.result );
    	});
        
        // 阻止调用其它事件处理函数。
        $("p").click(function (event) {
            event.stopImmediatePropagation();
        });
        $("p").click(function (event) {
            // This function won't be executed
            $(this).css("background-color", "#f00");
        });
        $("div").click(function (event) {
            // This function will be executed
            $(this).css("background-color", "#f00");
        });
        
        // 灭掉click事件的冒泡。
        $("p").click(function(event){
            event.stopPropagation();    // do something
    	});
    </script>
    
    <input id="whichkey" value="type something">
    <div id="log"></div>
    <script>
        $('#whichkey').bind('keydown',function(e){
            $('#log').html(e.type + ': ' +  e.which );  });
    </script>