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

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,207 | 阅读时长 ≈ 10

一、click—点击事件

代码如下：

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

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

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

三、鼠标放上去触发事件

1、mouse1

  • mouseover—当鼠标放上去时，则触发事件
  • mouseoutr—当鼠标跨到另一领域时，则与mouseover同时触发事件
    代码如下 ：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     //当鼠标放上去时，则触发事件
      $('.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')
      })

移动的情况一：

从外—老子内框——儿子框—退回老子框——外，控制台打印结果为：

1
2
3
4
5
6
7
8
9
10
11
12
13
//外—老子内框
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...

移动的情况二：

从外—老子内框—儿子框—外，控制台打印结果为：

1
2
3
4
5
6
7
8
9
//外—老子内框
mouseover
<div class="ct hover" style="font-size:20px">…</div>
//老子内框—儿子框
mouseout...
mouseover
<div class="ct hover" style="font-size:20px">…</div>
//儿子框—外
mouseout...

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

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

2、mouse2

  • mouseenter—只要在该事件的范围内，则只触发一次
  • mouseleave—只要离开这个事件，则触发该事件
    代码如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //鼠标进去
      $('.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')
      })

图：

四、input输入表单

1、焦点问题

  • focus—获取焦点状态
  • blur —失去焦点状态
    代码如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     /*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)
       })

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

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

代码如下：

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

图：

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

代码如下：

1
2
3
4
5
6
7
$('#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则变为大写，重新设置这个值
  })

图：

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

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

1
2
3
4
5
6
7
8
9
10
$('#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事件（会触发多次）

代码如下：

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

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

代码如下：

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

图：

七、load/onload事件

1、在window上

代码如下：

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

2、在document上

代码如下：

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

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

虽然可以用JS操作其元素，但在某些场景下dom元素仍不存在，这里涉及到浏览器的渲染加载机制（可回顾旧知识：），如：
图：
得出的结果为null，是因为这里的js不是一个外链，会直接就去解析js并执行，后续的dom结构并没有渲染出来。

那么，如果我们把js放在body后面，则会输出一些结果：
但如果还是需要将js放在head里，那么就需要：链接：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>

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

onload的图片加载实践
用到onload的两类事件：
代码如下：

1
2
3
4
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事件，当用户监听的时候，就会有响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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作为媒介传递两个组件检的解绑

-------------本文结束感谢您的阅读-------------