事件绑定一个吻函数，当这个事件发生时才会触发这个函数调用
事件类型，事件驱动，事件流，事件对象
注意：<input type=”text” οnclick=”函数名称()” />
itnode.onclick = 函数名称; 函数名称后边不要加括号
三．事件操作
1.什么是事件
通过鼠标、键盘对浏览器页面所做的动作就是事件。
事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任
onclick：鼠标点击
onmouseover：鼠标移入
onmouseout：鼠标移出
onkeyup：键盘按下并抬起
onkeydown：键盘按下
onchange：内容改变
onblur：失去焦点
onfocus：获得焦点
onsubmit：表单提交
2. 设置事件
2.1 dom1级方式设置
①<input type=”text” οnclick=”函数名称()” />
function 函数名称(){this[window]}
②<input type=”text” οnclick=”过程代码this[itnode]” />
③itnode.onclick = function(){this[itnode]} 匿名函数
④itnode.onclick =函数名称; 函数名称后边不要加括号 有名函数
function 函数名称(){this[itnode]}
取消dom1级事件：
itnode.onclick = null;
以上是dom1级事件设置的4种具体表现形式，this关键字除了第①种其代表window对象，其他三种都代表事件节点对象本身。
2.2 dom2级方式事件设置
1) 主流浏览器方式(包括IE9以上 版本浏览器)：
itnode.addEventListener(事件类型，事件处理[，事件流]); //设置
itnode.removeEventListener(事件类型，事件处理[，事件流]); //取消
2) IE浏览器方式(IE6/7/8)：
itnode.attachEvent(事件类型，事件处理); //设置
itnode.detachEvent(事件类型，事件处理); //取消
事件类型：就是我们可以设置的具体事件，例如onclick/onmouseover等
主流浏览器方式没有”on标志”，例如addEventListener(‘click’，...);
IE浏览器方式有”on”标志，例如attachEvent(‘onclick’)
事件处理：事件驱动，可以是一个有名/匿名 函数
例如addEventListener(‘click’,function(){}/有名函数);
事件流：true捕捉型、[false冒泡型]
事件取消(removeEventListener/detachEvent)操作具体要求：
① 事件处理 必须是有名函数，不可以是匿名函数。
② 事件取消的参数与绑定的参数完全一致(数量/内容)
dom2级事件设置的特点：
① 可以为同一个对象设置多个同类型事件。
② 事件取消也非常灵活。
③ 对事件流也有很好的处理控制。
dom2级事件简单设置：
可以为同一个对象绑定多个同类型事件：
通过有名函数设置事件：
事件取消操作：
3. 事件流
多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”
事件流分为两种类型：
冒泡型：事件从内部往外部依次执行。
捕捉型：事件从外部往内部依次执行。
//addEventListener(类型，处理，事件流true捕捉/[false冒泡]);
IE浏览器从开始到后期事件流始终是“冒泡型”的，直到IE9以后版本两种都开始支持。
网景的Navigator浏览器(现在火狐浏览器的许多血统来源于navigator浏览器)一开始的事件流是”捕捉型”。后期事件流有改进，针对捕捉型、冒泡型都可以支持。
对事件流类型的控制：
4. 事件对象
事件对象，每个事件(包括鼠标、键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息、通过事件对象也可以感知什么键子被 触发执行、通过事件对象还可以阻止事件流产生、阻止浏览器默认动作。
4.1 获得事件对象
获得：
①主流浏览器(IE9以上版本浏览器)：
事件处理函数的第一个形参就是 事件对象
例如：
node.onclick = function(evt){evt就是事件对象}
addEventListener(类型,function(evt){}/函数名字);
function 函数名称(evt){}
红色的evt就是事件对象
② IE(6/7/8)浏览器
node.onclick = function(){window.event事件对象}
全局变量event就是事件对象
全局变量直接上级对象是window。可以通过window访问全局变量信息。
window.document.getElementById()
获取事件对象：
4.2 事件对象作用 1)获得鼠标的坐标信息
event.clientX/clientY; //相对dom区域坐标
event.pageX/pageY; //相对dom区域坐标，给考虑滚动条距离
event.screenX/screenY; //相对电脑屏幕坐标
2) 阻止事件流：
event.stopPropagation(); //主流浏览器
window.event.cancelBubble = true; // IE(678)浏览器
冒泡型、捕捉型都可以进行阻止,为了阻止比较有意义，只考虑冒泡型即可。
阻止冒泡型的才有意义
3) 感知被触发键盘键子信息
event.keyCode 获得键盘对应的键值码信息
通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。
4) 阻止浏览器默认动作
浏览器默认动作，注册form表单页面，提交表单的时候，浏览器的页面会根据action属性值进行跳转，这个动作称为“浏览器默认动作”。
form表单提交的时候，需要对各个表单域进行验证，如果验证失败则禁止浏览器跳转。
event.preventDefault();//主流浏览器(dom1和dom2级事件都起作用)
event.returnValue = false; //IE(678)浏览器
return false; //dom1级事件设置起作用
5.加载事件onload
什么是加载事件：
js代码执行时候，需要html&css的支持，就让html代码先执行(先进入内存)，js代码后执行
js代码在最后执行的过程就是“加载过程”，通常通过“加载事件”实现加载过程
加载事件onload可以保证js代码后于html&css执行，其要在最后执行。
具体设置：
<body οnlοad=”加载函数()”>
window.onload = 匿名/有名 函数; //推荐
四．BOM
DOM：document object model(文档对象模型)
BOM:browser object model(浏览器对象模型)
通过BOM技术可以模拟浏览器对页面进行各种操作：创建子级标签页面、操作历史记录页面、操作地址栏等等
获取和设置浏览器地址栏信息：
通过setInterval和clearInterval实现时钟显示和停止效果：
总结：
1. dom2级事件操作
元素节点.addEventListener(类型，处理，事件流);设置事件
元素节点.removeEventListener(类型，处理，事件流);取消事件
dom2级事件特点：
① 同一个对象可以设置多个同类型事件
② 事件取消非常灵活
③ 可以操作事件流
2. 事件流操作
多个彼此嵌套的元素，它们同类型事件按照顺序依次执行的过程就是“事件流”
类型：冒泡型、捕捉型
3. 事件对象
1) 获取事件对象
主流浏览器：事件处理函数的第一个形参
2) 事件对象作用
① 获得鼠标坐标
② 获得被触发键子信息
③ 阻止事件流产生(冒泡)
④ 阻止浏览器默认动作
4. 加载事件
该事件可以保证js代码在最后执行，先执行html和css代码
window.onload = (有名/匿名)函数;
<body onload = 函数()>
5. BOM浏览器对象模型
location.href 获取地址栏信息、修改地址信息进行页面跳转
作业：
1. 利用dom技术实现无序列表(ul/li)制作,至少4个li的项目，最后在body里边显示出来
2. 在1作业的基础上，给每个li设置mouseover和mouseout事件，控制li的背景颜色(设置/取消)，达到鼠标当前行高亮显示的效果
扫一扫
3856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
