事件：就是用户在网页中的行为
分为三个部分：
标签触发行为，标签 - 事件源
触发的行为的类型 - 事件类型
执行的程序 - 函数
语法：事件源.on事件类型 - 函数
1、鼠标：
单击：click
双击：dbclick
移入：mouseover
移出：mouseout
2、键盘：
按下键盘：keydown
抬起键盘：keyup
3、表单事件：
获取焦点：focus
失去焦点：blur
下拉框选项改变：change
表单提交：submit
4、window
window.onload
window.onscroll
window.onresize
一、事件（后）
1、右键点击：contextmenu
2、鼠标按下：mousedown
3、鼠标抬起：mouseup
4、鼠标移动：mousemove
5、鼠标移入：mouseenter
6、鼠标移出：mouseleave
当父子两个盒子都有相同类型的事件，触发子标签的事件，就相当于会再次触发父标签的事件 - mouseover/mouseout
mouseenter/mouseleave触发子标签事件的时候，与父标签无关
注：使用移入移出事件的时候，mouseover对样mouseout，mouseenter对应mouseleave，不可混用
7、滚轮事件：mousewheel - 当滚动了滚轮就会执行的事件
8、按键盘：keypress
document.onkeypress = function() { console.log("按下了键盘") }
9、文本框内容发生改变的事件：input
二、事件流：事件从触发到执行结束的整个过程
分为三个阶段
1、捕获阶段：执行事件函数，就需要先找到事件源，找时间源的过程（由外而内，一层一层向里面找事件源的过程）
2、目标阶段：执行对应的事件函数
找到事件源，执行他的事件对应的函数
3、冒泡阶段
有进来的 过程就会有出去的过程 - 离开事件源，由内向外出去的过程
如果父标签/祖宗标签 跟自己有同类型的事件，当触发自己的事件后，在自己事件流的冒泡阶段会执行父标签/祖宗标签的事件
<body> <div class="big"> <div class="mid"> <div class="small"></div> </div> </div> </body> <script> var small = document.querySelector('.small') small.onclick = function() { console.log("小") } var mid = document.querySelector('.mid') mid.onclick = function() { console.log("中") } var big = document.querySelector('.big') big.onclick = function() { console.log("大") } </script>
三、事件的绑定方式
addEventListener()
语法：标签对象.addEventListener(事件类型,事件函数)
同类型事件能绑定多次
<body> <button>按钮</button> </body> <script> var btn = document.querySelector('button') btn.addEventListener('click',function() { console.log("第一次点击") }) btn.addEventListener('click',function() { console.log("第二次点击") }) </script>
在低版本的ie中，标签对象.attachEvent(on类型,函数)
<body> <button>按钮</button> </body> <script> var btn = document.querySelector('button') btn.attachEvent('onclick',function() { console.log("第一次点击") }) btn.attachEvent('onclick',function() { console.log("第二次点击") }) </script>
兼容的绑定方式：
<body> <button>按钮</button> </body> <script> var btn = document.querySelector('button') function bindEvent(ele,type,handler){ if(ele.addEventListener){ ele.addEventListener(type,handler) } else if(ele.attachEvent){ ele.attachEvent('on' + type,handler) } else { ele['on' + type] = handler } } bindEvent(btn,'click',function() { console.log("第一次点击") }) bindEvent(btn,'click',function() { console.log("第二次点击") }) </script>
四、元素大小
js提供了获取元素大小的属性，获取到的是数字，直接就可以计算
clientWidth、clientHeight不包含边框的大小
offsetWidth、offsetHeight包含边框的大小
五、元素位置
offsetLeft、offsetTop 获取到相对于设置郭定位的父元素或祖宗元素的位置
六、浏览器的大小：
clientWidth、clientHeight，获取到不包含滚动条的大小（滚动条17px）
1600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
