事件绑定的快捷方式 利on进行事件绑定的几种情况
【事件绑定快捷方式】
$("button:first").click(function(){
alert(1);
});
【使用on绑定事件】
① 使用on进行单事件绑定
$("button").on("click",function(){
//$(this) 取到当前调用事件函数的对象
console.log($(this).html());
});
② 使用on同时为多个事件,绑定同一函数
$("button").on("mouseover click",function(){
console.log($(this).html())
})
③ 调用函数时,传入自定义参数
$("button").on("click",{name:"jianghao"},function(event){
// 使用event.data.属性名 找到传入的参数
console.log(event.data.name);
})*/
④ 使用on进行多事件多函数绑定
$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseOver")
}
});
⑤ 使用on进行事件委派
>>> 将原本需要绑定到某元素上的事件,改为绑定在父元素乃至根节点上,然后委派给当前元素生效;
eg:$("p").click(function(){});
↓
$(document).on("click","p",function(){});
>>> 作用:
默认的绑定方式,只能绑定到页面初始时已有的p元素,当页面新增p元素时,无法绑定到新元素上;
使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件
$("button").on("click",function(){
var p = $("<p>444444</p>");
$("p").after(p);
});
$("p").click(function(){
alert(1);
});
$(document).on("click","p",function(){
alert(1);
});
off() 取消事件绑定
1. $("p").off(): 取消所有事件
2. $("p").off("click"): 取消点击事件
3. $("p").off("click mouseover"):取消多个事件
4. $(document).off("click","p"):取消事件委派
使用.one() 绑定事件,只能执行一次
$("button").one("click",function(){
alert(1);
})
/* .trigger("event"):自动触发某元素的事件
*
* $("p").trigger("click",["haha","hehe"]); 触发事件时,传递参数
*/
/*$("p").click(function(event,arg1,arg2){
alert("触发了P的click事件"+arg1+arg2);
})
$("button").click(function(){
$("p").trigger("click",["haha","hehe"]);
})*/
事件绑定的快捷方式 利on进行事件绑定的几种情况的更多相关文章
- jquery on()方法绑定多个选择器,多个事件
on(events,[selector],[data],fn) •events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myP ...
- jQuery事件之on()方法绑定多个选择器,多个事件
这样一个需求,如果用live()方法实现的话 非常简单,容易理解. $('nav li, #sb-nav li, #help li').live('click', function () { // c ...
- 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。
http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...
- jQuery使用(七):事件绑定与取消,及自定事件的实现原理
实例方法: on() one() off() trigger() hover() 一.绑定事件与jQuery事件委托 $(selector).eventType(fn); $(selector).on ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- JQuery中绑定事件(bind())和移除事件(unbind())
有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...
- jQuery绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...
- 手写instanceof (详解原型链) 和 实现绑定解绑和派发的事件类
A instanceof B 是判断 A 是否继承自B,是返回true, 否返回false 再精确点就是判断B 是否 再 A 的 原型链上, 什么是原型链,举个例子: 我们定 ...
- jquery 使用off移除事件 使用one绑定一次事件,on绑定事件后触发多次相同的事件的异常
<!-- jquery 移除事件,绑定一次事件,搜狗 one --> <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- Visual Studio 2017 如何 监控当前变量 占用内存空间大小
在进行VS调试时 大家是否想知道当前变量 占用了内存多少空间呢 这对系统调优还是很有帮助的吧
- iOS Facebook SDK
iOS 使用 Facebook SDK 可以登录,分享,发布通知(Notifications)等. 首先下载 Facebook SDK.然后在 Facebook Developer 上注册自己的 ap ...
- 【ocp-12c】最新Oracle OCP-071考试题库(37题)
19.choose the best answer View the Exhibit and examine the structure of the PROMOTIONS table. Evalua ...
- COGS1752. [BOI2007]摩基亚Mokia(CDQ,树状数组)
题目描述 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它能够回 ...
- Python面向对象(定义类和创建对象)
day24 http://www.cnblogs.com/wupeiqi/p/4493506.html Python:函数式+面向对象,函数式编程可以做所有事,但是不一定合适. 小明,10岁,男,上山 ...
- ASP.NET MVC 发布后 IE 访问出现布局错乱问题
ASP.NET MVC 网页debug启动跑一切正常,[Chrome],[FireFox],[Edge],[IE11] 发布后,使用机器名访问,[IE11]出现布局不正常的问题, 在head里:加↓可 ...
- Android 线刷小白教程
Android 线刷小白教程 再说一遍,绝不使用刷机精灵等软件. 一.概念 安卓系统一般把rom芯片分成7个区,如果再加上内置sd卡这个分区,就是8个: hboot分区----------负责启动. ...
- 【转载】MDX Step by Step 读书笔记(四) - Working with Sets (使用集合)
1. Set - 元组的集合,在 Set 中的元组用逗号分开,Set 以花括号括起来,例如: { ([Product].[Category].[Accessories]), ([Product].[ ...
- 微信小程序之蓝牙 BLE 踩坑记录
前言 前段时间接手了一个微信小程序的开发,主要使用了小程序在今年 3 月开放的蓝牙 API ,此过程踩坑无数,特此记录一下跳坑过程.顺便开了另一个相关的小项目,欢迎 start 和 fork: BLE ...
- mysql中权限的小知识
参考:https://www.cnblogs.com/apollo1616/articles/10294490.html mysql中user表中host列的值的意义 % 匹配所有主机 localho ...