码迷,mamicode.com
首页 > 编程语言 > 详细

13. javacript高级程序设计-事件

时间:2015-05-16 19:54:01      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

1. 事件

1.1 事件流

事件流描述的是从页面中接受事件的顺序,IE的事件是冒泡流,而Netscape Communicator的事件流是事件捕捉流。

1.1.1 事件冒泡

<!DOCTYPE html>

<html>

<title>xxx</title>

<body>

      <div id="myDiv">click me</div>

</body>

</html>

 

如果你点击了页面中的<div>元素,那么这个click事件会按照如下顺序传播:

(1). div

(2). body

(3). html

(4). document

1.1.2 事件捕捉

<!DOCTYPE html>

<html>

<title>xxx</title>

<body>

      <div id="myDiv">click me</div>

</body>

</html>

 

如果你点击了页面中的<div>元素,那么这个click事件会按照如下顺序传播:

(1). document

(2). html

(3). body

(4). div

 

1.1.3 DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。(IE9以上支持)

1.2 事件处理程序

1.2.1 HTML事件处理程序

<!DOCTYPE html>

<html>

<title>xxx</title>

<body>

      <div id="myDiv" onclick="alert(‘hello‘)">click me</div>

</body>

</html>

将事件处理程序直接写在 html中

1.2.2 DOM0事件处理程序

(1). 设定处理程序

每个元素(包括window和document)都有自己的处理程序属性,这些属性通常都是小写,将这种属性设置为一个函数,就可以指定事件处理程序,

var btn = document.getElementsById(“btn”);

btn.onclick = function(){

      alert(‘hello world’);

}

(2). 删除处理程序

btn.onclick = null;

1.2.3 DOM2事件处理程序

“DOM2事件”定义了两个方法用来删除和指定处理程序:addEventListener()和removeEventListener()。它们都接受三个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值。(true表示捕获阶段调用,false表示冒泡阶段调用)

var btn = document.getElementsById(“btn”);

btn.addEventListener(‘click‘,function () {

      // body...

      alert(‘hi‘);

},false);

btn.removeEventListener(‘click‘,function () {

      // body...

      alert(‘hi‘);

},false);

1.2.4 IE事件处理程序

“IE事件”定义了两个方法用来删除和指定处理程序:attchEvent ()和detachEvent ()。它们都接受三个参数:要处理的事件名,作为事件处理程序的函数,IE处理程序在冒泡阶段执行

var btn = document.getElementsById(“btn”);

btn. attchEvent (‘click‘,function () {

      // body...

      alert(‘hi‘);

});

btn. detachEvent (‘click‘,function () {

      // body...

      alert(‘hi‘);

});

1.2.5 跨浏览器处理程序

var EventUtil = {

      addHandler: function(element, type, handler) {

             // body...

             if (element.addEventListener) {

                    element.addEventListener(type, handler, false);

             } else if (element.attachEvent) {

                    element.attachEvent(type, handler);

             } else {

                    element["on" + type] = handler;

             }

      }

      removeHandler: function(element, type, handler) {

             if (element.removeEventListener) {

                    element.removeEventListener(type, handler, false);

             } else if (element.detachEvent) {

                    element.detachEvent(type, handler);

             } else {

                    element["on" + type] = null;

             }

      }

}

 

1.3 事件对象

1.3.1 DOM事件对象

兼容DOM浏览器会将一个event对象传入到事件处理程序中,event对象包含与创建它的特定事件有关的属性和方法。

属性/方法

类型

读/写

说明

bubbles

 

 

 

cancelable

 

 

 

currentTarget

Element

 

当前正在处理时间的元素

defaultPrevented

 

 

 

detail

 

 

 

eventPhase

 

 

 

preventDefault()

Function

 

取消事件的默认行为

stopImmediatePropagation()

 

 

 

stopPropagation()

Function

 

取消事件的进一步捕获或者冒泡

target

 

 

事件的目标

trusted

 

 

 

type

 

 

