事件
2017-09-14 本文已影响0人
流着万条永远的河
什么时候改变DOM结构？用JS操作的时机是何时？事件！任何的变化，改变、、、
- 鼠标点击
- 触发按键
- 图片已加载
- 网页已加载、、、
事件流
事件的产生和传播：
- 事件的捕获：
点击div,事件触发：从手机屏幕开始，最外层的document最先听到；然后往内依次传递，，，html,body,最后div。 - 事件冒泡：
点击div,div先听到，事件想向上传播，然后body,html,document。
事件为什么要传播？
因为，传播就是用的嵌套，用的元素间的父子关系，可以区分各个元素。所以事件针对的对象必须要明确啊，如何确定事件的对象，就要传播起来，一层一层地确定对象。否则，事件都在一个平面上作用，不知道是哪个元素了。
- 标准事件流
就是先捕获，再冒泡，结合起来。
事件使用方式
事件处理程序就是事件侦听器。
- HTML内联方式
<input type="button" value="Click Here" onclick="alert('Clicked!');"/>
老写法不推荐
<input id="btnClick" type="button" value="Click Here"/>
<script>
var btnClick = document.querySelector('#btnClick')
btnClick.onclick = function showMessage(){
alert(this.id)
}
</script>
//this代表的是当前的元素btnClick。原始的写法。
绑定执行是同步的，绑定对应的元素；事件触发执行后续是异步的，放到任务队列里的。
绑定多个事件会不会覆盖？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="btn">click me</button>
<script>
var btn = document.querySelector('#btn')
btn.onclick= function(){
console.log(this)
console.log(this.innerText)
}
</script>
</body>
</html>
//运行得到：
<button id="btn">click me</button>
click me
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="btn">click me</button>
<script>
var btn = document.querySelector('#btn')
btn.onclick= function(){
console.log(this)
console.log(this.innerText)
}
btn.onclick= function(){
console.log('hello')
} //会不会覆盖？
</script>
</body>
</html> //hello，会，就是赋值，肯定覆盖。
DOM2事件处理
- 1 addEventListener
- 2 removeEventListener
后面有三个参数—— - 事件类型
- 处理方法
- 布尔值，true是在捕获阶段处理， false是在冒泡阶段。
<input id="btnClick" type="button" value="Click Here"/>
<script>
var btnClick = document.querySelector('#btnClick')
btnClick.addEventListerner('onclick', function showMessage(){
alert(this.id)
} ,false)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="btn">click me</button>
<script>
var btn = document.querySelector('#btn')
btn.onclick= function(){
console.log(this)
console.log(this.innerText)
}
btn.onclick= function(){
console.log('hello')
}
btn.addEventListener('click',function(){
console.log('haha')
})
</script>
</body>
</html>
// hello
haha 不再覆盖了，这时候不是属性添加值了，而是成了一个函数了，
函数内部赋予什么无所谓，函数可以执行多次。
事件是click而不是onclick。
冒泡与捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.container,
.box,
.target{
padding:20px;
border:1px solid;
}
</style>
</head>
<body>
<button id="btn">click me</button>
<div class="container">
container
<div class="box">
box
<div class="target">
target
</div>
</div>
</div>
<script>
var container =document.querySelector('.container')
var box =document.querySelector('.box')
var target=document.querySelector('.target')
container.addEventListener('click',function(){
console.log('container clicking...')
})
box.addEventListener('click',function(){
console.log('box clicking...')
})
target.addEventListener('click',function(){
console.log('target clicking...')
})
</script>
</body>
</html>
//默认冒泡模型：
点击target:"target clicking..."
"box clicking..."
"container clicking..."
点击box:"box clicking..."
"container clicking..."
也就是让事件的发生很有针对性，可控性，这才是意义所在。到了哪个元素，那个元素就触发了。
把上述的改成捕获阶段，加上第三个参数true值：
"container clicking..."
"box clicking..."
"target clicking..." //根本就是传到哪，哪里执行，而传递顺序是可以操作的，事件作用对象也是可选的。
