dom元素的事件及执行参数

1.dom元素的事件: 键盘事件 表单事件 鼠标事件 浏览器事件 触屏事件等等。
*键盘事件：onkeydown(键盘按下) onkeyup(键盘抬起) onkeypress(按键事件)
*表单事件：onfocus(获得焦点) onblur（失去焦点）
*鼠标事件：onclick（单击） ondbclick onmouseleave(水平离开) onmouseout（离开） onmousemove（鼠标移动） onmouseenter（鼠标进入） onmouseover（鼠标悬停） onmousewheel(鼠标滚轮事件)
*浏览器事件：window事件 onload（加载完成事件） onresize(窗口变化事件) onerror（报错事 件） onscroll(滑动事件)
*触屏事件：touch（触屏） touchstart （开始触屏 ） touchmove（触屏移动） touchend(触屏结束)
2.dom 元素的获取
*getElementsByClassName返回homecollection集合
*getElementsByName返回nodelist类型
*getElementById返回的是单个对象，直接使用
*getElementsByTagName返回htmlcollection集合
3.dom元素的操作（js操作的属性都是行内的）
*修改属性：btn[0].style.backgroundColor="yellow";
*获取对象的属性：console.log(btn[0].style.width);
获取非行内属性：console.log(window.getComputedStyle(btn[0]).height);
*事件的添加：btn6.onclick=show;//不能添加小括号 function show(){ console.log(1); }
动态添加：var btn=document.getElementById("btn"); btn.onclick=function(){ console.log(1); }
4.事件的监听：btn.addEventListener("click", showbtn); function showbtn() { console.log(2); }
5.事件的执行参数：执行参数e可以写在函数的形参,也可以直接window.event写

	var btn=document.getElementById("btn");
	btn.onclick=function(e){
    console.log(e);
    //target或srcElement  当前点击的目标元素
    var target= e.target|| e.srcElement;
    console.log(target);
}

document.body.onkeypress=function(){
        var e=window.event;
        console.log(e.keyCode);//输出敲下字符的ASCII值
    }

6.js里面事件的冒泡(父元素和子元素之间)

var block=document.getElementsByClassName("block")[0];
    var btnn=document.getElementById("btnb");
    var num=0;
    block.onclick=function(){
        num++;
        console.log(num);
    }
    btnn.onclick=function(e){
        num++;
        console.log(num);
        e.stopPropagation();//阻止事件冒泡
    }

7.事件的委托，父容器的事件委托给子容器进行执行

var nav=document.getElementById("ulmenu");
    nav.onclick = function(e){
        var target= e.target|| e.srcElement;
        if (target.nodeName.toLowerCase()=="li"){
            console.log(1);
        }
    }