美文网首页
#hello，JS：10 -03常见和自定义事件使用

#hello，JS：10 -03常见和自定义事件使用

作者: 饥人谷_远方 | 来源:发表于2018-08-13 13:12 被阅读0次

    一、click—点击事件

    代码如下：

     $('#btn').addEventListener('click', function(){
    console.log('click')
    console.log(this)
  })

    二、dblclick—双击左键，监听左键

      $('#btn1').addEventListener('dblclick', function(){
    console.log('dblclick')
    console.log(this)
  })

    三、鼠标放上去触发事件

    1、mouse1

    • mouseover—当鼠标放上去时，则触发事件
    • mouseoutr—当鼠标跨到另一领域时，则与mouseover同时触发事件
      代码如下 ：
     //当鼠标放上去时，则触发事件
  $('.ct').addEventListener('mouseover', function(){
      console.log('mouseover')
      console.log(this)
      //this.style.borderColor = 'blue'
      this.classList.add('hover')
    })

//鼠标移出的时（不管是移出孩子还是父亲），则会触发事件，且每次只触发一次：
  $('.ct').addEventListener('mouseout', function(){
     console.log('mouseout...')
     //this.style.borderColor = 'red'
     this.classList.remove('hover')
  })

    移动的情况一：

    image
    从外—老子内框——儿子框—退回老子框——外，控制台打印结果为： 
    //外—老子内框
mouseover
 <div class="ct hover" style="font-size: 20px">…</div>
//老子内框——儿子框
mouseout...
mouseover
<div class="ct hover" style="font-size:20px">…</div>
//儿子框—退回老子框
mouseout...
mouseover
<div class="ct hover" style="font-size: 20px">…</div>
//退回老子框——外
mouseout...

    移动的情况二：

    image
    从外—老子内框—儿子框—外，控制台打印结果为： 
    //外—老子内框
mouseover
<div class=​"ct hover" style=​"font-size:​ 20px">​…​</div>​
//老子内框—儿子框
mouseout...
mouseover
<div class=​"ct hover" style=​"font-size:​ 20px">​…​</div>​
//儿子框—外
mouseout...

    在控制台测试之后，老子内框—儿子框，每次穿过子元素都会触发该事件，就会相对应地出现mouseout...和mouseover

    mouseout...
mouseover
<div class=​"ct hover" style=​"font-size:​ 20px">​…​</div>​

    2、mouse2

    mouseenter—只要在该事件的范围内，则只触发一次
    mouseleave—只要离开这个事件，则触发该事件
    代码如下:

    //鼠标进去
  $('.ct1').addEventListener('mouseenter', function(){
    console.log('mouseenter...')
    //this.style.borderColor = 'blue'
    this.classList.add('hover')
  })
 
//鼠标离开 
  $('.ct1').addEventListener('mouseleave', function(){
    console.log('mouseleave...')
    //this.style.borderColor = 'blue'
    this.classList.remove('hover')
  })

    图：


    image

    四、input输入表单

    1、焦点问题

    • focus—获取焦点状态
    • blur —失去焦点状态
      代码如下：
     //focus，获取焦点的一个状态：点击之后出现focus，focus为被激活状态，用户可以去输入内容
$('#input-name').addEventListener('focus', function(){
     console.log('focus...')
     console.log(this.value)
   })

 //blur，失去焦点状态：当鼠标移出输入框再点击页面任意处，则输入框是无法输入任何东西    
$('#input-name').addEventListener('blur', function(){
     console.log('blur...')
     console.log(this.value)
   })

    图：


    image

    用于校验：当用户输入完对应内容后，当tab切换了下一个输入框（或做了其他的事情），就会失去焦点，也就blur

    2、keyup 输入后按下确定键，再松开

    代码如下：

    //keyup，输入内容按下，再松开
