事件:event:浏览器自动触发的或用户手动触发的页面状态的改变
事件处理函数: 当事件发生时自动调用的函数
当希望在事件发生时,自动调用一个函数,都要在事件发生前,将函数绑定到事件属性上
如何绑定: 3种:
1、在html中绑定: <ANY on事件名="js语句"
比如: <button onclick="fun()"
问题: 不符合内容与行为分离的原则,不便于维护!
解决: 在js中动态绑定事件
2、为事件属性赋值一个函数:
ANY.on事件名=fun;
强调: 1、fun后不要加(),因为是回调的一种
2、fun中的this->ANY 事件绑定到的.前的元素对象
问题: 一个事件只能绑定一个处理函数,且不能被remove移除
解决: 用addEventListener
3、addEventListener
ANY.addEventListener("事件名",fun,captrue)
ANY.removeEventListener("事件名",fun)
事件模型: Event模型指的是浏览器如何处理发生的事件
DOM: 3个阶段:
1、捕获: 由外向内,记录各级父元素上绑定的相同事件
addEventListener("事件",fn,capture)
capture: 是否在捕获阶段提前触发,默认false
2、目标触发: 首选触发目标元素上的事件处理函数
目标元素: 实际触发事件的元素
3、冒泡: 按照捕获顺序的反向,由内向外,依次触发各级父元素绑定的事件处理函数
IE8: 2个阶段: 没有捕获
attachEvent("on事件名",fn);
事件对象: 当事件发生时,自动创建的,封装所有事件信息的对象
何时: 只要希望操控事件或获得事件相关数据都要用事件对象
DOM: 事件对象默认作为事件处理函数的第一个参数传入
function 处理函数(e){
... e//在事件发生时自动获得事件对象 ...
}
IE8: 在全局window,定义了一个event
function 处理函数(){
window.event
}
兼容: function 处理函数(e){
e=e||window.event;
}
操作: 取消冒泡: 停止蔓延
DOM: e.stopPropagation();
IE8: e.cancelBubble=true;
兼容: if(e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble=true;
利用冒泡:
优化: 尽量少的添加事件监听
为什么: 浏览器在事件发生时,会遍历所有注册的事件监听,监听越多,遍历就越慢,网页响应速度就越慢
解决: 如果多个子元素绑定相同的事件时,只需在父元素集中绑定一次,所有子元素共用即可
难题:
1、如何获得目标元素
this->随冒泡向父元素移动
解决: e.target 始终保存目标元素,不随冒泡改变
2、如何鉴别目标元素是否想要的
解决: 在执行正式操作前,判断目标元素的特征
取消事件: 阻止默认行为
何时: 当事件发生后,不希望事件再执行浏览器默认行为时
如何: e.preventDefault();
典型应用:
1.当用a标记作为按钮使用,避免url结尾添加锚点地址,要取消默认行为
2.在表单的onsubmit事件中,进行最后一次验证,如果未通过,就取消默认提交
3.H5做拖拽效果时,都要取消默认
<body>
<a href="http://www.baidu.com" id="link">百度</a>
<script>
var link = document.getElementById("link");
link.addEventListener("click", fn, false);
function fn(e) {
e.preventDefault();
//若用return false; 不起作用
//若用link.onclick = function();return false可以阻止
}
</script>
</body>
事件坐标: 事件发生时,鼠标的位置
e.screenX|e.screenY:鼠标指针相对于屏幕左上角的位置
e.x|e.y:
e.clientX|e.clientY:
e.pageX|e.pageY:鼠标指针相对于文档左上角的位置
e.layerX|e.layerY:
e.offsetX|e.offsetY:鼠标指针在当前事件元素内的位置
页面滚动事件: document.body.onscroll
获得页面滚动过的高度:
1、document.body.scrollTop
2、document.documentElement.scrollTop
强调: onscroll中的this指向window!
键盘事件:
方法
keydown 按下时
keypress 按下
keyup 抬起时
属性
keyCode 键盘码,只有数字和字母对应ASCII码
charCode 对应ASCII码,只有在keypress中才生效(IE9+)
<body>
<input type="text">
<input type="text">
<input id="t1" type="text">
<input type="text">
<input type="text">
<input type="text">
<inputtype="text">
<input type="text">
<input type="text">
<input type="text">
<script>
var inputs = document.body.getElementsByTagName("input");
for(var i = 0, length = inputs.length; i < length ; i++) {
var input = inputs[i];
//回车键的keyCode是13
if(input.type === "text") {
//按下回车,让下一个文本框获得焦点
input.onkeydown = function (e) {
if(e.keyCode === 13) {
//focus() 他触发了onfocus事件
this.nextElementSibling.focus();
}
}
}
}
</script>
</body>