javascript核心技术（六十一）常用的JS原生事件绑定和JQ事件方式汇总

人亦已歌

原生事件绑定

1. 行内绑定事件 <input type="button" name="nn" id="nn" value="变色" onclick="bianse()"/>
   
2. 行内绑定函数中的this指向为window
   
3. ----------------------------------------------------------------------------------------------
   
4. 动态绑定事件 元素.onclick=function(){};
   
5. 动态绑定函数中的this指向触发事件的标签元素
   
6. 移除动态/行内绑定事件 元素.onclick=“”;
   
7. ----------------------------------------------------------------------------------------------
   
8. 事件绑定_监听绑定事件 元素.addEventListener('click',function(){});
   
9. 事件绑定_移除监听事件 元素.removeEventListener('click',f[监听函数需要是f]);
   
10. 监听绑定函数中的this指向触发事件的标签元素
    
11. 
    
12. 三种绑定方式的区别：
    
13. 行内绑定，如果同一个标签、同一个事件，生效的永远是第一个事件函数。
    
14. 普通绑定，如果同一个标签、同一个事件，生效的永远是第最后一个事件函数,之前的被覆盖。
    
15. 监听绑定，如果同一个标签、同一个事件，生效的是多个事件函数。

复制代码

JQ事件绑定

1. 页面加载事件_jQ一 $(document).ready(function(){console.log(123);});
   
2. 页面加载事件_jQ二 $().ready()(function(){console.log(123);});
   
3. 页面加载事件_jQ三 $(function(){console.log(123);});
   
4. 
   
5. 事件绑定_jQ $('#btn').click(function(){console.log('你点疼我了');});
   
6. 事件绑定_jQ $('input').mouseover(function(){console.log('来吧老弟');//多个标签同时绑定});
   
7. 事件绑定_jQ $('#btn').on('click',function(){console.log(123)});
   
8. 
   
9. 移除事件_jQ $('#btn').off('cilck');//解绑click事件
   
10. 移除并重新绑定事件_jQ $('#btn').off().on('cilck',functiong(){});//解绑以前的事件，重新绑定新的事件
    
11. 
    
12. 总结：
    
13. JQ事件绑定语法 元素.事件名称=事件函数 或 元素.on("事件名称",事件函数)
    
14. JQ事件移除语法 元素.off("事件名称")
    
15. JQ事件移除后绑定语法 元素.off("事件名称").on("事件名称",事件函数)

复制代码

YOYOMM

楼主发贴辛苦了，谢谢楼主分享！

wjghl

^我看了.  我知道了一个程序员不容易  谢谢,前辈指点!  学习了~~~~~~~~~~~~~~~~  谢谢指点,收益很深

lt5208

中肯直言，很受启发，希自融化，由此绩出。

jqsys

^  谢了。。

以嘉

这的确是很多编程者的误区，谢谢，让我们少走弯路了！！

haodss

其实每行每业都是一个道理 ！

nihaozhanghu

其实每行每业都是一个道理 ！

三杯茶

看完了，感触很深，那个考管说的有道理，但如果让我写，我还写不出那么华丽的语句类……换个角度想，你已经超越了普通编程的界线了。

Luuuv

谢谢你的经验。  非常感谢！