JavaScript学习笔记——事件
2015-08-20 00:24
477 查看
javascript事件基础和事件绑定
一、事件驱动
1.事件
javascript侦测到的用户的操作或是页面的一些行为(怎么发生的)
2.事件源
引发事件的元素。(发生在谁的身上)
3.事件处理程序
对事件处理的程序或是函数 (发生了什么事)
二、事件的分类
1.鼠标事件
onclick
ondblclick
onmousedowm
onmouseup
onmousemove
onmouseover
onmouseout
2.键盘事件
onkeyup
onkeydown
onkeypress 鼠标按下或按住
3.表单事件
onsubmit
onblur
onfoucs
onchange
4.页面事件
onload
onunload
onbeforeunload
三、如何绑定事件
1.在脚本中绑定
2.直接在HTML元素绑定
3.<script for="two" event="onclick">
alert("我是DIV2");
</script>
四、同一个事件绑定多个事件处理程序
1.自己写的
2.IE:
对象.attachEvent("事件(on)","处理程序") 添加
对象.dettachEvent("事件(on)","处理程序") 删除
FF:
对象.addEventListener("事件","处理程序",布尔值) 添加
对象.removeEventListener("事件","处理程序",布尔值) 删除
Mozilla中:
addEventListener的使用方式:
target.addEventListener(type, listener, useCapture);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中:
target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
javascript事件对象实例讲解
一、事件对象
用来记录一些事件发生时的相关的信息的对象
1.只有当事件发生的时候才产生,只能在处理函数内部访问
2.处理函数运行结束后自动销毁。
二、如何获取事件对象
IE:window.event
FF:
对象.on事件=function (e){}
三、事件对象的属性
1.关于鼠标事件的事件对象
相对于浏览器位置的
clientX 当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置
clientY 当鼠标事件发生的时候,鼠标相对于浏览器Y轴的位置
相对于屏幕位置的
screenX 当鼠标事件发生的时候,鼠标相对于屏幕X轴的位置
screenY 当鼠标事件发生的时候,鼠标相对于屏幕Y轴的位置
相对于事件源的位置
IE:
offsetX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置
offsetY
FF:
layerX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置
laterY
2.关于键盘事件的事件对象
keyCode 获得键盘码
空格:32 回车13 左上右下:37 38 39 40
altKey 判断alt键是否被按下 按下是true 反之是false 布尔值
ctrlKey
shiftKey
type 用来检测事件的类型 主要是用于多个事件通用一个事件处理程序的时候
javascript事件流讲解和实例应用
当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定
顺序相应该元素的触发事件,事件传播的顺序叫做事件流程。
一、事件流的分类
1.冒泡型事件(所有的浏览器都支持)
由明确的事件源到最不确定的事件源依次向上触发。
2.捕获型事件(IE不支持 w3c标准 火狐)
不确定的事件源到明确的事件源一次向下触发。
addEventListener(事件,处理函数,false)
addEventListener(事件,处理函数,true)
二、阻止事件流
IE:
事件对象.cancelBubble=true;
FF:
事件对象.stopPropagation();
三、目标事件源的对象
IE:事件对象.srcElement
FF:事件对象.target
一、事件驱动
1.事件
javascript侦测到的用户的操作或是页面的一些行为(怎么发生的)
2.事件源
引发事件的元素。(发生在谁的身上)
3.事件处理程序
对事件处理的程序或是函数 (发生了什么事)
二、事件的分类
<body> <input type="button" value="改变" id="one" > </body>
1.鼠标事件
onclick
var one=document.getElementById("one"); one.onclick=function () { alert("点击"); }
var one=document.getElementById("one"); one.onclick=aa; alert(aa) function aa () { alert("点击"); }
ondblclick
onmousedowm
onmouseup
onmousemove
onmouseover
onmouseout
2.键盘事件
onkeyup
onkeydown
onkeypress 鼠标按下或按住
3.表单事件
onsubmit
onblur
onfoucs
onchange
4.页面事件
onload
onunload
onbeforeunload
三、如何绑定事件
1.在脚本中绑定
2.直接在HTML元素绑定
3.<script for="two" event="onclick">
alert("我是DIV2");
</script>
四、同一个事件绑定多个事件处理程序
1.自己写的
2.IE:
对象.attachEvent("事件(on)","处理程序") 添加
对象.dettachEvent("事件(on)","处理程序") 删除
one.attachEvent("onclick",aa); one.attachEvent("onclick",bb); function aa () { alert("aa"); } function bb() { alert("bb"); } one.detachEvent("onclick",bb) one.attachEvent("onclick",function () { alert("cc"); }); one.detachEvent("onclick",function () { alert("cc"); });
FF:
对象.addEventListener("事件","处理程序",布尔值) 添加
对象.removeEventListener("事件","处理程序",布尔值) 删除
one.addEventListener("click",bb,false) one.addEventListener("click",aa,false) one.addEventListener("click",function () { alert("cc"); },false) one.removeEventListener("click",function () { alert("cc"); },false) function aa () { alert("aa"); } function bb() { alert("bb"); }
Mozilla中:
addEventListener的使用方式:
target.addEventListener(type, listener, useCapture);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中:
target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
javascript事件对象实例讲解
一、事件对象
用来记录一些事件发生时的相关的信息的对象
1.只有当事件发生的时候才产生,只能在处理函数内部访问
2.处理函数运行结束后自动销毁。
二、如何获取事件对象
IE:window.event
FF:
对象.on事件=function (e){}
三、事件对象的属性
1.关于鼠标事件的事件对象
相对于浏览器位置的
clientX 当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置
clientY 当鼠标事件发生的时候,鼠标相对于浏览器Y轴的位置
相对于屏幕位置的
screenX 当鼠标事件发生的时候,鼠标相对于屏幕X轴的位置
screenY 当鼠标事件发生的时候,鼠标相对于屏幕Y轴的位置
document.onmousemove=function (e) { var ev=e||window.event; var cx=ev.clientX; var cy=ev.clientY; var sx=ev.screenX; var sy=ev.screenY; div1.innerHTML="cx:"+cx+"--cy:"+cy+"<br/>sx:"+sx+"--sy:"+sy; }
相对于事件源的位置
IE:
offsetX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置
offsetY
FF:
layerX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置
laterY
div1.onclick=function (e) { var ev=e||window.event; var ox=ev.offsetX ||ev.layerX; var oy=ev.offsetY ||ev.layerY; div1.innerHTML="ox:"+ox+"--oy:"+oy; }
2.关于键盘事件的事件对象
keyCode 获得键盘码
空格:32 回车13 左上右下:37 38 39 40
altKey 判断alt键是否被按下 按下是true 反之是false 布尔值
document.body.onkeydown=function (e) { var ev=e||window.event; alert(ev.keyCode) alert(ev.altKey) alert(ev.type) }
ctrlKey
shiftKey
type 用来检测事件的类型 主要是用于多个事件通用一个事件处理程序的时候
javascript事件流讲解和实例应用
当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定
顺序相应该元素的触发事件,事件传播的顺序叫做事件流程。
一、事件流的分类
1.冒泡型事件(所有的浏览器都支持)
由明确的事件源到最不确定的事件源依次向上触发。
2.捕获型事件(IE不支持 w3c标准 火狐)
不确定的事件源到明确的事件源一次向下触发。
addEventListener(事件,处理函数,false)
addEventListener(事件,处理函数,true)
二、阻止事件流
IE:
事件对象.cancelBubble=true;
FF:
事件对象.stopPropagation();
三、目标事件源的对象
IE:事件对象.srcElement
FF:事件对象.target
相关文章推荐
- js正则匹配只能输入有效数字可加小数点
- javascript深入理解js闭包
- 错误处理与调试——JavaScript高级程序设计笔记(14)
- javascript如何操作HTML下拉列表标签
- js实现Select列表内容自动滚动效果代码
- JS给Textarea文本框添加行号的方法
- js图片翻书效果代码分享
- js代码实现无缝滚动(文字和图片)
- JS实现支持多选的遍历下拉列表代码
- JS实现的Select三级下拉菜单代码
- js实现文字在按钮上滚动的方法
- js实现按钮颜色渐变动画效果
- JS实现的通用表单验证插件完整实例
- js限制文本框的输入内容代码分享(3类)
- js变形金刚文字特效代码分享
- canvas导出为图片并用JS下载
- js 中{},[]中括号,大括号使用详解
- JS中&&和||用法
- javascript奇葩语法小结
- Javascript学习笔记--瀑布流