- 事件，是文档或浏览器窗口中发生的一些特定的交互瞬间，JS与HTML之间的交互是通过事件实现的
对于web应用来说，有下面这些代表性事件：点击事件，鼠标移动，按下键盘等等
- 事件，是用户和浏览器之间的交互行为
我们可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码会执行
文档的加载：
浏览器在加载一个页面时，是按照自上而下的顺序加载的，
读取到一行就运行一行，在代码执行时，页面还没有加载
将js代码编写到页面的下面，确保页面加载完毕以后再执行js代码
window.onload 确保页面加载完成以后执行，可以保证代码执行时所有DOM对象已经加载完毕了
clientWidth／clientHeight：
- 可以获取元素的可见宽度和高度
- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
- 会获取元素宽度和高度，包括内容区和那边距
- 这些属性都是只读的，不能修改
事件对象：
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实參传递进响应函数
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下
<div id="areaDiv">
</div>
<br>
<br>
<div id="showMsg">
</div>
<script>
/**
* 当鼠标在areaDiv中移动时，在showMsg来显示鼠标的坐标
onmousemove
- 该事件将会在鼠标在元素中移动时被触发
*/
var area=document.getElementById('areaDiv')
var show=document.getElementById('showMsg')
if(!event){
event=window.event}//event=event||window.event
area.onmousemove=function(event){
/**
* clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标的垂直坐标,在ie8中不兼容
*/
show.innerHTML='x='+event.clientX+',Y='+event.clientY
}
</script>
⚠️：
在ie8中，响应函数被触发时，浏览器不会传递事件对象
在ie8及以下的浏览器中，是将事件对象作为window对象的属性保存的
事件冒泡：
所谓冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消
<div id="box1">
我是box1
<span id='s1'>我是span</span>
</div>
<script>
var s1=document.getElementById('s1');
var box1=document.getElementById('box1');
s1.onclick=function(event){
event=event||window.event
alert('s1 here')
event.cancelBubble=true
}
box1.onclick=function(){
event=event||window.event
alert('box1 here')
event.cancelBubble=true//取消冒泡
}
document.body.onclick=function(){
alert('body here')
}
</script>
事件的委派：
- 将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
<button id="btn">添加超链接</button>
<ul id="ul">
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
<script> var ul=document.getElementById('ul')
var btn=document.getElementById('btn')
btn.onclick=function(){
var li=document.createElement('li');
li.innerHTML="<a <li><a href='javascript:;' class='link'>超链接</a></li>"
ul.appendChild(li)
}
/**
*为每个超链接都绑定一个单击响应函数
这些操作只能为已经有的超链接设置事件，为新添加的超链接必须重新绑定
*/
/**
* var allA=document.getElementsByTagName('a');
for(var i=0;i<allA.length;i++){
allA[i].onclick=function(){
alert('我是a')
}
}
*/
/**
* 我们希望，只绑定一次事件，即可应用到所有元素上，即使元素是后添加的
我们可以尝试将其绑定给元素的共同祖先元素
*/
//为ul绑定一个单击响应函数
ul.onclick=function(event){
event=event||window.event
//如果触发事件的对象是我们期望的对象，则执行否则不执行
/**
target
*event的target表示触发事件的对象
*/
// alert(event.target)
if(event.target.className=='link')
{
alert('我是a')
}
}
事件的绑定：
<button id="btn">click</button> var btn=document.getElementById('btn') btn.addEventListener("click",function(){
alert(1)
},false)
btn.addEventListener("click",function(){
alert(2)
},false)
<button id="btn">click</button>
var btn=document.getElementById('btn')
btn.attachEvent("onclick",function(){
alert(1)
},false)
btn.attachEvent("onclick",function(){
alert(2)
},false)
定义一个函数，用来为指定元素绑定响应函数
参数：
obj 要绑定的对象
eventStr 事件的字符串（不要on）
callback 事件的回调函数
var btn=document.getElementById('btn')
function bind(obj,eventStr,callback){
if(obj.addEventListener){
//大部分兼容的方式
obj.addEventListener(eventStr,callback,false)
}
else{
/**
* this是谁，由调用方式决定
callback.call(obj)
*/
//ie8及以下
// obj.attachEvent("on"+eventStr,callback)//callback由浏览器调用，this对象指向浏览器，
//可以把上一句改成：
obj.attachEvent("on"+eventStr,function(){
callback.call(obj)//obj传入参数，代替this指向
})
}
}
bind(btn,"click",function(){
alert('hello')
})
事件的传播：
- 关于事件的传播有两种说法：
1.事件是从内往外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就是说事件应该再冒泡阶段执行
2.事件是由外向内传播，也就是先是当前元素的最外层祖先元素触发，然后在向内传递给后代元素
w3c综合了两种说法，将事件分成了3个阶段：
- 捕获阶段
在捕获阶段是从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
- 目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
- 冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
⚠️：
- 如果希望在捕获阶段就触发事件，可以将addEventListener（）的第三个参数设置为true（一般不会有人这么做
- ie8没有捕获阶段