这篇文章主要介绍了 JavaScript 中利用 jQuery 绑定事件的几种方式小结, 包括不调用 jQuery 的 "原生 js" 实现方式, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
开发过程中经常要给 DOM 元素添加一些事件,下面介绍几种方式:
先写几个好看的 button
- //引入JQuery
- <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
- <span id="tips"></span>
- <input type="button" id="btn1" value="OK1" onclick="alert('hello btn1');">
- <input type="button" id="btn2" value="OK2" click-type="listener">
- <input type="button" id="btn3" value="OK3" click-type="listener">
- <input type="button" id="btn4" value="OK4">
- <input type="button" id="btn5" value="OK5">
- <div id="btn-list">
- <input type="button" id="btn6" value="OK6">
- <input type="button" id="btn7" value="OK7">
- </div>
效果如下:
1、直接在 btn1 使用 onclick,这种方式称为内联事件,简单粗暴,好处是可以清晰地看到 button 绑定了 click 事件;这种方式等同于:(element).onclick;
这种方式的缺点,一个元素只能指定一个内联事件,添加了这段代码之后会发现 onclick="alert('hello btn1');" 被覆盖了:
- (function(){
- var _btn1 = document.getElementById('btn1'),
- _tips = document.getElementById('tips');
- _btn1.onclick=function(){
- _tips.innerhtml='hello world~';
- };
- })();
2、使用原生 JS 给多个元素绑定事件,在 IE 9 之前的版本中,需要使用 attachEvent 替代 addEventListener
- (function() {
- var _btns = document.querySelectorAll("[click-type=listener]"),
- i = 0,
- len = _btns.length;
- for (i; i < len; ++i) {
- var _btn = _btns[i];
- _btn.addEventListener("click",
- function(evt) {
- var target = evt.target alert('hello ' + target.id);
- });
- }
- })();
3、第二种方式逻辑比较简单,逼格会高一点,但是代码量比较多,而且还需要考虑 IE 的兼容性问题,由于我们的项目一般都会使用到 JQuery,所以就可以这样写了:
- $("#btn4").click(function(){
- alert("hello btn4");
- });
- $("#btn5").on("click",function(){
- alert("hello btn5");
- });
上面使用到的 on 和 bind 方法效果是一样的;
4、使用 on,给多个元素绑定一个或多个事件:
- $("#btn-list").on("click","input",function(evt){
- alert("hello "+ evt.target.id);
- });
这是我现在在开发中最常用的一种方法,有个好处,举个栗子:
- /*动态添加几个button*/
- (function(){
- for(var i=8;i<10;i++){
- $("#btn-list").append("<input type='button' id='btn"+i+"' value='OK"+i+"'>");
- }
- })();
这样动态添加元素的时候可以自动添加 click 事件,比如我们经常使用 AJAX 加载一些数据动态添加到页面上,这样就简单多了。
另外:使用原生 JS 利用事件委托实现也比较简单,
- <ul id='list'>
- <li>CSS</li>
- <li>js</li>
- <li>html</li>
- </ul>
- (function(){
- var a=document.getElementById('list');
- a.addEventListener('click',function(e){
- var b = e.target;
- alert(b.innerHTML);
- },false);
- })();
来源: http://www.phperz.com/article/17/0405/266813.html