美文网首页
JS常见事件,自定义事件

JS常见事件,自定义事件

作者: 流着万条永远的河 | 来源:发表于2017-09-16 19:05 被阅读0次
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
        <style>
      body{
        color: blue;
      }
      .ct,.ct1{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        background-color: yellow;
        margin: 20px;
      }
      .box,.box1{
        width: 50px;
        height: 50px;
        background-color: blue;
      }
      .ct.hover, .ct1.hover{
        border-color: blue;
        background-color: pink;
      }
    
      .box3{
        list-style: none;
        background: yellow;
        margin: 0;
        padding: 0;
      }
      .box3>li{
        background: pink;
        margin: 5px;
        padding: 10px;
      }
      .box3>li.hover{
        background-color: blue;
      }
      .msg{
        display: none;
      }
    
      </style>
    </head>
    <body>
    
      <button id="btn">点我</button>
      <button id="btn1">点我1</button>
      <div class="ct" style="font-size: 20px">
        <div class="box">hello</div>
      </div>    
    
      <div class="ct1">
        <div class="box1"></div>
      </div>  
      <input id="input-name" type="text">
    
    
      <form id="form" action="/upload">
        <input  id="username" name="username" type="text">
        <p class="msg"></p>
        <input id="btn-submit" type="submit" value="注册">
      </form>
    
        ![](https://img.haomeiwen.com/i6723749/655d95d06b80dba5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    
      <script>
    
      function $(selector){
        return document.querySelector(selector);
      }
    //方便书写而已
    
      $('#btn').addEventListener('click', function(){
        console.log('click')
        console.log(this)
      })                            //在控制台运行,得到:click和button对象
      $('#btn1').addEventListener('dblclick', function(){
        console.log('dblclick')
        console.log(this)
      })
    //dblclick就是事件双击,运行同理得到结果。
      $('.ct').addEventListener('mouseover', function(){
        console.log('mouseover')
        console.log(this)
        // this.style.borderColor = 'blue'
    
        this.classList.add('hover')
      })
    
    //mouseover鼠标放上去的时候,这个事件,类似于放上去就能翻译这种效果的。
    执行触发了事件后,这里的样式发生了改变,简单的就直接this.style.borderColor修改,复杂的样式就直接在this.classList.add个class比较好。
    
      $('.ct').addEventListener('mouseout', function(){
        console.log('mouseout...')
        // this.style.borderColor = 'red'
        this.classList.remove('hover')
      })
    
    //mouseout鼠标移出事件,然后执行方法,,,
    //有时候会有类似的bug出现,鼠标放上去,触发事件,执行一些动画方法,
    //于是元素动了,等到元素动到鼠标指不到了,事件不触发了,
    //动画又没了,又不动了,不动,鼠标又指向了然后又循环起来了,,,
    
      $('.ct1').addEventListener('mouseenter', function(){
        console.log('mouseenter...')
        //this.style.borderColor = 'blue'
        this.classList.add('hover')
      })
    //mouseenter运行貌似跟mouseover一样啊,再重新试验nouseover,mouseout下:
    父元素有子元素嵌套着,穿过这些嵌套时,只要区域发生变化,就out,进入新区域就over,也就是有孩子时,穿过孩子也要算out,然后新的over。
    而mouseenter和mouseleave就是指这个元素的区域,区域里多少孩子区域不管,所以这个比较实用。
    
      $('.ct1').addEventListener('mouseleave', function(){
        console.log('mouseleave...')
        //this.style.borderColor = 'blue'
        this.classList.remove('hover')
      })
    
    
    
       $('#input-name').addEventListener('focus', function(){
         console.log('focus...')
         console.log(this.value)
       })
    //focus用户激活的状态,获取焦点,选中可以操作,比如input,被选中,可以输入的时候。
    
       $('#input-name').addEventListener('blur', function(){
         console.log('blur...')
         console.log(this.value)
       })
    //blur对应focus,是失去焦点,没被选中,,,这时候可以做一些事情,比如判断是否输入格式正确。
    
       $('#input-name').addEventListener('keyup', function(e){
         console.log('keyup...')
         console.log(this.value)
         console.log(e)
       //  this.value = this.value.toUpperCase()
       })
    //keyup按下键盘,松开时才触发。keydown是按下就触发。
    
       $('#input-name').addEventListener('change', function(e){
         console.log('change...')
         console.log(this.value)
         console.log(e)
         this.value = this.value.toUpperCase()
       })
    
    //内容发生改变,并焦点移开,触发change。
    
      $('#form').addEventListener('submit', function(e){
        e.preventDefault();          //阻止默认事件提交
        if(/^\w{6,12}$/.test($('#username').value)){
          $('#form').submit();
        }else{
          $('#form .msg').innerText = '出错了'
          $('#form .msg').style.display = 'block'
          console.log(' no submit...');
        } 
      })
    //submit提交事件,可以form.submit这样写,也可addEventListener。
    //判断用户名输入是否正确,正确提交,不正确就出现报错的message,不提交。
    
      window.addEventListener('scroll', function(e){
        console.log('scroll..')
      })
    //scroll滚动事件,这里说一下,滚动一格,是好几次的事件触发,滚动好多格,事件触发很多,性能消耗,这时候可以用函数节流,以最后一次滚动为触发事件,否则取消scroll事件,不让侦听到,设置计时器300毫秒,这段时间有滚动就清零计时器,没有就是触发。
    
      window.addEventListener('resize', function(e){
        console.log('resize..')
      })      
      //resize是窗口变了的事件,窗口变化执行不像滚动变化频率高,也可以做函数节流。
    
    
      //页面所有资源加载完成
      window.onload = function(){
        console.log('window loaded')
      }
    //onload所有的内部外部的东西都准备好了,图片可以看了,时机很晚。
    
      //DOM 结构解析完成
      document.addEventListener('DOMContentLoaded', function(){
        console.log('DOMContentLoaded ')
      })
    
    //DOMContentLoaded就是DOM结构渲染完成,不一定看到效果,不一定css渲染完成,很早。这时候,如果在head里有script标签针对body的元素,就没有效果了,怎么办?
    //在JS文件内容外,用事件DOMContentLoaded包裹下,放到head里就可以了。
    
        console.log($('img').width)         //0,这时候执行,图片在网络请求和收取解析图片过程中,img只是一个空标签,所以是0。
        $('img').onload = function(){
            console.log(this.width)   //此时才能得到图片的真实大小,onload图片已经加载好了。
        }
    //最后window.loaded也就onload
    
      </script>
    
    </body>
    </html>
    

    还有很多事件不一一细说了,可以自己用到了,再拓展了。

    自定义事件

    我觉得,不是自定义的事件,比如click之类的,首先声明了这个click是个事件,然后,这个事件是如何触发的,也要声明,有了这两个,基本就简单了:一个套路走下去,先绑定事件,然后确定侦听事件的元素,最后,侦听元素侦听到事件后,要执行什么东东。嗯,我也算是理了下这个事件的小逻辑了哦。这算是奥义哦哦哦。
    我想模拟一个浏览器没有的事件哦哦,,,

    var EventCenter = {
      on: function(type, handler){
        document.addEventListener(type, handler)
      },               //有一个on的方法,声明(事件,处理方法)。
      fire: function(type, data){
        return document.dispatchEvent(new CustomEvent(type, {
          detail: data
        }))
      }
    }
    //声明一个对象EventCenter
    
    EventCenter.on('hello', function(e){
      console.log(e.detail)
    })        //EventCenter.on听到hello时,执行后面的方法,输出当前事件的内容。
    
    EventCenter.fire('hello', '你好')      //这里把事件hello触发传播出来了
    

    这里的意思我先说一下,自己理解的,可能有些野路子啊,刚开始声明了对象嘛,对象里内容on里用了addEventListener就明白了,它这部分是最终要听到事件也就是那个参数type值,然后要执行后面那个handler代指的方法啊。
    对象里的那个fire,就是专门为了声明事件并如何触发事件并传播到on那里而存在滴。其实查了资料,对document.dispatchEvent还是半懂不懂的,记住就是为了声明并触发参数type这个事件就行了,至于第二个参数,感觉不是钉死的,看自己的需求方法了,这里是'你好',正好也是事件的内容的赋值了,正好也是事件触发的输出结果了哦。
    document.dispatchEvent 是document触发并传播的哦,刚开始狭隘成fire了,其实fire只是一个代指而已。

    document.addEventListener 同理,是document侦听事件并执行的。
    element.dispatchEvent() 等同于完成触发并传播事件了。
    new CustomEvent(evt,对应数据) 可以声明一个事件。

    例子:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        .box{
          width:300px;
          height:100px;
          border:1px solid;
        }
      </style>
    </head>
    <body>
    <div class="box box1">
      <input type="text">
    </div>
      <div class="box box2"></div>
      <script>
      var EventCenter = {
      on: function(type, handler){
        document.addEventListener(type, handler)
      },
      fire: function(type, data){
        return document.dispatchEvent(new CustomEvent(type, {
          detail: data
        }))
      }
    }
    document.querySelector('.box input').oninput =
      function(){
      EventCenter.fire('box1input',this.value)
    }
    EventCenter.on('box1input',function(e){
      document.querySelector('.box2').innerText=e.detail
    })
      </script>
    </body>
    </html>
    
    效果如图:

    相关文章

      网友评论

          本文标题:JS常见事件,自定义事件

          本文链接:https://www.haomeiwen.com/subject/tyxusxtx.html