事件的相关用法

最新推荐文章于 2023-05-30 15:25:59 发布

duanyuehuan

最新推荐文章于 2023-05-30 15:25:59 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/weixin_44380707/article/details/89842407

版权

    <input type="button" value="按钮" id="btn">
     <script>
 
         var btn=document.getElementById("btn");
        //无法给同一个对象的同一个事件注册多个事件处理函数
         btn.onclick=function(){
             alert("hello");
             //移除事件
             btn.onclick=null;
           } 
        //addEventListener兼容性问题
        function btnclick() {
        alert('hello world');
        //移除事件
        btn.removeEventListener('click',btnclick);
        }
        btn.addEventListener('click',btnclick);
         btn.addEventListener('click',function(){
           alert('hello China');        
    
     </script>

 <body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        //addEventListener的第三个参数为false的时候，事件冒泡，
        //为true的时候：事件捕获；
    var box1=document.getElementById('box1');
    var box2=document.getElementById('box2');
    var box3=document.getElementById('box3');
    var array=[box1,box2,box3];
    for(var i=0;i<array.length;i++){
        array[i].addEventListener('click',function(){
            console.log(this.id)
        })
    }
    //事件的三个阶段 事件捕获 执行当前点击的元素  冒泡阶段
 
    </script>
 </body>
 <body>
     <ul id="ul">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
     </ul>
     <script>
         //事件委托
      var ul=document.getElementById('ul');
      ul.onclick=function(e){
             //e 事件参数（事件对象）：当事件发生的时   候，可以获取一些和事件相关的数据
             //获取到当前点击li
             //e.target
             e.target.style.backgroundColor='red';
      }
     </script>
 </body>
  e.target 获取真正出发事件的对象
  e.currentTarget 和this一样 获取事件处理函数所属的对象
  e.eventPhase 获取事件的阶段
  e.clientX   可视区域
  c.clientY
  e.pageX   页面位置
  e.pageY 
   //标准的DOM方法 取消冒泡
     e.stopPropagation();
 
     //取消默认行为执行
      return false；
     // dom 标准方法
      e.preventDefault();
 
   setTimeout的用法
  var  timeid;
  var btn1=document.getElementById('btn');
  btn1.onclick=function(){
  timeid=setTimeout(function(){console.log('baozhaole ');},3000);}
  var btn2=document.getElementById('btn2');
  btn2.onclick=function(){
  clearTimeout(timeid);}
   -