• 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、事件流

    1 <h2>事件流</h2>
    2 <div>
    3     <p>
    4         <span>
    5             i am span tag
    6         </span>
    7     </p>
    8 </div>
     1 var dv=document.getElementsByTagName('div)[0];
     2 var pp=document.getElementsByTagName('p')[0];
     3 var sp=document.getElementsByTagName('span')[0];
     4 //addEventListener(类型,处理,true捕捉/false冒泡);
     5 sp.addEventListerner('click',function(evt){
     6     console.log('span tag');
     7     evt.stopPropagation();//阻止事件流产生
     8     },false);
     9 pp.addEventListener("click",function(evt){
    10     console.log('p tag');
    11     evt.stopPropagation();//阻止事件流产生
    12 },false);
    13 dv.addEventListener("click",function(evt){
    14     console.log('div tag');
    15     evt.stopPropagation();//阻止事件流产生
    16 },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对象使用

    1 <h2>location对象</h2>
    2  <input type="button" value="获取地址" onclick="f1()" />
    3  <input type="button" value="设置地址" onclick="f2()" />
    1     function f1(){
    2             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
    3         }
    4   function f2(){
    5      alert('操作成功!');
    6             //window.location.href = "24.php";
    7      window.location.href = window.location.href; //刷新页面
    8         }
  • 相关阅读:
    【leetcode】1009. 十进制整数的反码
    【leetcode】1446. 连续字符
    __getattr__在python2.x与python3.x中的区别及其对属性截取与代理类的影响
    Python 中异常嵌套
    python 变量搜寻顺序法则LEGB之E注意事项
    %%的一个应用
    python中__str__与__repr__
    052-180
    052-177
    052-176
  • 原文地址:https://www.cnblogs.com/chenyang-1/p/8289748.html
Copyright © 2020-2023  润新知