事件绑定

在JavaScript中，事件是个复杂的问题。事件冒泡（event bubbling）和委托正在取代内联事件（inline onclick）操作 （一些特殊的“初始页”除外）。 假设你有一个图片网格，需要启动一个modal lightbox窗口。千万不要采取下面的做法，示例采用的是jQuery，如果你使用相似的库或者其他，冒泡机制也同样适合传统的JavaScript。 相关的HTML代码： <div id="grid-container"> <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a> <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a> <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a> ... </div> bad code： $('a').on('click', function(){ callLightbox(this); }); 这段代码假设调用lightbox，里面传递一个anchor元素并且引用全屏图片。与其绑定每个anchor元素还不如直接使用#grid-container元素。 nice code： $("#grid-container").on("click

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 以下属于当时的牢骚，想看正文的可以忽略，goto label:正文。 在jQuery里摸爬滚打了一阵子后，感觉对JQ也算是比较来电了，谁知，今天遇到一件事，感觉还是有点力不从心，因此特意在此处记下来。 事情是这样滴：我在做一个鼠标移上去执行某个动作的操作。当然，这肯定是用mouseover事件，结果该执行的代码没有执行，本着懒人的态度，我没有去详细分析原因，猜测应该是 DOM是后加载过来的，那么干脆直接用bind算了，bind一个应该没有问题吧，结果还不行，于是我就晕了。无可奈何之下，只能百度（不要拍我，我也想用google,不过实在是太慢了，有时候搜到了还打不开），关键词是这样的“jQuery 绑定事件失效”。结果我搜到了一般关于live方法的文章。文章太长了，又有代码，不好理顺了，继续懒人，直接翻一下手册，看看live。结果发现正好合适，live可以想像成bind的bind的（当然实际上不是），于是用了一下，果然可以了。高兴之余，记录之。 正文： 先看看Javascipt的事件绑定吧： Javascipt的事件绑定 这个可以使用一些DOM自带的绑定方式：如 <a href="#" onclick="runthis()"></a> 如果您的JS代码里有对应的runthis方法，那么这个就可以执行了。

关于 javascript 事件绑定的资料网上已有很多，这里总结自己使用过程中遇到的问题及得出的想法。 事件绑定的方式 1. 在 DOM 中直接绑定，如 onlick=”function(){}” 2. DOM 对象属性绑定，如 obj.onclick=function(){} 3. DOM对象obj.attachEvent("onclick",function(){}) 进行绑定 某日做一ajax分页显示 html代码如下： <p class="pagelist"> <span class="cur">1</span> <span>2</span> <span>3</span> </p> Javascript代码如下： $(‘span’).click(page); Function page(){ //发送请求，接收新页面内容，并生成新的分页列表 $.post(url,postdata,function(data){ $(‘. pagelist’).html(data.pagelist); },”json”) } 出现问题 页面加载完毕，点击页码内容刷新，再次点击页码内容不刷新 解决办法 很笨的方法，换成了第一种绑定方式 <p class="pagelist"> <span class="cur" onclick=”page()”>1</span> <span onclick=