版权声明:本文为博主原创文章,未经博主允许不得转载

一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结:

1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数,例如 <button onclick="alert('点我啊!')">点我啊</button>

2.也可以设置一个id 例如<button id="btn">点我啊</button><br>

$('#btn').click(function(){

})

3.还可以写成这种格式,点击执行函数,但是函数写在外面,例如  btn1.onclick = demo; function demo(){ alert('打你干吗?'); }

其实以上三种本质应该是一种,只是形式不一样

对于多事件的绑定,我用的最多的就是on() 和 bind(),一下介绍一下它们的区别

on的基本语法:on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

如果只是一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样,与以上的几种方式也没有太多的区别

如果是多个事件绑定到一个函数,或则多个事件绑定到多个函数,就需要用到on了:

多个事件一个函数:

$(document).ready(function(){
  $("p").on("mouseover mouseout",function(){
   alert("多个事件一个函数");
  });
});

多个事件绑定不同的函数

$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});

on的第二个参数可以阻止一些情况下的冒泡,原理简单说就是用选择器来精确到匹配到你想执行函数的那个元素,而bind()就没有这个参数,因此在使用bind()时很可能产生冒泡

很多资料上显示:bind() live() delegate()都是通过.on()来实现的,虽然不是很懂,但是在使用中我也是更喜欢使用on()

js事件绑定的几种方式与on()、bind()的区别的更多相关文章

  1. JS事件绑定的三种方式比较

    js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  2. js事件绑定的几种方式

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...

  3. JS 事件绑定的几种方式 小笔记

    第一种 var test=document.getElementById('add'); add.onclick=function(){ alert('1'); } 直接在对象上注册事件 缺点:如果我 ...

  4. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  5. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  6. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

  7. Javascript事件绑定的几种方式

    Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...

  8. jQuery中的事件绑定的几种方式

    jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...

  9. React事件绑定的几种方式对比

    React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...

随机推荐

  1. Java线程面试题:设计四个线程,其中两个线程每次对 j 加 1,另外两个每次对 j 减 1,程序如下。

    package thread; /** * Java线程面试题 * @author zhongfg * @date 2015-06-16 */ public class ThreadInterview ...

  2. c_str()方法使用

    语法: const char *c_str(); c_str()函数返回一个指向正规C字符串的指针常量, 内容与本string串相同. 这是为了与c语言兼容,在c语言中没有string类型,故必须通过 ...

  3. Dire Wolf(区间DP)

    Dire Wolf Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 512000/512000 K (Java/Others)Total ...

  4. docker安装并配置加速

    安装 旧版本的 Docker 称为 docker 或者 docker-engine,使用以下命令卸载旧版本: sudo apt-get remove docker \ docker-engine \ ...

  5. every row of W is a classifier for one of the classes

    every row of W is a classifier for one of the classes As we saw above, every row of W is a classifie ...

  6. Delphi编译指令说明

    Delphi快速高效的编译器主要来自Object PASCAL的严谨,使用Delphi随时都在与编译器交流,大部分情况下不需要干涉编译器的运行,但是有时也需要对编译器进行必要的设置. ******** ...

  7. Struts2学习总结(完整版)

    一.搭建struts2环境 1.jar包的导入 主要是到 解压其中的一个工程,得到里面lib下包含的jar包 把这里的所有的jar包拷贝到项目的 WEB-INF目录下的lib文件夹下面. 2.配置st ...

  8. 转 Hadoop傻瓜化:Datameer大数据收入翻三番

      淘薛奎发布到 <数据极客> 06-28 16:04 随着分析正在成为企业IT的核心,昔日的BI- ETL-EDW分析范型已经完全落伍,不再适用.而力推“大数据傻瓜化”的Datameer ...

  9. Google员工自述:在哈佛教书和在Google工作的差别

    感谢伯乐在线的投递编者按:2003年到2010年期间,原文作者Matt Welsh 是哈佛大学工程和应用科学学院的计算机科学系教授.2010年加入Google,是一名高级工程师.他当前的工作重点是广域 ...

  10. python正则-- re模块

    匹配数字相关'.' 默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行'^' 匹配字符开头,若指定flags MULTILINE,这种也可以匹配上(r" ...