绑定事件的几个方法总结

以click事件为例：

1. on方法

两个好处：

a.如果一个dom元素中有多个子元素，单独去给每个子元素绑定事件的话，会影响到性能。

而现在使用on。则只用使此dom元素调用on方法，选择器用上其子元素，即可以所有符合条件的元素都能实现绑定。

$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件；

b.为动态添加的元素也能绑上指定事件； // (目前好像只有on方法可以实现此功能，其他好像都是针对已经加载好的元素定义事件)

$('ul li').on('click', function(){console.log('click');})的绑定方式和$('ul li').bind('click', function(){console.log('click');})一样；

通过js给ul添加了一个li：$('ul').append('<li>js new li<li>')；')；这个新加的li是不会被绑上click事件的

但是我用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

即在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

2. $("p").click(function(){

　　　　　alert("haha");　　

　　})

3.一般作为标签中的属性来使用onclick

<p onclick="haha">nihao</p>

function haha(){

　　alert("onclick");

}

4. addEventListener(event,funtionName,useCapture)

obj.addEventListener("click",fn,fasle));
function fn(){
//do something..
}

二----------------------------------------------------------------------------------------------------------------------

其中on与addEventListener，on事件会被后面的on事件覆盖，而addEventListener则不会、

’

//obj是一个dom对象，下同
//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too"); //最终只会是这个
});

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

、、

会连续输出：

hello world

hello world too

三-----------------------------------------------------事件的集合-----------------------------------------------------------------------------------------------------------------

1.鼠标事件：

click(单击)
dbclick(双击)
mousedown(鼠标按下)
mouseout(鼠标移走)
mouseover(鼠标移入)
mouseup(鼠标弹起)
mousemove(鼠标移动)

2.键盘事件：

keydown(键按下)
keypress(按键)
keyup(键起来)

3.HTML事件：

load（加载页面）
unload（卸载离开页面）
change（改变内容）
scroll（滚动）
focus（获得焦点）
blur（失去焦点）

最后补充一个博客链接：http://blog.csdn.net/zhcscs/article/details/46486613

里面写到了bind delegate on方法的区别及使用。很赞

来源：https://www.cnblogs.com/yyzyxy/p/8034187.html

标签

hello world