jQuery中的on方法详细介绍

news/2024/7/11 1:56:44 标签: jQuery, on
ontent" class="article_content clearfix">
ontent_views" class="htmledit_views"> on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
如需移除事件处理程序,请使用 off() 方法。

如需添加只运行一次的事件然后移除,请使用 one() 方法。

语法:

.on( events [, selector ] [, data ], handler(eventObject) )
events:类型: String(必选)

  • 一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

selector:类型: String(可选)

  • 一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件。

data:类型: Anything(可选)

  • 当一个事件被触发时,要传递给事件处理函数的event.data。

handler(eventObject):类型: Function()   (必选)

  • 事件被触发时,执行的函数。若该函数只是要执行return false的话,那么该参数位置可以直接简写成 false。

嗯,这个我们用的其实也还蛮多的,所以events和fn我就不详细说了,主要是data参数和selector参数说一下

function可以是false,嗯,看个例子:

取消表单的提交动作,并且通过返回 false 的方法来防止事件冒泡:

$("form").on("submit", false)

如果data参数给.on()并且不是null 或者 undefined,那么每次触发事件时,event.data都传递给处理程序。data参数可以是任何类型,但如果是字符串类型时,那么selector参数必须提供,或明确地传递null,这样的 data 参数不会误认为是选择器。最好是使用一个对象(键值对) ,所以可以作为属性传递多个值。

看个小例子

$('.div1').on('click',{name:"leo"},function(ev){
        console.log(ev.data.name);//leo
    });

如果省略selector或者是null,那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时,就会执行处理程序,不管它直接绑定在元素上,还是从后代(内部)元素冒泡到该元素的

当提供selector参数时,事件处理程序是指为委派 事件(注:通常也有很多人叫它代理事件)。事件不会在直接绑定的元素上触发,但当selector参数选择器匹配到后代(内部元素)的时候,事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如,由最内层元素到最外层元素)开始冒泡,并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器,那么这些元素上的事件也会被触发。

事件处理只能绑定在当前被选中的元素上;而且,在您的代码调用.on()的时候,他们必须在页面文档中已经存在。为了确保目前的元素可以被选择的

ong>使用事件委托的好处:ong>

委托事件有一个优势,他们能在后代元素添加到文档后,可以处理这些事件。 在确保所选择的元素已经存在的情况下,进行事件绑定时,您可以使用委派的事件,以避免频繁的绑定事件及解除绑定事件。 

除了可以给未创建的后代元素绑定事件外(即上面提到的优势),代理事件的另一个好处就是,当需要监视很多元素的时候,代理事件的开销更小。

看个例子:

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:yellow; font-weight:bold; cursor:pointer;
    padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Click me!</p>
<span></span>
<script>
var count = 0;
$("body").on("click", "p", function(){
  $(this).after("<p>Another paragraph! "+(++count)+"</p>");
});
</script>
 
</body>
</html>

点击任何一个段落时,就在它后面追加一个段落。注意,.on() 会为任何段落添加事件,包括新生成的段落,因为当事件冒泡到已经存在的 body 元素上时,就会触发绑定的事件

$("body").on("click", "a", function(event){
  event.preventDefault();
});

使用 preventDefault 方法,取消链接的默认动作。



参考文章:https://www.jquery123.com/on/


http://www.niftyadmin.cn/n/951822.html

相关文章

jQuery中选择器(包含实例)

因为我查了一下&#xff0c;发现网上别人总结的确实也都不错了&#xff0c;所以我下面主要是对选择器的使用&#xff08;其实主要还是为了督促自己多练习使用啦&#xff09; 推荐两个我觉得不错的关于选择器的总结&#xff1a;jQuery选择器、W3C-jQuery选择器 jQuery中的选择器…

mysan用的什么树mysql_MySQL索引.md

索引是帮助MySQL高效获取数据的排好序的数据结构。### 存储引擎#### MyISAMMyISAM存储引擎的索引文件和数据文件是分离的(非聚簇&#xff0c;即索引和数据是分开存储的)&#xff1b;![image-20201021084421515](http://markdown.xiaonainiu.top/img/image-20201021084421515.pn…

兼容性问题系列总结(一)

之前有写过css知识点系列总结&#xff0c;觉得效果还不错&#xff0c;所以打算把遇到的兼容性问题也汇总到一起&#xff0c;就当记笔记喽&#xff08;也是会持续更新滴&#xff09; 2018/6/20--js兼容性问题-- 1. JSON 解析问题&#xff1a; ecmascript5 通过 JSON 对象进行处…

mysql myisam commit_MySQL之MyISAM和InnoDB

一、区别1、MySQL默认采用的是MyISAM。2、MyISAM不支持事务和外键&#xff0c;而InnoDB支持。InnoDB的AUTOCOMMIT默认是打开的&#xff0c;即每条SQL语句会默认被封装成一个事务&#xff0c;自动提交&#xff0c;这样会影响速度&#xff0c;所以最好是把多条SQL语句显示放在beg…

ngrinder 入库mysql_script Ngrinder_TestRunnerInsertMysqlSingle.groovy

s阿里巴巴Java开发规范手册.ziphttp://dl.iteye.com/topics/download/ffc4ddcf-8b65-3b3c-b146-96468e2baf40nGrinder 平台调试groovy压测脚本&#xff0c;成功&#xff01;C:\Users\Lindows\workspace\GroovyTest\src\com\iteye\lindows\mysql\TestRunnerInsertMysqlSingle.gr…

添加自定义字体icon图标

先提供一个比较好的自定义icon图标库阿里图标库 所以接下来的使用主要就是以从上面提供的网址下载的icon图标为例&#xff08;如果不会使用&#xff0c;请参考使用 下载完之后是一个压缩包&#xff0c;解压后&#xff0c;只需要根据我们的需要把相应的文件放入我们的项目中即可…

js中的Math对象知识点整理

整理的都是我觉得比较常用的 Math 是一个内置对象&#xff0c; 它具有数学常数和函数的属性和方法。不是一个函数对象。与其它全局对象不同的是, Math 不是一个构造器. Math 的所有属性和方法都是静态的. Math的属性 Math.PI 圆周率&#xff0c;一个圆的周长和直径之比&#…

部署java项目_部署java新项目

java源码部署总结&#xff1a;环境&#xff1a;nginxtomcat部署方式&#xff1a;源码部署源码目录/chroot2/test/schedule 目录下面就是所有源码了tomcat位置: /usr/local/tomcat/apache-tomcat-scheduleweb-test主要配置文件server.xmldirectory"logs" prefix"…