JavaScript DOM高级程序设计笔记__(二)----第四章 响应用户操作和事件

序言

    事件就是操作检测与脚本执行的组合, 或者给予检测到的操作类型在某个对象上调用监听器.

术语

    事件: onclick只是一个对象的属性,而不是一个事件,只是通过它可以为DOM元素指定一个click事件.

    事件监听器: 即当指定的事件发生时会执行的JS函数.或者叫做事件处理程序.

    事件注册: 这是一个DOM元素的具体事件指定事件监听器的过错.  或者叫做事件绑定.

    调用(invoke): 当浏览器在检测到某种操作之后执行响应事件监听器的情形.

 4.1 DOM2级事件

DOM2级事件规范没有被普遍采用, 必须使用不止一种方式完成相同目标,可以添加通用的事件函数,以便实现跨浏览器的事件注册和响应的操作.

 

4.2 事件的类型

4.2.1 对象时间

1. load 和 unload事件

    load: 浏览器会在完成对页面的载入时调用window的load事件.load还可以用于其他载入外部内容的DOM对象, 例如框架和图片.

    unload: 当用户通过单击链接或者关闭窗口而即将离开当前页面时,会调用window对象的unload事件

2. abort和error事件

    error事件在动态载入并向文档中添加图像时, 可以用来识别图像载入错误. 

3. resize事件

4. scroll事件

4.2.2 鼠标移动事件

mousemove, mouseover, mouseout

tips: 浏览器会在你按下鼠标键时调用mousemove事件-----同时也会调用与单击有关的事件,可以利用这个创建拖放的对象.

4.2.3 鼠标单击事件

mousedown, mouseup, click, 快速按两次按键会在click事件后发生dblclick

在单击和释放鼠标之间,拖动鼠标指针则不会法神click事件

只会有mousedown on document 和 mouseup on document

 

只会有mousedown on document ,mouseup on box, mouseup on document 

 

4.2.4  键盘事件

keydown , keyup , keypress事件在keyup之后表示一个键按过了

4.2.5 表单事件

1. submit reset

2. blur focus

    blue focus适用于<label> <input> <select> <textarea> <button>等表单元素. focus事件会在用户单击一个元素或者按Tab键切换到一个元素时被调用.而单击元素之外的其他地方或者按tab键离开该元素时,会在原先调用focus事件的元素上调用blur事件.

3. change事件

 适用于<input> ,<select> , <textarea>在focus和blur事件之间修改元素的值时被调用.

 4.3 控制事件流和注册事件监听器

4.3.1 事件流

<2> 两个阶段和三个模型

    事件冒泡: 指的是目标元素的事件方法优先并且会被首先执行.然后,事件会向外传播到每个祖先元素,直至document对象.

    事件捕获:指的是把优先权赋予了最外层的祖先元素,事件对应地被由外向内传播,直至抵达目标元素.

    在所有支持W3C DOM的现代浏览器总,冒泡事件是针对传统注册的默认事件流.

 

 <3> 阻止冒泡

在W3C DOM2事件中的方法取消冒泡阶段,可以调用stopPropagation()方法.

同样对于IE, 需要将事件的cancelBubble属性设置为true;

 

DOM标准中相同的stoppropagation()方法也适用于捕获阶段.不过IE9之前的版本都不支持捕获.

<4>取消默认动作

W3C DOM2: .preventDefault()方法取消默认动作

IE: .returnValue = false来取消默认事件

当一些与默认动作关联的事件不能被取消,如load事件,参照151

 

4.3.2 注册事件

 1.嵌入式注册 <a onclick="alert('ok');"></a>

3.传统的事件模型

    var anchor = document.getElementById('test');

    anchor.onclick = function() {} 

    移除事件 anchor.onclick = null;

    可以用来直接执行来调用事件: anchor.onclick();

    <1>传统的事件模型中,this引用的是目标对象

    <2>调用多个监听器. anchor.onclick = function() { funcA(); funcB();}

          要阻止一个侦听器讲设计使用更多的逻辑代码按照需要组合事件侦听器,移除也非易事.

    <3>传统的方法从属于浏览器默认的事件流,即冒泡事件流

4. Microsoft特有的事件模型

attachEvent(event, listener) 和 detachEvent()

可以使用fireEvent()方法来手工调用事件. anchor.fireEvent("onclick");

不支持事件捕获,只支持冒泡事件. 可以使用cancelBubble属性设置为true来阻止冒泡

5. W3C DOM2事件模型

 addEventListener(type, func, true or false) 和 removeEventListener(type, func, true or false )方法.

    跟Microsoft不同的是,事件类型去掉了on前缀,所有的事件必须使用事件名而非传统的方法名称来标识.

    在W3C模型中, 也可以通过组合document.createEvent()方法和对象的dispatchEvent()方法来手工调用事件.  _____待查阅

6.load事件的问题

4.3.3在事件侦听器中访问事件对象

    在W3C的模型中,事件侦听器会取得一个表示事件自身的参数:

    function eventListener(W3CEvent) {...}

    在IE中,事件侦听器则不会取得任何参数,相应的事件对象被保存在window.event中.

    可以使用function eventListener(W3CEvent) {

        var eventObject = W3CEvent || window.event;...

    }

1.简捷的语法

    类似var example = (a != 2) ? 'no' : 'yes';

   var example = a || b; 适合于设置可选变量的默认值非常有用, b为默认值.如果指定了a的值,那么a的值会覆盖b中的默认值

4.3.4跨浏览器的事件属性和方法

事件对象的继承

1.DOM2事件规范中的Event对象

eventPhase , 1(Event.CAPTURING_PHASE)表示捕获阶段要运行的代码, 

                      2(Event.AT_TARGET)表示当前目标对象要运行的代码

                      3(Event.BUBBLING_PHASE)表示冒泡阶段要运行的代码

通过这些时间属性可以确保以正确的方式来访问正确的对象.例如,可以不必依赖于this关键字,而是根据事件的阶段使用target或currentTarget

W3C DOM2事件模型也定义了Even对象的方法

 

 2.DOM2事件规范定义的MouseEvent对象

 

 clientX, clientY表示的位置是相对于浏览器窗口而不是文档的.

而screenX 和 screenY分别表示事件发生的位置相对客户端所在的屏幕的水平和垂直坐标

ps: 附上MouseEvent的结构图:

 

3.处理诸多浏览器不兼容的问​题

    访问事件的目标元素

     确认单击了哪个鼠标键

    访问鼠标命令 keydown