Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >jquery事件绑定

jquery事件绑定

作者头像
用户1197315
发布于 2018-01-19 07:13:47
发布于 2018-01-19 07:13:47
3.6K0
举报
文章被收录于专栏:柠檬先生柠檬先生

.bind()   为一个元素绑定一个元素处理程序。   .bind(eventType[,eventData],handler(eventObject))     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件触发时执行的函数。   .bind(eventType[,eventData],preventBubble)     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     preventBubble       第三个参数设置为false 将绑定一个函数。防止默认事件,阻止事件冒泡,默认值是true。   .bind(events)     events       一个对象,包含一个或多个DOM事件类型或函数执行他们。

  用法:     $('#foo').bind('click', function() {       alert('User clicked on "foo."');     }); //当点击#foo这个元素的时候弹出 这句话。

    $('#foo').bind('mouseenter mouseleave', function() {       $(this).toggleClass('entered');     }); // 一次可以绑定多个 事件,用逗号隔开,

.delegate()   为所有匹配选择器的元素绑定一个或者多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些匹配到的元素,也包括那些今后可匹配的元素。   .delegate(eventType[,eventData],handler(eventObject))     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件触发时执行的函数。   .delegate(selector,eventType,eventData,handler(eventObject))     selector       选择器字符串,用于过滤器触发事件的元素。     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件触发时执行的函数。   .delegate(selector,events)     selector       选择器字符串,用于过滤器触发事件的元素。     events       一个对象,包含一个或多个DOM事件类型和函数并执行它们。     使用方法:       $("table").delegate("td", "click", function() {         alert($(this).text());       });         每当td的文字被点击时候,要显示一个警告框:       $("body").delegate("a", "click", function() { return false; })           返回false,取消默认的行为,防止从它冒出来的,:       $("body").delegate("a", "click", function(event){           event.preventDefault();       });         要取消默认动作只有通过使用preventDefault方法。

.die()   从元素中删除先前.live()绑定的所有事件。   .die()     这个方法不接受任何参数。   .die(eventType[,handler])     eventType       一个包含一个JavaScript事件类型的字符串,比如click 或keydown。     handler       将来不用执行的函数。   .die(events)       events         包含一个或多个事件类型的一个普通对象.   用法:     $("p").die()       解除所有段落上绑定的live 事件。     $("p").die("click")       解除所有段落上通过live事件绑定的click 事件。

.off()   移除一个事件处理函数。   .off(events[,selector][,handler])     events       一个或多个空格分隔的事件类型和可选的命名空间     selector       一个选择器,当绑定事件处理程序时匹配最初传递给     handler       以前附加的事件处理函数.   .off(events[,selector])     events       一个对象的字符串所代表的一个或多个空格的事件类型和可命名的空间。     selector       一个选择器,当绑定事件处理程序的匹配最初传递给。   .off(event)     event       一个jqery.event对象。   .off()     这个方法不接受任何参数。

  用法:     $("p").off()       移除所有段落上的事件:     $("p").off( "click", "**" )       移除所有段落上的代理事件:

.on()   在选定的元素上绑定一个或多个事件处理函数。   .on(events[,selector][data],handler(eventObject))     events       一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click",     selector       一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。     data       当一个事件被触发时,要传递给事件处理函数的event.data。     handler       事件被触发时,执行的函数。   .on( events [, selector ] [, data ] )     events       一个对象,键是由一个或多个由空格分隔的事件类型及可选的名字空间,值是这些事件类型所对应的事件处理函数。     selector       一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。     data       当一个事件被触发时,要传递给事件处理函数的event.data。   用法:     $('p').on("click",function(){       alert($(this).text());     }) //当点击段落的时候,显示该段落中的文本。

    $('form').on("submit",false)       //取消表单的提交动作。

    $("form").on("submit",function(event){        event.preventDefault();     }) // 通过使用.preventDefault() 仅取消默认的动作。

    $("div").on("click",function(event,person){         alert("Hello,"+person.name);      }) //传递一个data数据给事件处理程序,作为第二个参数。

    $("body").on("click","p"function(){         alert($(this).text());       }) // 当点击该段落时候,显示该段落的文本。

