1,冒泡机制
事件冒泡:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
阻止冒泡:w3c的方法是:(火狐、谷歌、IE11) event.stopPropagation()
IE10以下则是使用:event.cancelBubble = true
兼容代码如下:
var event = event ||window.event;
if(event &&event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble = true;
}
addEventListener使用:调用者是:事件源。
参数1:事件去掉on 参数2 :调用的函数 参数3:可有可无。没有默认false.
(false情况下,支持冒泡。True支持捕获。)
2,event获取当前作用对象
IE678 event.srcElement
火狐/谷歌等 event.target
兼容写法获取元素ID:
var event = event || window.event;
var targetId= event.target? event.target.id : event.srcElement.id;
3,获取用户选择的内容
window.getSelection().toString(); 标准浏览器 w3c
document.selection.createRange().text; ie678
4,事件委托
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
为什么要使用事件委托?
在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;
每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了(内存不够用,是硬伤,哈哈),比如上面的100个li,就要占用100个内存空间,如果是1000个,10000个呢,那只能说呵呵了,如果用事件委托,那么我们就可以只对它的父级(如果只有一个父级)这一个对象进行操作,这样我们就需要一个内存空间就够了,是不是省了很多,自然性能就会更好。
使用:根据事件冒泡原理,所有深层级的节点在处理事件的时候都会逐渐向外层冒泡,所以直接在更高的层级处理事件即可。
5,获取元素属性的方法
•给属性赋值:(既能获取又能赋值)
–div.style.width 单个赋值
–div.style[“width”] 变量赋值
•获取属性值:(只能获取)
–div.currentStyle.width; IE678 单个获取
–div.currentStyle[“width”]; IE678 变量获取
–window.getComputedStyle(div,null).width;
–window.getComputedStyle(div,null)[“width”];
参数1:获取属性的元素。
参数2:伪元素,C3学习。
兼容:
6,透明度
•opacity: 0.5; 内容一起透明.(火狐谷歌IE9+)
取值范围: 0-1
•filter: alpha(opacity=50); IE678
取值范围: 0-100
兼容写法:
获取:var opacity = getStyle(ele,k)*100 || 1;
赋值: ele.style[k] = leader/100;
ele.style.filter = "alpha(opacity="+opacity+")"; //兼容IE678