$('#input-name').addEventListener('keyup', function(e){
     console.log('keyup...')
     console.log(this.value)
     console.log(e)
     this.value = this.value.toUpperCase()
   })

    图：


    image

    3、change 当输入框里的值改变，并失去焦点，则会触发change事件

    代码如下：

     $('#input-name').addEventListener('change', function(e){
     console.log('change...')
     console.log(this.value)
     console.log(e)
     this.value = this.value.toUpperCase()
  //当监听到change事件时，则执行这一行，this.value则能获取当前表单设置的值，toUpperCase则变为大写，重新设置这个值
   })

    图：


    image

    五、submit —表单按钮提交触发submit事件

    即form表单事件。form表单，有一个按钮需要提交，此时用JS触发submit即直接使用form.submit，此时则会触发submit事件，此时form则会监听到
    代码如下：

     $('#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...');
    } 
  })

    六、window事件

    1、scroll —滚动事件。当你滚动的时，会触发scroll 事件（会触发多次）

    代码如下：

     window.addEventListener('scroll', function(e){
    console.log('scroll..')
  })

    2、resize —窗口变化事件。当窗口发生变化时，会触发resize 事件（会触发多次）

    代码如下：

    window.addEventListener('resize', function(e){
    console.log('resize..')
  })

    图：


    image

    七、load/onload事件

    1、在window上

    代码如下：

     //当页面所有资源加载完成，则触发(涉及到所有资源，所以触发时机较晚）
  window.onload = function(){
    console.log('window loaded')
  }

    2、在document上

    代码如下：

      //DOM 结构解析完成（并不是页面上资源加载完成，而是dom结构渲染完成）
 document.addEventListener('DOMContentLoaded', function(){
    console.log('DOMContentLoaded ')
  })

    （浏览器渲染步骤其一）dom结构渲染完成，即并不是页面上资源加载完成，而是dom结构渲染完成。html被解析之后渲染成dom，用JS可以获取这个dom对象（不一定能看到效果，或者所引入的css或者图片等资源都不一定加载完成）

    虽然可以用JS操作其元素，但在某些场景下dom元素仍不存在，这里涉及到浏览器的渲染加载机制（可回顾旧知识：），如：
    图：


    image

    得出的结果为null，是因为这里的js不是一个外链，会直接就去解析js并执行，后续的dom结构并没有渲染出来。

    那么，如果我们把js放在body后面，则会输出一些结果：

    image
    但如果还是需要将js放在head里，那么就需要：
    链接：http://js.jirengu.com/lajad/1/edit?html,output 
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <script>
     document.addEventListener('DOMContentLoaded',function(){
     var btn = document.querySelector('#btn')
    console.log(btn)     
     })
   </script>
</head>
<body>
     <div id="btn"></div>
</body>
</html>

    控制台打印输出：

    image
    总结： 实践可知，可知为何使用document的onload事件，而不是用window上的onload事件。window上的onload必须要求所有页面资源加载完成，只是通过一个变量实现js操作，仍要按顺序去执行；而document则只需dom结构渲染完成，绑定DOMContentLoaded就可以执行onload事件，灵活方便。

    onload的图片加载实践

    用到onload的两类事件：


    image

    代码如下：

      console.log($('img').width) //0
    $('img').onload = function(){  //211：通过这一步，输出图片宽度211
        console.log(this.width)   //window.loaded网络请求到达，加载，图片到达，触发，此时才能获取图片的真实大小
    }

    0：图片宽度为0，是因为js立刻执行，但执行过程中有网络请求（有时间限制），网络请求还没到（即资源图片等还没来），图片暂时获取的是img标签，那么此时图片宽度为0

    DOMContentLoaded：此时，通过DOMContentLoaded绑定事件，dom结构渲染完成，触发了DOMContentLoaded事件，输出：DOMContentLoaded

    八、自定义事件

    监听click事件，当用户监听的时候，就会有响应

    var EventCenter = {
  on: function(type, handler){
    document.addEventListener(type, handler)
  },
  fire: function(type, data){
    return document.dispatchEvent(new CustomEvent(type, {
      detail: data
    }))
  }
}

//绑定的事件
EventCenter.on('hello', function(e){
  console.log(e.detail)
})
//用户所执行的交互行为
EventCenter.fire('hello', '你好')

    实现对象分析：
    对象EventCenter中有两个函数，对应的有两个属性：on、fire

    事件方法分析：
    EventCenter.on，一个对象里有一个on方法，当EventCenter听到'hello'事件时，去执行function(e)这个事件监听函数，通过e.detail获取该事件的内容。此为绑定的事件概述

    绑定好之后，在某些场景下，用户执行EventCenter.fire('hello', '你好')，则会执行事件'hello'，后面加一些内容，如'你好'。与之对应的则是刚才的e.detail内容。

    实践： 如做轮播和对应内容，可把它们作为两个不同的个体，只需要通过绑定一个下一步事件，和具体内容，便可指定对应内容该做的“下一步”的工作何时加载、触发、执行

    例如： 链接：http://js.jirengu.com/vovig/1/edit?html,js,output

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <div class="box box1">
      <input type="text">
    </div>
    <div class="box box2"></div>
</body>
</html>

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)
}//发送一个事件：'box1input'，用户输入的值：this.value
//作用就是告诉别人我有这样一个绑定事件的消息


//组件二的一个功能点：
EventCenter.on('box1input',function(e){
  document.querySelector('.box2').innerText = e.detail
})
//函数表示：当EventCenter听到box1input这个事件的时候，则内部发生一些改变。

//组件一中的消息是通过EventCenter作为媒介传递两个组件检的结绑

    相关文章

      网友评论

          本文标题：#hello，JS：10 -03常见和自定义事件使用

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|#hello，JS：10 -03常见和自定义事件使用|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！