1.事件
通过鼠标、键盘对浏览器页面所做的动作就是事件.
事件一旦发生需要有时间处理,该处理称为'事件驱动',事件驱动通常由函数担任.
onclick: 鼠标点击 onmouseover: 鼠标移入 onmouseout: 鼠标移出
onkeyup: 键盘按下并抬起 onkeydown:键盘按下 onchange: 内容改变 onblur: 失去焦点
onfocus: 获得焦点 onsubmit: 表单提交
2. 设置事件
2.1 dom 1级方式设置
① <input type="text" onclick="函数名称()">
function 函数名称(){this[window]}
② <input type="text" onclick="过程代码 this[itnode]">
③ itnode.onclick = function(){this[itnode]}
④ itnode.onclick = 函数名称; function 函数名称(){this[itnode]}
取消dom 1级事件
itnode.onclick = null;
以上是dom1级事件设置的4种方式,this关键字除了第一种其代表window对象,其他三种都代表事件节点对象本身.
2.2 dom2级方式事件设置
1) 主流浏览器方式(包括IE9以上版本浏览器)
itnode.addEventListener(事件类型,事件处理[,事件流]); //设置
itnode.removeEventListener(事件类型,事件处理,[,事件流]); //取消
2) IE浏览器方式(IE6/7/8)
itnode.addachEvent(事件类型,事件处理); //设置
itnode.detachEvent(事件类型,事件处理); 取消
事件类型: 就是我们可以设置的具体事件.例如onclick等
主流浏览器方式没有on标志,例如addEventListener('click',...)
IE浏览器方式有'on'标志
事件处理: 事件驱动,可以是一个有名/匿名函数 例如 addEventListener('click',function(){}/有名函数)
事件取消操作具体要求:
1. 事件处取消必须是有名函数,不可以是匿名函数
2. 事件取消的参数与绑定参数完全一致
dom2级事件设置的特点
1. 可以为同一个对象设置多个同类型事件
2. 事件取消也非常灵活
3. 对事件流也有很好的处理
3. 事件流
多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被处罚后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为"事件流"
事件流分为两种类型:
冒泡型: 事件从内部网外部依次执行
捕捉型: 事件从外部往内部依次执行
IE9之后支持两种事件流,IE9之前只支持冒泡型
4. 事件对象
每个事件触发执行过程中,都有对应的事件对象,通过事件对象可以获得鼠标相对页面坐标信息,也可以感知什么键子被触发执行、通过事件对象还可以阻止事件流残生,阻止浏览器默认动作
4.1 获取事件对象
1. 主流浏览器 以及 IE9以上
事件处理函数的第一个形参就是事件对象
node.onclick=function(evt){evt就是事件对象}
addEventListener(类型,function(evt){}/函数名);evt就是事件对象
2.IE9以下
node.onclick=function(evt){window.event事件对象}
全局变量的直接上级就是window
4.2 事件对象作用
1) 获取鼠标的坐标信息
event.clientX/clientY //相对dom区域的坐标
event.pageX/PageY //相对dom区域的坐标,考虑滚动条的距离
event.screenX/screenY //相对屏幕坐标
2) 阻止事件流
event.stopPropagation() //主流浏览器
window.event.cancelBubble = true // IE9以下
为了阻止有意义,只考虑冒泡型
3)阻止浏览器默认动作
浏览器默认动作,注册form表单页面,提交表单的时候,浏览器的页面会根据action属性值进行跳转,这个动作成为"浏览器默认动作".
event.preventDefault() //主流浏览器
event.returnValue = false //IE9以下
return false //dom 1级事件设置起作用
4) 感知被触发键盘键子信息
event.keycode 获得键盘对应的键值码信息,通过事件触发时候获得的keyCode 数值码信息可以对应键盘的毽子信息.
5. 加载事件 onload
js代码执行的时候,需要html&css的支持,就让html代码限制性(先进入内存),js代码后执行
js代码在最好执行的过程就是"加载过程",通常通过"加载事件"实现加载过程
加载事件onload可以保证js代码后于html&css执行.
<body onload="加载函数()">
window.onload = 匿名/有名 函数: //推荐
网友评论