.one()   为一个元素的事件添加处理函数,处理函数在每个元素上每种事件类型最多执行一次。   .one(events[,data],handler(eventObject))     events       一个包含一个JavaScript事件类型的字符串,比如click;     data       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每次事件触发时会执行的函数。     用法:     $( "#foo" ).one( "click", function() {       alert( "This will be displayed only once." );     }); //第一次点击该段落的时候会 弹出警示框。

.trigger()   根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。   .trigger(eventType[,extraParameters])     eventType       一个包含一个JavaScript事件类型的字符串,比如click;     extraParameters       传递给事件处理程序的额外参数。   .trigger(event[,extraParameters])     event       一个jquery.event对象。     extraParameters       传递给事件处理程序的额外参数。   用法:    $('#foo').on('click', function() {     alert($(this).text());     });     若要提交第一个表单但又不想使用 submit() 函数,请尝试如下方法:     $("form:first").trigger("submit");     .triggerHandler()         为一个事件执行附加到元素的所有处理程序。     .triggerHandler( eventType [, extraParameters ] )       eventType         以后包含JavaScript事件类型的字符串,比如click 或 submit。       extraParameters         传递给事件处理程序的额外参数。     .triggerHandler(event[,extraParameters])       event         一个 jQuery .Event 对象.       extraParameters         传递给事件处理程序的额外参数。       $("#old").click(function(){           $("input").trigger("focus");        }); //当点击了这个元素才会触发input 的获得焦点事件。

