- 事件，是文档或浏览器窗口中发生的一些特定的交互瞬间，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>JS中的事件(对象，冒泡，委托，绑定)
原文地址：https://www.cnblogs.com/yuan233/p/10381317.html