DOM

一、获取元素在集合中下标的方法（伪代码）。

1、设置自定义属性

Element.setAttribute(name,value)

2、通过为对象添加属性的方式

element.index = value

3、通过each方法

collection.each(index,val)

二、常见兼容性问题解决

1、在ie6-8中无法通过为通过事件处理程序的参数直接获取事件对象而是通过window.event对象获取。解决办法:

div.onclick = function(e) {
                e = e || window.event;
   }

2、ie9之前不支持element.addEventListener()注册事件，而是使用element.attacheEvent()注册事件。解决方案:

function addEventListener(ele, type, fn) {
            if (ele.addEventListener) {
                ele.addEventListener(type, fn)
            } else if (ele.attacheEvent) {
                ele.attacheEvent(type, fn);
            } else {
                ele['on' + type] = fn;
            }
        }

3、阻住事件的默认行为

 a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            e.returnValue = false;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
            return false;
   }

4、阻止冒泡的兼容型处理

 

a.onclick = function(e) {
//标准
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
//ie9以前的版本
                window.event.cancelBubble = true;
            }
        }

四、利用事件委托注册事件

<ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>