章节
问答
课签
笔记
评论
占位
占位

on()的多事件绑定

之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法:.on( events ,[ selector ] ,[ data ] )

最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

最大的不同点就是on是可以自定义事件名,当然不仅仅只是如何,继续往下看

多个事件绑定同一个函数

 $("#elem").on("mouseover mouseout",function(){ });

通过空格分离,传递不同的事件名,可以同时绑定多个事件

多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );

可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的

 

以上都是on方法基本用法,具体可以参考下右边的代码的一些使用

任务

在代码39行处,填入任务代码

给 id="test1"的元素绑定一个click事件
?不会了怎么办

on

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 慕无忌4172087
触发事件的类型哇

最新回答 / qq_对自己好点_1
测试一on前面缺失了一个.;没发现吗?  $("#test1").on('click', function(e) {        $(this).text('触发事件:' + e.type);    })

已采纳回答 / 慕仔8302059
click()只对页面已经存在的元素起作用,动态生成的元素需要用到on,比如页面中存在一个button,<button id='btn1' type='button'>btn1</button>,$('#btn1').click(....)是可以成功触发的,但如果动态创建一个新的button比如这样:$('#btn1').after("<button id='btn2' type='button'>btn2</button>"),调用$('#btn2').c...

最赞回答 / 阿宅娘
function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );
这里
$( "button" ).on( "click", {
  name: "慕课网"
}, greet ...

最新回答 / web_東
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script></head><body><script type="text/javascript">    $(document).ready(functi...

最新回答 / qq_fzjiwillbegy_0
为button绑定click方法,点击时执行greet()方法,并将参数{name:"慕课网"}传过去;

已采纳回答 / web前端小白进阶
三个测试就是为了说明on()的三种用法,1基本用法;2多个事件绑定同一个函数;3多个事件绑定不同函数只是测试二和三里边的函数体是一样的。

最赞回答 / qq_逐梦之旅GO_0
e表示这个事件,target表示这个事件的目标e只是指这个事件,而e.target是指事件触发的dom,相当于this。区别是this会冒泡;你要用只能用this.value或e.target.value。需要冒泡时候就用this.value不用冒泡时候就用e.target.value

已采纳回答 / 慕斯卡9214220
e是当前触发的  这个事件  的对象,e.type也就是当前事件的类型   如click,mousedown  看你在哪一个事件里使用了e   那这个e.type就是哪一个事件

已采纳回答 / qq_Xxxxxxxxxxx_0
指的是当前触发的这个事件对象本身可以百度一下 DOM Event

最新回答 / Smell_rookie
e是用来监听你绑定时间的行为,e.type是用来监听绑定时间行为的类型。如按下还是松开

最赞回答 / Robert_Langdon
如果data参数提供给.on()并且不是null 或者 undefined,那么每次触发事件时,通过event.data传递给处理程序。data参数可以是任何类型,但如果是字符串类型时,那么selector参数必须提供,或显式地传递null,这样的 话,data 参数不会被误认为是选择器。最好是使用一个对象(键值对) 以致于可以作为属性传递多个值。$("#test3").on("click",null,"测试data",function(event){    alert(event.data)})

已采纳回答 / 慕前端5422844
这是多个事件绑定多个处理函数,与一个事件绑定一个处理函数是一样的,只是多了个事件而已,单个事件绑定on(“click”,function(e))这个懂吧?

已采纳回答 / 慕粉2243585596
$("#test2").on('mousedown mouseup', function(e)这句就是在绑定mousedown和 mouseup事件,这里绑定多个事件是用空格分隔开的
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言