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

一、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
 
…
//老子内框——儿子框
mouseout...
mouseover
…
//儿子框—退回老子框
mouseout...
mouseover
…
//退回老子框——外
mouseout...

移动的情况二：

image

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

//外—老子内框
mouseover
​…​
​
//老子内框—儿子框
mouseout...
mouseover
​…​
​
//儿子框—外
mouseout...

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

mouseout...
mouseover
​…​
​

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

控制台打印输出：

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

  
  


    

      
    
    




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作为媒介传递两个组件检的结绑