js笔记3dom

1 dom对css的操作
获取行内样式：

    hh.style.width;
    hh.style.backgroundColor

设置行内样式：

    hh.style.width="500px";
    hh.style.backgroundColor="red";

2 dom二级事件

<script type="text/javascript">
    //添加简单的dom二级事件demo1
    hh.addEventListener('mouseover',function () {
        //hh 或 this 他们代表的对象一致，都是h2标题标签的"元素节点对象"
        this.style.backgroundColor="lightblue";
        hh.style.color="red";
    })

    //添加简单的dom二级事件demo2
    function f1 () {
        console.log('111');
    }
    //为同一个h2元素对象绑定多个click事件
    //f1没有()括号，是函数的名字对click进行赋值(而非函数运行返回的信息复制)
    hh.addEventListener('click', f1);
    hh.addEventListener('click', f2);
    hh.addEventListener('click', f3);

    //取消事件操作，要求：
    //① 有名函数处理
    //② 参数个数与绑定完全一致
    hh.removeEventListener('click', f2); 
    hh.removeEventListener('click', f3); 
</script>

3 事件流

<script type="text/javascript">
    // 事件流的操作
    var sp = document.getElementsByTagName('span')[0];
    var pt = document.getElementsByTagName('p')[0];
    var dv = document.getElementsByTagName('div')[0];
    //sp.onclick = function(){}
    //addEventListener(类型，处理，事件流true捕捉/false冒泡);
    //为了阻止比较有意义，只考虑冒泡型即可。
    sp.addEventListener('click', function (evt) {
        console.log('this is span tag');
        evt.stopPropagation(); //阻止事件流产生
    },false);
    pt.addEventListener('click', function (evt) {
        console.log('this is p tag');
        evt.stopPropagation();
    },false);
    dv.addEventListener('click', function (evt) {
        console.log('this is dv tag');
        evt.stopPropagation();
    },false);
</script>

4 获得事件对象

hh.onclick = function(evt){}

<script type="text/javascript">     var hh = document.getElementsByTagName('h2')[0];    //主流浏览器(包括IE9以上)，事件对象就是事件处理函数的第一个形参     hh.onclick = function(evt){
        alert(evt);     } 
</script>

5 事件对象的作用
① 鼠标事件对象获得坐标信息

    evt.clientXevt      clientY //获得鼠标相对DOM区域坐标
    evt.pageX           evt.pageY //获得鼠标相对DOM区域坐标(给考虑滚动条距离)
    evt.screenX         evt.screenY //获得鼠标相对屏幕的坐标

③ 感知被触发键子信息:`evt.keyCode`