JavaScript事件模型
2015-10-10 17:18
507 查看
本章学习目标:
--事件模型介绍
--事件流
--事件处理程序
--事件处理程序的返回值
--event对象
--事件类型
事件的顺序即事件流。
不同的浏览器有不同实现事件流的方法。
事件冒泡(IE)。
事件捕获(NetsCape)。
DOM事件流(FireFox)。
事件冒泡:
事件捕获:
DOM事件流
事件处理程序
传统事件处理程序指派方法
–被广泛支持
现代事件处理程序指派方法。
–只被现代浏览器支持。
–浏览器之间存在不兼容的问题。
传统事件处理程序指派方法。
一、取得id = div1的元素节点。
var div1 = document.getElementById("div1");
//设置元素节点的onclick属性
div1.onclick = function(){alert("div1 被点了");}
或
function divClick(){alert(‘点中’);}
div1.onclick=divClick;
注意:
1、绑定事件处理程序时,后面不能加括号
2.必须确保在元素之后设置事件处理程序。
3.可在window.onload中指定处理程序。
二、在事件属性中指定
<div id="div1" onclick="alert("div1 被点了.");" ></div>
现代事件处理程序指派方法。
一、IE浏览器
var div1 = document.getElementById("div1");
//添加事件处理程序
div1.attachEvent("onclick",click1);//("事件处理程序的名称",函数)
//删除事件处理程序
div1.detachEvent("onclick",click1);
function click1(){
alert("div1 is click...");
}
提示:可以在一个事件上添加多个事件处理函数。
二、DOM
var div1 = document.getElementById("div1");
//添加事件处理程序,true:捕获阶段; false:冒泡阶段
div1.addEventListener("click",click1,false);//("事件名称",函数,冒泡或捕获阶段)
//删除事件处理程序
div1.removeEventListener("click",click1,false);
function click1(){
alert("div1 is click...");
}
提示:删除事件处理程序时,阶段要相同。
传统事件处理程序是在冒泡阶段添加的。
兼容性问题的解决
事件处理程序的返回值
利用事件处理程序的返回值,可以影响事件的默认行为。
–submit按钮默认行为是提交表单。
–超链接的默认行为是向指定资源发起请求。
-reset按钮默认行为是重置。。
-click单选按钮或复选框点击设置。
-keydown用户按下按钮。
-mousedown鼠标按下。
......
表单验证例子...
超链接例子。
<a href="a.html" onclick="return confirm('要跳转吗?')">a.html</a>
注意:是根据返回结果是true或false来确定是否执行默认行为。
event对象
事件发生时产生的对象。
封装了跟事件相关的信息。
–鼠标信息
–键盘信息
IE和DOM具有不同的实现方式
div1.onclick = function(){
var e = window.event;
}
DOM得到事件对象
div1.onclick = function(ev){
var e = ev;
}
兼容性问题:
div1.onclick = function(ev){
var e = windo.event||ev;
}
event属性和方法
Dom和IE的event相同点。
–获取事件类型:e.type
–获取键盘码:keydown/keyup
–检测是否按下e.shiftKey,e.altKey,e.ctrlKey
–获取客户坐标:e.clientX,e.clientY
–获取屏幕坐标:e.screenX,e.screenY
Dom和IE的event不相同点。
IE DOM
获取事件源对象:
div1.onclick = function(e){
var ev = window.event||e;//获取事件对象
}
事件类型:
鼠标事件
常见事件
–click 点击
–dbclick 双击
–mousedown 鼠标按下时
–mouseout 当光标在一个元素上,并且用户将其移出元素边界时
–mouseover 鼠标移入时
–mouseup 释放鼠标按钮时
–mousemove 当光标在你一个元素上时 重复发生
页面上所有元素均支持鼠标事件。
键盘事件
常见事件
–keydown 当用户在键盘上按下一个键时发生,如果用户按键不放,就会重复发生
–keypress 当用户在键盘上按下一个字符键(不包括shift和Alt键等)时发生,如果用户按键不放,也会重复发生
–keyup 当用户释放一个键时发生
通常在输入框上实现键盘事件。
返回false表示不响应该事件
事件发生顺序
–字符键:keydown,keypress,keyup
–非字符键:keydown,keyup
HTML事件
常见事件
–load,unload
–select
–change 失去焦点并且值被改变
–submit
–reset
–resize 窗口或框架尺寸调整
–scroll 有滚动条时
–focus 获得焦点
–blur 失去焦点
--事件模型介绍
--事件流
--事件处理程序
--事件处理程序的返回值
--event对象
--事件类型
事件的顺序即事件流。
不同的浏览器有不同实现事件流的方法。
事件冒泡(IE)。
事件捕获(NetsCape)。
DOM事件流(FireFox)。
事件冒泡:
事件捕获:
DOM事件流
事件处理程序
传统事件处理程序指派方法
–被广泛支持
现代事件处理程序指派方法。
–只被现代浏览器支持。
–浏览器之间存在不兼容的问题。
传统事件处理程序指派方法。
一、取得id = div1的元素节点。
var div1 = document.getElementById("div1");
//设置元素节点的onclick属性
div1.onclick = function(){alert("div1 被点了");}
或
function divClick(){alert(‘点中’);}
div1.onclick=divClick;
注意:
1、绑定事件处理程序时,后面不能加括号
2.必须确保在元素之后设置事件处理程序。
3.可在window.onload中指定处理程序。
二、在事件属性中指定
<div id="div1" onclick="alert("div1 被点了.");" ></div>
现代事件处理程序指派方法。
一、IE浏览器
var div1 = document.getElementById("div1");
//添加事件处理程序
div1.attachEvent("onclick",click1);//("事件处理程序的名称",函数)
//删除事件处理程序
div1.detachEvent("onclick",click1);
function click1(){
alert("div1 is click...");
}
提示:可以在一个事件上添加多个事件处理函数。
二、DOM
var div1 = document.getElementById("div1");
//添加事件处理程序,true:捕获阶段; false:冒泡阶段
div1.addEventListener("click",click1,false);//("事件名称",函数,冒泡或捕获阶段)
//删除事件处理程序
div1.removeEventListener("click",click1,false);
function click1(){
alert("div1 is click...");
}
提示:删除事件处理程序时,阶段要相同。
传统事件处理程序是在冒泡阶段添加的。
兼容性问题的解决
function myaddEvent(obj,event,fn){//对象 ,事件,函数, if(document.all){ obj.attachEvent('on'+event,fn); }else{ obj.addEventListener(event,fn);//第三个参数默认为false(冒泡) } }
事件处理程序的返回值
利用事件处理程序的返回值,可以影响事件的默认行为。
–submit按钮默认行为是提交表单。
–超链接的默认行为是向指定资源发起请求。
-reset按钮默认行为是重置。。
-click单选按钮或复选框点击设置。
-keydown用户按下按钮。
-mousedown鼠标按下。
......
表单验证例子...
超链接例子。
<a href="a.html" onclick="return confirm('要跳转吗?')">a.html</a>
注意:是根据返回结果是true或false来确定是否执行默认行为。
event对象
事件发生时产生的对象。
封装了跟事件相关的信息。
–鼠标信息
–键盘信息
IE和DOM具有不同的实现方式
IE 得到事件对象;
div1.onclick = function(){
var e = window.event;
}
DOM得到事件对象
div1.onclick = function(ev){
var e = ev;
}
兼容性问题:
div1.onclick = function(ev){
var e = windo.event||ev;
}
event属性和方法
Dom和IE的event相同点。
–获取事件类型:e.type
–获取键盘码:keydown/keyup
–检测是否按下e.shiftKey,e.altKey,e.ctrlKey
–获取客户坐标:e.clientX,e.clientY
–获取屏幕坐标:e.screenX,e.screenY
Dom和IE的event不相同点。
IE DOM
获取事件源 | e.srcElement | e.target |
获取字符码 | e.keyCode | e.charCode |
阻止默认行为 | e.returnValue=false | e.preventDefault() |
中止冒泡传播 | e.cancelBubble=true | e.stopPropagation() |
div1.onclick = function(e){
var ev = window.event||e;//获取事件对象
var srcObj = ev.srcElement||ev.target;
}
事件类型:
鼠标事件
常见事件
–click 点击
–dbclick 双击
–mousedown 鼠标按下时
–mouseout 当光标在一个元素上,并且用户将其移出元素边界时
–mouseover 鼠标移入时
–mouseup 释放鼠标按钮时
–mousemove 当光标在你一个元素上时 重复发生
页面上所有元素均支持鼠标事件。
键盘事件
常见事件
–keydown 当用户在键盘上按下一个键时发生,如果用户按键不放,就会重复发生
–keypress 当用户在键盘上按下一个字符键(不包括shift和Alt键等)时发生,如果用户按键不放,也会重复发生
–keyup 当用户释放一个键时发生
通常在输入框上实现键盘事件。
返回false表示不响应该事件
事件发生顺序
–字符键:keydown,keypress,keyup
–非字符键:keydown,keyup
HTML事件
常见事件
–load,unload
–select
–change 失去焦点并且值被改变
–submit
–reset
–resize 窗口或框架尺寸调整
–scroll 有滚动条时
–focus 获得焦点
–blur 失去焦点
相关文章推荐
- JavaScriptSerializer类序列化日期时需要注意的问题
- JavaScript 错误 - Throw、Try 和 Catch
- js之获取窗口大小和位置信息
- JS 的一些知识点
- Ionic javascript Api | ion-view 视图的生命周期及事件集合
- 项目整理三.excel文件转json
- js的filter的巧用
- IE浏览器中JSON对象兼容性的问题
- jsp中两种include用法的区别
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
- Js中的window.parent ,window.top,window.self 详解
- 一些原生js处理的兼容性问题解决方法(自己)
- js字符串中出现次数最多的字符
- Javascript输出
- JavaScript拼接字符串传递多个参数
- javascript定时执行方法
- javascript基础
- 详解基于jsp的文件的上传下载
- js基础
- jsp放在web-inf下的注意事项