事件与事件流、事件监听

事件监听

1、事件的概念

        JavaScript 中每个元素都可以产生触发JavaScript 函数的事件。我们可以认为事件可以被JavaScript侦测到的一种行为。

2、事件流

        事件流主要分为冒泡型事件和捕获型事件。IE只支持冒泡型事件标准DOM支持两者。

 3、事件监听方法

                1、绑定html 元素属性：

                        οnclick="check(this)">

                2、绑定DOM对象属性:

                        document.getElementById("xxx").οnclick=test;

 4、冒泡事件和捕获事件

                1、冒泡事件

                        冒泡事件是从内向外运行的

                                运行结果如下：

                                click me

                                先输出 p

                                再输出 div

                                接着是 body

                2、获取事件

                        获取事件是由外至内的运行

                                运行结果如下：

                                click me

                                先输出 body

                                再输出 div

                                接着就是 p

 5、访问事件对象

                1、IE中的事件对象

                        IE中的事件对象是一个隐式可用的全局对象：event，它是window对象的一个属性。

                                op.οnclick=function(){

        　                         　var oEvent=window.event;

    　　                 }

                2、标准DOM的事件对象

                        在标准DOM浏览器检测发生了某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入

                        op.οnclick=function(oEvent){

                                　 　//作为参数传进来

    　　                 }

        为了兼容不同的浏览器，通常采用下面的方法得到事件对象。

    　　                op.οnclick=function(oEvent){

        　　                if(window.event){

            　　                oEvent=window.event;

                                  ….

        　        　        }

    　　                }

                3、事件常用属性

                        键盘事件：altKey shiftKey ctrKey

                        IE和标准DOM通用 按下 alt shift ctrl 为 true 否则为 false

                        阻止冒泡：cancelBubble 标准DOM stopPropagation

                        鼠标值：button 同IE

                        鼠标指针在客户区域坐标：clientX clientY 同IE

                                客户区域指的是浏览的窗口、

                        鼠标指针相对于计算机屏幕的坐标：screenX screenY 同IE

                        按键代号：keyCode 同IE

                        设置 false 时取消元素的默认事件：returnValue 同IE

                        引起事件的元素/对象：srcElement 标准DOM中 target

                        事件的名称：type 同IE

                4、常用的事件类型

                        鼠标事件

                        onclick 单击鼠标左键触发

                        ondbclick 双击鼠标左键触发

                        onmousedown 单击任何一个鼠标按键触发

                        onmouseout 鼠标移出任何一个元素边界触发

                        onmousemove 鼠标再某个元素上面移动时持续触发

                        onmouseup 松开鼠标任意一个按键时触发

                        onmouseover 鼠标指针移到一个元素上时触发

                        键盘事件

                        onkeydown 按下键盘上某个按键时触发，一直按会持续触发

                        onkeyup 释放某个按键时触发

                        onkeypress 按下某个键并产生字符时触发，忽略 shift 等功能键

                HTML事件

                        onload 页面完全加载后在window对象上触发

                        onunload 页面完全卸载后在window对象上触发

                        onselect 选择了文本框中的一个或多个字符时触发

                        onsubmit 单击“提交”按钮时在表单 form 上触发

                        onfocus 任何元素或窗口获取焦点时触发

                        onblur 任何元素或窗口失去焦点时触发

                常用的HTML事件

 标准DOM中

addEventListener的使用方式： DOMOBJ.addEventListener(事件, 接口/函数, true/false); DOMOBJ： 文档节点、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);});

attachEvent方法：

attachEvent用法：attachEvent(事件类型, 处理函数);---针对IE

addEventListener(事件类型, 处理函数, 使用捕获);---针对FireFox

var theBtn = document.getElementById("theBtn");  //取得ID为theBtn的按钮theBtn.attachEvent("onclick", buttonClicked);   //给按钮增加事件function buttonClicked (e){  alert("点击了一下");  }  //定义函数