事件的类型

view

 

 

 

 

1.3.2 IE事件对象

IE DOM中的event一般作为window对象的一个属性存在。

属性/方法

类型

读/写

说明

cancelBubble

 

 

设置true取消事件冒泡

returnValue

 

 

设置false取消事件默认行为

srcElement

 

 

事件的目标

type

 

 

被触发的事件类型

 

1.3.3 跨浏览器事件对象

var EventUtil = {

      addHandler: function(element, type, handler) {

             // body...

             if (element.addEventListener) {

                    element.addEventListener(type, handler, false);

             } else if (element.attachEvent) {

                    element.attachEvent(type, handler);

             } else {

                    element["on" + type] = handler;

             }

      },

      removeHandler: function(element, type, handler) {

             if (element.removeEventListener) {

                    element.removeEventListener(type, handler, false);

             } else if (element.detachEvent) {

                    element.detachEvent(type, handler);

             } else {

                    element["on" + type] = null;

             }

      },

      getEvent: function(event) {

             return event ? event : window.event;

      },

      getTarget: function(event) {

             return event.target || event.srcElement;

      },

      preventDefault: function(event) {

             if (event.preventDefault) {

                    event.preventDefault();

             } else {

                    event.returnValue = false;

             }

      },

      stopPropagation: function(event) {

             if (event.stopPropagation) {

                    event.stopPropagation();

             } else {

                    event.cancelBubble = true;

             }

      }

}

1.4 事件类型

1.4.1 UI事件

l load

当页面完全加载后(包括所有图像,JavaScript文件,Css文件等外部资源),就会触发window上面的load事件

l unload

与load事件对应的unload事件,这个事件在文档被完全卸载后触发

l resize

当浏览器窗口被调整到一个新的高度或者宽度的时候,就会触发window窗口的resize事件

l scroll

scroll事件在window对象上发生,表示页面相应元素的变化

1.4.2 焦点事件

l focus:元素获取焦点时触发,不冒泡

l blur:元素失去焦点是触发,不冒泡

1.4.3 鼠标与滚轮事件

l click:点击主鼠标按钮(通常左键)或者按下回车键

l dbclick:双击主鼠标按钮(通常左键)

l mousedown:在用户按下任意鼠标键触发

l mouseenter:在鼠标光标首次移动到元素范围内触发

l mouseleave:位于元素范围内的光标移动到元素范围之外是触发

l mousemove:在鼠标在元素范围内移动是触发

l mouseout:鼠标指针在一个元素上方,移动到另一个元素上方时触发

l mouseover:鼠标从元素外部首次移动到元素内触发

l mouseup:用户释放鼠标按钮时触发

1.4.4 键盘与文本事件

l keydown:键盘按下事件

l keypress:按下键盘上的字符键触发,获取按下当前键的ASCII码

      getCharCode:function(event){

             if(typeof event.charCode == "number"){

                    return event.charCode;

             }else{

                    return event.keyCode;

             }

      }

l keyup:用户释放键盘上的按键触发

1.4.5 HTML5事件

l contextmenu

通过点击鼠标右键可以显示上下文菜单,事件的目标是发生在用户操作的元素上

l beforeunload

页面卸载前触发,以便阻止页面卸载

l DOMContentLoaded

这个事件会在DOM元素加载完毕触发,不理会css,js,图片等外部元素

l readystatechange

这个事件的目的是提供与文档或元素的加载状态有关的信息,支持readystatechange事件的每个对象都有一个readyState属性,

  1. uninitialized:未初始化
  2. loading:正在加载数据
  3. loaded:加载数据完毕
  4. interactive:可以操作对象,但还没有完全加载完成
  5. complete:对象已经加载完毕

l haschange

在页面URL的参数列表发生变化时(以及URL中#号后面的所有字符串)发生变化是通知开发人员

13. javacript高级程序设计-事件

标签:

原文地址:http://www.cnblogs.com/SLchuck/p/4508263.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!