JQuery（绑定事件/ 解除事件/触发事件/事件对象）

曾经终败给现在 2024-04-19 09:41 69阅读 0赞

### 绑定事件 ###

1.简单事件绑定：    $(selector) .click(handler)

2.bind方式绑定：  1.  bind(“click  mouseenter”, function()\{\})        //绑定多个相同事件

2.bind（\{ click：function () \{\} ,  mouseenter ()\{  \}    \}）

优点：可以同时绑定多个事件

缺点：仍然无法给动态创建的元素绑定事件

(js中解决动态创建  是在元素创建完成插入到父级元素后 ，给元素绑定事件)

那么该如何给动态创建的元素也绑定事件？事件委托。

3.delegate方式绑定（即事件委托）:    $(父元素selector)  .delegate (子元素selector  ，event，handler)     
                               第一个参数：要触发事件的子元素。  
                               第二个参数：事件类型  
                               第三个参数：事件处理函数

优点：可以给动态创建的元素绑定事件

缺点：

事件委托：委托它们父级代为执行事件。指定父级委托事件 去处理程序，用来管理某一类型的所有事件。

4.on的方式来绑定事件：

jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

on注册事件的语法:   $(selector). on(events ,\[selector\] ,\[data\] ,handler);

第一个参数: events, 绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)

第二个参数: selector, 触发事件的后代元素(可选)， 如果没有后代元素，那么事件将有自己执行。

第三个参数: data, 传递给处理函数的数据，事件触发的时候通过event . data来使用(不常使用)

第四个参数: handler, 事件处理函数

on注册简单事件：

$(selector).on( "click", function()\{ \}) ();          //表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。

on注册委托事件：

$(selector).on( "click", "span”, function() \{ \}));

表示给$(selector )绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定

优点：包括了上面所有绑定事件方式的优点。

### **事件解绑** ###

1.简单事件解绑：      .onclick()  = null ;

2.unbind() 方式         不传参数，解除所有事件

传参数，解绑特定事件

3.undelegate() 方式

不传参数，解除所有事件

传参数，解绑特定事件

4. .off 解绑 on方式绑定的事件   
$(selector).off();            不传参数，解除所有事件

$(selector).off(“click”);    传参数，解绑特定事件

### 事件触发 ###

简单事件触发                   $(selector).click();              //触发 click事件

trigger方法触发事件        $(selector).trigger(“click”);

###    **事件对象：** ###

本质：对 js事件对象的封装，处理了兼容性

screenX和screenY   对应屏幕最左 上角的值

clientx和clientY          页面可视区域的X.Y

pagex和pageY距离页面最 顶部的左上角的位置(会计算滚动条的距离)

e. keyCode  按下的键盘代码

e data  存储绑定事件时传递的附加数据

e . stopPropagation()阻止事件冒泡行为

e. preventDefault()  阻止浏览器默认行为（阻止a跳转）

return false:既能阻上事件冒泡，又能阻止浏览器默认行为。

发表评论取消回复

表情：

评论列表（有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery（绑定事件/ 解除事件/触发事件/事件对象）

绑定事件 1.简单事件绑定： $(selector) .click(handler) 2.bind方式绑定： 1. bind(“c...

曾经终败给现在/ 2024年04月19日 09:41/ 0 赞/ 70 阅读

相关 JQuery-事件绑定详解

目录定义元素监听事件 on() 绑定事件 -------------------- 定义元素监听事件语法：$(选择器).监听事件名称(处理函数); 说明

一时失言乱红尘/ 2022年11月29日 12:20/ 0 赞/ 219 阅读

相关 jQuery——事件篇( 鼠标、表单、键盘、事件绑定和解绑、事件对象、自定义事件)

鼠标事件 click()与dbclick()事件  <div id="test">点击触发<div> $("ele").

亦凉/ 2022年07月14日 12:59/ 0 赞/ 241 阅读

相关 jquery事件的绑定解绑触发对象

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2022年07月14日 00:40/ 0 赞/ 250 阅读

相关 jquery绑定事件

bind()向匹配元素添加一个或多个事件处理器。 $(selector).bind(event,data,function) live() 向当前或未来的匹配元素添加一个

左手的ㄟ右手/ 2022年06月17日 01:27/ 0 赞/ 334 阅读

相关 JQuery_绑定事件

绑定：绑定事件：一.如何给元素同时绑定两个事件？方法一：链式编程 $('button').click(function(){ a

ゞ浴缸里的玫瑰/ 2022年05月20日 23:42/ 0 赞/ 373 阅读

相关 jQuery基础事件绑定

学习要点： 1.绑定事件 2.简写事件 3.复合事件 JavaScript有一个非常重要的功能，就是事件驱动。当页面完全加载后，用户通过鼠标或键盘触发页面中绑定事件的

分手后的思念是犯贱/ 2022年05月13日 11:36/ 0 赞/ 302 阅读

相关 jQuery事件绑定与常用事件

jQuery事件与js类似，只是在名称上将前面的on去掉了，例如jQuery的click、mousedown、keypress事件。jQuery绑定事件有2种方法，下面用最基本

妖狐艹你老母/ 2021年12月20日 10:07/ 0 赞/ 368 阅读

相关 jQuery--解除事件绑定

解除事件绑定在元素绑定事件之后，当在某个时刻不再需要该事件处理时，可以解除所绑定的事件。在jQuery中提供了unbind()和undelegate()方法，分别用于解

叁歲伎倆/ 2021年08月13日 18:59/ 0 赞/ 554 阅读

相关 Jquery绑定Enter键触发事件

当我们在使用搜索功能时,输入搜索内容后,总希望向某些网站一样,点击enter键之后就自动触发搜索按钮,不用去手动点击.其实实现这一功能很简单。首先我们需要知道的是,ente

水深无声/ 2021年06月24日 14:37/ 0 赞/ 671 阅读