.unbind()   从元素上删除一个以前附加事件处理程序。   .unbind(eventType[,handler])     eventType       一个包含JavaScript事件类型的字符串,比如click 或 submit。     handler       这个函数今后不在执行。   .unbind(eventType,false)     eventType       一个包含JavaScript事件类型的字符串,比如click 或 submit。     false       解除绑定相应的'return false'函数,这个函数使用.bind( eventType,false )绑定。   .unbind(event)     一个jquery.event对象。   .unbind()     此签名不接受任何参数。   用法:     $('#foo').unbind();       //删除所有事件类型的处理程序。     $('#foo').unbind('click')       //删除所有点击事件。   .undelegate()     删除当前选择器匹配的所有元素的事件处理程序,根据组特定根元素的集合。   .undelegate( selector, eventType )     selector       选择器字符串,用于过滤器触发事件的元素。     eventType       一个包含一个或多个用空格隔开的JavaScript事件类型的字符串,比如"click"或"keydown"。   .undelegate( selector, eventType, handler(eventObject) )     selector       选择器字符串,用于过滤器触发事件的元素。     eventType       一个包含一个或多个用空格隔开的JavaScript事件类型的字符串,比如"click"或"keydown"。     handler(eventObject)       每当事件触发时执行的函数。   .undelegate( selector, events )     selector       选择器字符串,用于过滤器触发事件的元素。     events       一个或多个事件类型和以前绑定的函数组成的一个对象,用来以解除他们(处理程序)。   .undelegate( namespace )     namespace       一个字符串,其中包含一个命名空间,以解除所有事件。   用法:     解除绑定的所有段落都从委托的事件:       $("p").undelegate()     解除绑定的所有段落的所有委托点击事件:       $("p").undelegate( "click" )

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-11-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
02-老马jQuery教程-jQuery事件处理
1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件的方式,可以让我绑定多个事件处理程序跟D
老马
2018/01/05
2.7K0
02-老马jQuery教程-jQuery事件处理
根据文章内容总结摘要。
老马
2017/12/27
6.5K0
02-老马jQuery教程-jQuery事件处理
[jQuery学习系列四 ]4-Jquery学习四-事件操作
前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 青年中国说 SELF格致论道 参考:http://www.365mini.com/page/tag/jquery-event-methods 1,ready ready()函数用于在当前文档结构载入完毕后立即执行指定的函数。 该函数的作用相当于window.onload事件。 2,blind bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。 举例:
一枝花算不算浪漫
2018/05/18
4.5K0
前端基础-jQuery事件机制
第8章 jQuery事件机制 JavaScript中已经学习过了事件,jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。 8.1 jQuery事件发展历程(了解) 简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐) 简单事件注册 click(handler) 单击事件 mouseenter(handler) 鼠标进入事件 mouseleave(handler) 鼠标离开
cwl_java
2020/03/26
6900
jquery鼠标事件
click()   为点击事件绑定一个事件处理函数,或者触发元素点击事件。   .click( handler(eventObject) )     handler(eventObject)       每次事件触发时候执行的函数。   .click([eventData],handler(eventObject))     eventData       一个对象,它包含的数据键值对应映射将被传递给事件处理程序。   handler(e
用户1197315
2018/01/19
4.5K0
JavaScript 事件委托 以及jQuery对事件委托的支持
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://louluan.blog.csdn.net/article/details/24009177
亦山
2019/05/25
8280
zepto 基础知识(5)
81.width   width() 类型:number   width(value) 类型:self   width(function(index,oldWidth){....}) 类型:self   获取对象集合中第一个元素的宽,或者设置对象集合中所有元素的宽。     $('#foo').width() //123     $(window).width() //768     $(document).width() //7
用户1197315
2018/01/19
6970
JQuery第三节
区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
用户3461357
2019/08/02
8070
jquery的事件&动画
在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法
bamboo
2019/01/29
1.8K0
jquery的事件&动画
jquery 事件绑定及取消 bind live delegate on one区别 (超详细且通俗易懂)
$(selector).bind(event,data,function,map)
坚毅的小解同志的前端社区
2022/11/28
2.4K0
jQuery 事件绑定 和 JavaScript 原生事件绑定
jQuery 中提供了四种事件监听绑定方式,分别是 bind、live、delegate、on,
Krry
2018/09/10
5.7K0
jQuery 事件绑定 和 JavaScript 原生事件绑定
jQuery源码解析之click()的事件绑定
一、事件委托 DOM有个事件流特性,所以触发DOM节点的时候,会经历3个阶段: (1)阶段一:Capturing 事件捕获(从祖到目标) 在事件自上(document->html->body->xxx)而下到达目标节点的过程中,浏览器会检测 针对该事件的 监听器(用来捕获事件),并运行捕获事件的监听器。
进击的小进进
2022/03/28
1.8K0
jQuery源码解析之click()的事件绑定
jquery第一次课的案例教程
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。 (animate.js、common.js)
用户9184480
2024/12/19
710
jQuery 事件
什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypr
静默虚空
2018/01/05
2.9K0
jQuery基础--事件处理
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
eadela
2019/09/29
2.5K0
jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件
之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个”on”方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法 基本用法:.on( events ,[ selector ] ,[ data ] ) 最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同
Yiiven
2022/12/15
4.1K0
JavaScript 学习-40.jQuery 绑定事件 on 和 bind
前言 jquery 有四种绑定事件的方式:on, bind, delegate,live。其中 live() 方法已被移除。 自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代。 $(selector).off(type)为元素解除绑定的事件 on 绑定事件 基本语法 $(selector).on(event,childSelector,data,function) 参数 描述 event 必需。事件的类型一个或多个,由空格分隔多个事件
上海-悠悠
2022/06/07
1K0
JavaScript 学习-40.jQuery 绑定事件 on 和 bind
前端开发JS——jQuery常用方法
click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作,这两个方法用法及其类似,所以这只介绍click事件,只有单击释放后才生效,而且同一元素不能同时绑定click和dbclick事件
用户1289394
2021/10/13
5K0
jQuery之事件绑定到触发全过程及知识点补充
前言: 最重要的还是最后的流程图,可以试着根据流程图手写实现$().on(),下篇文章会放出模拟实现的代码。
进击的小进进
2019/09/05
7930
jQuery之事件绑定到触发全过程及知识点补充
jquery 表单事件
.blur()    当元素失去焦点的时候触发事件。   .blur(handler(eventObject))     handler(eventObject)       每当事件触发时候执行的函数。   .blur([eventData],handler(eventObject))     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件
用户1197315
2018/01/19
1.5K0
相关推荐
02-老马jQuery教程-jQuery事件处理
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文