7月18号讲课内容

第一节课:

复习:

  • Element有几个重要属性

    1. nodeName:元素标签名,还有个类似的tagName
    2. nodeType:元素类型
    3. className:类名, style
    4. id:元素id
    5. children:子元素列表(HTMLCollection)
    6. childNodes:子元素列表(NodeList)
    7. firstChild:第一个子元素
    8. lastChild:最后一个子元素
    9. nextSibling:下一个兄弟元素
    10. previousSibling:上一个兄弟元素
    11. parentNode、parentElement:父元素
    
  • 设置style的方式, getAttribute, setAttribute以及attributes

    • 1) 创建节点:

      createElement(http://www.w3school.com.cn/xmldom/met_document_createelement.asp),
      createTextNode,createComment,
      cloneNode(http://www.w3school.com.cn/xmldom/met_node_clonenode.asp)
      
    • 2) 删除节点:

      removeChild()(http://www.w3school.com.cn/jsref/met_node_removechild.asp)
      
    • 3) 插入节点:

      appendChild, insertBefore(http://www.w3school.com.cn/xmldom/met_node_insertbefore.asp)
      insertAdjacentHTML(  https://msdn.microsoft.com/en-us/library/ms536452(VS.85).aspx,)
      
    • 4) 替换节点:

      replaceChild (http://www.w3school.com.cn/jsref/met_node_replacechild.asp)
      
    • 5) innerHTML / innerText/outerHTML(最好不要使用)

    • 6) DocumentFragment

      http://www.w3school.com.cn/xmldom/dom_documentfragment.asp
      
    • 7) document的write方法
  • 重点:

    1) 了解DOM元素的几个操作方法
    2) 知道如何遍历,操作DOM元素
    3) 能动态的添加,删除元素
    4) 讲解动画,弹出框的原理
    

第二节课:

第三节课:

1) addEventListener, attachEvent的区别

  • 在添加事件处理程序事addEventListener和attachEvent主要有几个区别

    1. 参数个数不相同,这个最直观,addEventListener有三个参数,attachEvent只有两个,attachEvent添加的事件处理程序只能发生在冒泡阶段,addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理(我们一般为了浏览器兼容性都设置为冒泡阶段)

    2. 第一个参数意义不同,addEventListener第一个参数是事件类型(比如click,load),而attachEvent第一个参数指明的是事件处理函数名称(onclick,onload)

    3. 事件处理程序的作用域不相同,addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,this是window,所以刚才例子才会返回undefined,而不是元素id

    4. 为一个事件添加多个事件处理程序时,执行顺序不同,addEventListener添加会按照添加顺序执行,而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的,但是添加的多了就无规律了),所以添加多个的时候,不依赖执行顺序的还好,若是依赖于函数执行顺序,最好自己处理,不要指望浏览器

  • 事件封装的写法:

    E = {
        //添加事件
        add : function(el, type, fn){
            if(el.addEventListener){
                el.addEventListener(type, fn, false);
            }else{
                el['e'+fn] = function(){
                    fn.call(el,evt);
                }; 
                el.attachEvent('on' + type, el['e'+fn]);
            }
        },
        //删除事件
        remove : function(el, type, fn){
            if(el.removeEventListener){
                el.removeEventListener(type, fn, false);
            }else if(el.detachEvent){
                el.detachEvent('on' + type, el['e'+fn]);
            }
        }  
    };
    

2) Event (http://www.w3school.com.cn/jsref/domobjevent.asp)

重点:

var evt = e || window.event; //event 获取方式

//目标元素

var target = evt.target || evt.srcElement;

var x = evt.x || evt.clientX;

//兼容写法
// keyCode 取值范围
// clientX,clientY, pageX,pageY

//阻止默认行为
if(evt.preventDefault) {
    evt.preventDefault();
}else {
    evt.returnValue = false;
}
//阻止冒泡
if(evt.stopPropagation) {
    evt.stopPropagation();
}else {
    evt.cancelBubble = true;
}

3) mouseover 与mouseenter的区别

mouseover: 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave

这样的话,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生。

作业:

1 封装一个函数insertHTML(el, position, html) //position 为

beforeBegin,afterBegin, beforeEnd,afterEnd, html为字符串

2 封装toggle方法 toggle(el)