JavaScript事件详解
2016-03-11 13:28
357 查看
1.事件传播机制:事件冒泡,事件捕获。
![](file:///C:/Users/Acer/AppData/Local/YNote/data/qqEF7AE4954873DB995A33CF799714BE8F/e857efcc16e84168a8d17ddd4dd049b2/z%24%7Df6v%5B9vqilrstk%5Baqdq0m.png)
![](file:///C:/Users/Acer/AppData/Local/YNote/data/qqEF7AE4954873DB995A33CF799714BE8F/e857efcc16e84168a8d17ddd4dd049b2/z%24%7Df6v%5B9vqilrstk%5Baqdq0m.png)
![](http://images2015.cnblogs.com/blog/910706/201603/910706-20160311132413241-1627331314.png)
2.注册事件处理程序方式:
设置html标签属性为事件处理程序,文档元素的事件处理程序属性,名字由“on”后面跟着事件名组成,例如:onclick,onmouseover,用法如下<div id="div1" onClick="console.log('div1');"><div>
html里面不区分大小写,所以事件处理程序属性名字 onClick 大小写可以混写
若给同一元素写多个onclick事件处理属性,只执行第一个onclick里面的代码
在事件冒泡中注册事件处理程序
设置JavaScript对象属性为事件处理程序,用法如下
div1.onclick = function(){ console.log('div1'); };
因为JavaScript是严格区分大小写的,所以,这种形式下属性名只能按规定小写;
若给同一元素对象写多个onclick事件处理属性,后面写的会覆盖前面的
在事件冒泡过程中注册事件处理程序
addEventListener()
addEventListener()接受三个参数:
div1.addEventListener('click',function(){ console.log('div1-bubble'); },false);
不会覆盖
第一个参数是要注册处理程序的事件类型,其值是字符串,但并不包括前缀“on”;
第二个参数是指当指定类型的事件发生时应该调用的函数;
第三个参数是布尔值,默认值为false=在事件冒泡过程中注册事件处理程序。
true=就是在事件捕获过程中注册事件处理程序。
IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。
3.事件委托 在元素还未添加到页面之前就为它绑定事件,这里也是经常遇到的问题!用于新增的dom节点,其他方法无效
$(document.body).on('click','#lucky-draw',function(){ })
普通绑定---$(".delete").click(function(){}); 相当于在所有类为delete上面分别注册click事件。内存占用大,绑定时间也长,并且不适用于动态添加的元素!
.on绑定----只在document上注册了一个click事件,内存占用约2.2M,绑定时间约为1ms。故这种方式绑定比较好!
4.事件冒泡
说到事件,不得不说的就是防止事件冒泡1) 对比 event.preventDefault() 和 event.stopPropagation()
event.stopPropagation() 方法 在事件传播链中阻止事件冒泡, event.preventDefault() 只是在事件发生时阻断浏览器的默认响应,但事件仍然会向上传递。
例如:
// 这个例子中, 一个 id 是 'foo' 的 div 包含了一个 id 是 'bar' 的 button $("#foo").click(function(){ / div 'foo' 上的鼠标点击 }); $("#bar").click(function(e){ // button 'bar' 上的鼠标点击 e.stopPropagation(); });
由于按钮的点击处理内部调用了 stopPropagation() 方法,这个事件永远不会传递到 div ,所以 div 的点击事件处理不会被触发。它能够有效阻止父元素捕获子元素的事件。
相反,如果你把刚才调用的 stopPropagation() 替换成 preventDefault(),只有浏览器的默认响应会被阻止,但是 div 的点击事件处里仍然会被触发。
2) 返回 false
(a)在 jQuery 事件处理中返回 false 相当于 jQuery 的 event 对象连续调用了 preventDefault() 和 stopPropagation() 方法。
(b) 在超链接标签的原生 Javascript onclick 事件处理中返回 false 会阻止浏览器默认的地址导航,并且阻止了DOM事件的冒泡传递。
(c) 在非超链接标签(例如: div,button等)的原生 Javascript onclick 事件处理中返回 false 不会起任何作用。
事件大概就总结到这里,有不正确的劳烦各位大神指点一下。码完之后要午睡一下,下午才有一个好状态继续学习嘿嘿。
相关文章推荐
- JSON和对象之前的相互转换
- angular.js学习笔记之一
- javascript笔记:通过对作用域链和执行环境的深入理解所得出的提高javascript代码性能的建议 《转载》...
- JS通过使用PDFJS实现基于文件流的预览功能
- js仿百度登录页实现拖动窗口效果
- javascript实现<area herf="...">新窗口打开
- doT.js——前端javascript模板引擎问题备忘录
- JavaScript 入门哪本书最好?(问、答) 《转载》
- [资料收集]js小技巧
- [连载]JavaScript讲义(02)--- JavaScript核心编程
- JS判断字符串是否为纯数字
- 关于 JavaScript prototype __proto__ 一点总结
- js数据格式转换
- google maps js v3 api教程(3) -- 创建infowindow
- google maps js v3 api教程(3) -- 创建infowindow
- SVG Path与d3下的 Path
- google maps js v3 api教程(3) -- 创建infowindow
- JSPatch实现原理详解
- javascript中parseInt函数的用法
- Ajaxfileupload 总结(包括插件处理json格式bug的解决方案)