Javascript应用-js事件的on与bind

一、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:当一个事件(events)被触发时要传递event.data(事件的属性或数据)给事件处理函数（fn）。

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()时很可能产生冒泡。