JS常见事件，自定义事件
2017-09-16 本文已影响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>
<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>
