dom事件设置（二）

一、dom2级事件设置

　　1、var dv=document.getElementsByTagName('div')[0];

　　　dv.addEventListener('click',function(){//dv.addEventListener('click',处理 有名/匿名函数);

　　　　　dv.style.backroundColor='pink';

　　　　　//this代表div的元素节点对象

　　　　　this.style.width='400px';

　　　　　});

　　2、为同一个div对象设置多个mouseover事件

　　　　var dv = document.getElementsByTagName('div')[0];

　　　　　　//dv.addEventListener('click',处理 有名/匿名函数);
　　　　dv.addEventListener('click',function(){
　　　　　　//this 代表div的元素节点对象
　　　　dv.style.backgroundColor="pink";
　　　　this.style.width="400px";
　　});　　

　　function f1(){　　　　//this代表事件的主体节点对象

　　this.style.height = "300px";
　　console.log(111111);
　　}
　　function f2(){
　　console.log(222222);
　　}
　　function f3(){
　　console.log(333333);
　　}
　　
　　dv.addEventListener('mouseover',f1);
　　dv.addEventListener('mouseover',f2);
　　dv.addEventListener('mouseover',f3);

3、dom 2级事件取消

　　function cancel（）{

　　　　dv.removeEventLisrener('mouseover',f2);

　　　　}

4、事件流

<h2>事件流</h2>
<div>
    <p>
        <span>
            i am span tag
        </span>
    </p>
</div>

var dv=document.getElementsByTagName('div)[0];
var pp=document.getElementsByTagName('p')[0];
var sp=document.getElementsByTagName('span')[0];
//addEventListener(类型，处理，true捕捉/false冒泡);
sp.addEventListerner('click',function(evt){
    console.log('span tag');
    evt.stopPropagation();//阻止事件流产生
    }，false）；
pp.addEventListener("click",function(evt){
    console.log('p tag');
    evt.stopPropagation();//阻止事件流产生
},false);
dv.addEventListener("click",function(evt){
    console.log('div tag');
    evt.stopPropagation();//阻止事件流产生
},false);

5、获得事件对象

//形参evt 代表事件对象
function clk(evt){
//alert(evt);//object MouseEvent
//alert(window.event);//IE浏览器的事件对象 Object MSEventObj

var evnt = evt ? evt : window.event;//兼容事件对象获取
this.style.backgroundColor = "green";
}
var dv = document.getElementsByTagName('div')[0];
dv.addEventListener('click',clk);

6、获得鼠标坐标

//形参evt 代表事件对象
function clk(evt){
var evnt = evt ? evt : window.event;
console.log(evnt.clientX+"--"+evnt.clientY); //鼠标相对dom的坐标
console.log(evnt.pageX+"--"+evnt.pageY); //鼠标相对dom的坐标，给考虑滚动条
console.log(evnt.screenX+"--"+evnt.screenY); //鼠标相对整个屏幕的坐标，
}
var dv = document.getElementsByTagName('div')[0];
dv.addEventListener('click',clk);

7、BOM-location对象使用

<h2>location对象</h2>
 <input type="button" value="获取地址" onclick="f1()" />
 <input type="button" value="设置地址" onclick="f2()" />

    function f1(){
            console.log(window.location.href);//file:///E:/web/0105/24-BOM-location%E5%AF%B9%E8%B1%A1%E4%BD%BF%E7%94%A8.html
        }
  function f2(){
     alert('操作成功！');
            //window.location.href = "24.php";
     window.location.href = window.location.href; //刷新页面
        }