通过Jquery来绑定事件监听器

最新推荐文章于 2022-06-17 10:07:29 发布

Abudula__

最新推荐文章于 2022-06-17 10:07:29 发布

阅读量884

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/Abudula__/article/details/82936371

版权

本文介绍了如何使用Jquery来绑定事件监听器。通过示例代码展示了使用`click`事件以及`on`方法添加多个事件的方式。提供了一段包含多个事件绑定的完整题目代码，供读者参考学习。

摘要由CSDN通过智能技术生成

event无处不在，我们需要添加事件，添加事件语法如下：

$("p").click();

$("p").click(function(){
  // action goes here!!
});

如上代码选择了id为p的元素，并执行了click事件，里面的function内可以写具体的执行内容。有时候可能饿哦们在同一个节点上添加多个事件，因此下面的形式更加常用。

$("p").on("click", function(){
    $(this).hide();
});

就是通过on来链接，这样可添加多个事件，比如如下代码。在p元素上添加了多个事件。

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    }, 
    click: function(){
        $(this).css("background-color", "yellow");
    } 
});

下面是一道题目的完整代码，可以参考：

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Abudula__

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

深入理解JQuery循环绑定事件

10-22

文章中提到的“循环绑定事件”是指在一个for循环中，根据数组中的元素数量，动态地为每个元素添加事件监听器。这在处理一组相似的元素，如按钮、图片等时尤其有用。在文章的内容部分，作者给出了一个具体的实现...

jQuery动态绑定监听事件

TO BE SMART

08-28

4567

