- 事件，是文档或浏览器窗口中发生的一些特定的交互瞬间，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没有捕获阶段