【事件绑定快捷方式】
$("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进行事件绑定的几种情况的更多相关文章

  1. jquery on()方法绑定多个选择器,多个事件

    on(events,[selector],[data],fn) •events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myP ...

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

    这样一个需求,如果用live()方法实现的话 非常简单,容易理解. $('nav li, #sb-nav li, #help li').live('click', function () { // c ...

  3. 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。

    http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...

  4. jQuery使用(七):事件绑定与取消,及自定事件的实现原理

    实例方法: on() one() off() trigger() hover() 一.绑定事件与jQuery事件委托 $(selector).eventType(fn); $(selector).on ...

  5. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  6. JQuery中绑定事件(bind())和移除事件(unbind())

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 ...

  7. jQuery绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...

  8. 手写instanceof (详解原型链) 和 实现绑定解绑和派发的事件类

    A  instanceof  B    是判断  A  是否继承自B,是返回true,  否返回false 再精确点就是判断B   是否  再  A  的 原型链上, 什么是原型链,举个例子: 我们定 ...

  9. jquery 使用off移除事件 使用one绑定一次事件,on绑定事件后触发多次相同的事件的异常

    <!-- jquery 移除事件,绑定一次事件,搜狗 one --> <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. Visual Studio 2017 如何 监控当前变量 占用内存空间大小

    在进行VS调试时 大家是否想知道当前变量 占用了内存多少空间呢 这对系统调优还是很有帮助的吧

  2. iOS Facebook SDK

    iOS 使用 Facebook SDK 可以登录,分享,发布通知(Notifications)等. 首先下载 Facebook SDK.然后在 Facebook Developer 上注册自己的 ap ...

  3. 【ocp-12c】最新Oracle OCP-071考试题库(37题)

    19.choose the best answer View the Exhibit and examine the structure of the PROMOTIONS table. Evalua ...

  4. COGS1752. [BOI2007]摩基亚Mokia(CDQ,树状数组)

    题目描述 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它能够回 ...

  5. Python面向对象(定义类和创建对象)

    day24 http://www.cnblogs.com/wupeiqi/p/4493506.html Python:函数式+面向对象,函数式编程可以做所有事,但是不一定合适. 小明,10岁,男,上山 ...

  6. ASP.NET MVC 发布后 IE 访问出现布局错乱问题

    ASP.NET MVC 网页debug启动跑一切正常,[Chrome],[FireFox],[Edge],[IE11] 发布后,使用机器名访问,[IE11]出现布局不正常的问题, 在head里:加↓可 ...

  7. Android 线刷小白教程

    Android 线刷小白教程 再说一遍,绝不使用刷机精灵等软件. 一.概念 安卓系统一般把rom芯片分成7个区,如果再加上内置sd卡这个分区,就是8个: hboot分区----------负责启动. ...

  8. 【转载】MDX Step by Step 读书笔记(四) - Working with Sets (使用集合)

    1. Set  - 元组的集合,在 Set 中的元组用逗号分开,Set 以花括号括起来,例如: { ([Product].[Category].[Accessories]), ([Product].[ ...

  9. 微信小程序之蓝牙 BLE 踩坑记录

    前言 前段时间接手了一个微信小程序的开发,主要使用了小程序在今年 3 月开放的蓝牙 API ,此过程踩坑无数,特此记录一下跳坑过程.顺便开了另一个相关的小项目,欢迎 start 和 fork: BLE ...

  10. mysql中权限的小知识

    参考:https://www.cnblogs.com/apollo1616/articles/10294490.html mysql中user表中host列的值的意义 % 匹配所有主机 localho ...