$(".comment").on("click", "#zan_img", function () { console.log(this.tagName.toLowerCase()); // "a" var canZan=$(this).attr('zaned'); if (canZan=='c') { var approvin

参与评论您还未登录，请先登录后发表或查看评论

jQuery监听事件有很多种方法

weixin_48929505的博客

06-17

6763

jquery事件监听

JQuery添加事件监听

他的博客

06-25

1万+

一）JQuery选择器：二）JQuery文档加载事件： //文档加载事件一 $(document).ready(function(){ alert("文档加载完成1!"); }); //文档加载事件二 $(function(){ alert("文档加载完成2!"); }); 三）bind()添加事件监听：例一：(给p元素添加一个点击事件) <p>哈哈</p> $...

jquery对事件的监听方法addEventListener()

qq_36521848的博客

01-06

4768

在这个点击事件的监听里，我们可以获取鼠标的点击坐标 (function($){ window.addEventListener("click",function(evt){ for(var i in evt) { console.log(i + "---" + evt[i]); } },false); })(jQuery); ...

jQuery常见事件的监听方式

Erudite_x的博客

06-03

1130

在 Web 页面经常会有各种事件发生，事件发生后需要进行一些特定处理，即执行特定的函数或者语句。这就需要对事件进行监听，监听事件的常见方式有以下三种，本人将通过实例来具体介绍。 1.HTML标签内联事件实例1：单击页面 “Hello” 按钮，弹出提示框显示 Hello world！ <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &lt

JQuery选择器绑定事件及修改内容的方法

10-24

在事件绑定方面，传统JavaScript需要为每个元素单独绑定事件监听器，而jQuery通过简洁的方法简化了这个过程。在jQuery 1.7版本之前，通常使用`.bind()`方法来绑定事件。`.bind()`方法允许我们为选择器匹配到的所有...

浅谈Jquery为元素绑定事件

10-24

关于Jquery为元素绑定事件的知识点，我们需要从几个方面来进行详细说明： 1. Jquery事件绑定机制：在Jquery中，我们可以通过多种方式为元素绑定事件，例如使用bind()方法、live()方法、delegate()方法和on()方法。...

浅析jQuery事件之on()方法绑定多个选择器,多个事件

10-22

它只需要在DOM树上绑定一个事件监听器，而不是每个目标元素都绑定，大大减少了内存的占用和提高了执行效率。 6. **与旧方法的比较**： - `.bind()`方法已被弃用。在旧版本的jQuery中，它用于直接为元素绑定事件。 ...

jQuery绑定事件的四种方式介绍

11-27

`delegate()`方法与`live()`类似，也是使用事件委托，但它允许将事件监听器绑定到最近的父元素，而不是整个`document`。这降低了性能开销，因为只需要监听父元素而不是整个DOM树。其语法为： ```javascript ...

jquery中四种事件监听的区别

热门推荐

hangzhang

08-06

5万+

我们知道jquery提供了四种事件监听方式，分别是bind、live、delegate、on,下面就分别对这四种事件监听方式分析。已知有4个列表元素: 　　列表元素1 　　列表元素2 　　列表元素3 　　列表元素4 1.bind bind(type,[data],function(eventObject)) bind是使用频率较高的一种，作用就是在选择到的元

Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

aigenglong0649的博客

08-30

707

　　作为全球最知名的js框架之一，jQuery的火热程度堪称无与伦比，简单易学的API再加丰富的插件，几乎是每个前端程序员的必修课。从读《锋利的jQuery》开始，到现在使用jQuery有一年多的时间了，对jQuery算是比较了解了，唯一没做到的就是读源码。网上看到有人写jQuery源码解析的，我也没细看，个人觉得如果光是为了解析源码而解析源码，未免有点太劳神了，没有实际用途，我更倾向于...

10.22 监听器和JQuery

wsxye18730291676的博客

10-23

151

10.22 监听器和JQuery 监听机制：事件：比如一个按钮单击，则点击的动作就是一个事件事件源：事件在什么上发生的，按钮就是一个事件源监听器：一个对象或一段代码注册监听：将事件，事件源，监听器绑定到一起，将事件源上发生事件时，将会执行监听器代码。监听器有好多，这里只学习一个：ServletContextListener（接口）:监听ServletContext对象的创建和销毁两个方...

jQuery事件监听

moduzhang的博客

09-26

1万+

monitorEvents() 浏览器事件监听 控制或右键单击元素并选择“检查 (Inspect)”。在 javaScript 控制台标签中输入： monitorEvents($0) 现在，将鼠标悬停在该元素上时，关注或单击它，将显示触发事件的名称及其数据。要停止获取该数据，只需在控制台中写入下行： unmonitorEvents($0) monitorEvents() Documentat...

jquery各种监听事件

qq_39464523的博客

04-03

1万+

按钮点击事件： $('id').on('click', function() { }); 下拉框option改变事件： $('id').change(function() { }); 鼠标滑动事件 $('id').mousemove(function() { }); datetimepicker（事件控件）改变时间事件 $('id').datetimepicker({ langu...

使用jquery实现监听事件

web_cgh的博客

06-28

3173

$(document).ready(function () { $('body').on("click", ".thumbnail", function (e) { // console.log(e); console.log(e.currentTarget.currentSrc); console.log(e.target.dataset.ind...

【js:jquery】jquery选择器与事件监听

u010918847的专栏

09-19

3972

1.所谓为选择器就是像js中 getElementById 或者getElementByClass 一样获取页面中的元素。以下为jQuery选择器获取到对象的方法： $('')中填写的内容不一样，选择器也不一样。大致的有以下几种：格式实例选取 * $('*') 获取页面中所有元素 # $('#id') 获取对应ID元素 . $('.class') 获取对象类名的

jquery事件监听之on()方法

AndrewNeo

05-25

1万+

什么是事件监听：当用户在界面上执行一个操作，例如按下键盘、拖动或者单击鼠标时，都将产生一个事件。类似的DOM事件如：onclick、onmouseover、onmouseout、onkeydown、onkeyup、onkeypress、onload、onselect、onchange、onchange、onfoucs、onblur等等。那么，我们对这些事件进行监听就叫做事件监听。 jquery总...

【JQuery】用JQuery来监听浏览器改变窗口大小事件

能看代码的CrackLibby

06-16

1万+

做web开发的时候会遇到需要监听浏览器窗口大小改变事件，而进行相关操作。这里像大家介绍一下 JQuery浏览器窗口改变事件。 $(window).resize(); 这里需要注意这个事件不要写在页面加载完成事件（ $(function(){…} ）内部，而需要写在他外面。 $(window).resize(function() { var width = $(this).width(