读书时间《JavaScript高级程序设计》六：事件

　　Javascript与HTML之间的交互是通过事件实现的。

　　1. 事件流

　　事件流描述的是从页面中接收事件的顺序。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
</head>
<body>
    <div id="box"></div>
</body>
</html>

　　事件冒泡

　　　　事件开始 - 具体的元素（文档嵌套层次最深的那个节点）- 逐级向上传播 - 最外围的节点（文档）。

　　　　<div> - <body> - <html> - document 　　

　　事件捕获

　　　　事件开始 - 最外围的节点 - 依次向下传播 - 具体的事件节点

　　　　document - <html> - <body> - <div>

　　DOM 事件流: 事件捕获阶段 - 处于目标阶段 - 事件冒泡阶段

　　document - <html> - <body> - <div> - <body> - <html> - document

　 IE8及更早的浏览器不支持DOM事件流（不支持事件捕获）

　　2. 事件处理程序

　　事件就是用户或者浏览器自身执行的某种动作。如：‘click’，‘load’，‘mousedown’ 等是事件的名称，响应事件的函数就是事件处理程序（或者事件侦听器）。

　　HTML事件处理　

<div onclick="alert('点击')">点击我</div>

　　DOM 0级事件处理程序　

<div id="box">点击我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    box.onclick = function(){
        alert('弹出');
    };
</script>

　　 DOM 2级事件处理程序　

<div id="box">点击我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    box.addEventListener('click', function(){
        alert('弹出');
    }, false);
</script>

　　IE8及更早的浏览器的事件处理程序

<div id="box">点击我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    box.attachEvent('onclick', function(){
        alert('弹出');
    });
</script>

　　兼容的事件处理程序　

function addEvent(o, type, fn) {
    if (o.addEventListener) {
        o.addEventListener(type, fn, false);
    } else if (o.attachEvent) {
        o.attachEvent('on' + type, fn);
    } else {
        o['on' + type] = fn;
    }
}

function removeEvent(o, type, fn) {
    if (o.removeEventListener) {
        o.removeEventListener(type, fn, false);
    } else if (o.detachEvent) {
        o.detachEvent('on' + type, fn);
    } else {
        o['on' + type] = null;
    }
}

　　3. 事件对象

　　事件会将一个 event 对象传入到事件处理程序中。

<div id="box">点击我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    // DOM
    box.addEventListener('click', function(event){
        alert(event.type);
    }, false);
    //IE DOM0
    box.onclick = function(){
        var event = window.event;
        alert(event.type);
    };
    //IE DOM2
    box.attachEvent('onclick', function(event){
        alert(event.type);
    });
</script>

　　event对象包含与创建它的特定事件有关的属性和方法。

　　IE的事件对象

　　4. 事件类型

　　浏览器中发生的事件有很多种类型，不同的事件类型有不同的信息。

　　　UI事件

　　　load 当页面完全加载后在window上面触发，当所有框架都加载完在框架集上触发，当图像加载完成时在img元素上触发。

　　　unload 当页面卸载后在window上触发，当所有框架都卸载后在框架集上触发

　　　select 当用户选择文本框（input textarea）中的字符时触发

　　 resize 当窗口或框架的大小变化时在window上或框架上触发

　　　scroll 滚动带滚动条的元素的内容时，在该元素上触发（<body>元素包含所加载页面的滚动条）

　　　焦点事件

　　焦点事件会在页面获得焦点货失去焦点时触发

　　　blur 元素失去焦点时触发

　　　focus 元素获得焦点时触发

　　　鼠标与滚轮事件

　　　click 单击鼠标主键或者按下回车键时触发

　　　dbclick 双击鼠标主键时触发

　　　mousedown mousemove mouseup

　　　mouseover mouseout

<div id="box">点击我</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    // DOM
    box.addEventListener('click', function(event){
        var keys = [];
        if(event.ctrlKey){
            keys.push('ctrl');
        }
        if(event.altKey){
            keys.push('alt');
        }
        if(event.shiftKey){
            keys.push('shift');
        }
        alert(keys.join(',')); // 按下了哪些修改键
    }, false);
</script>

　　键盘和文本事件

　　使用键盘时会触发键盘事件

　　keydown 按下键盘上的任意键时触发

　　keypress 按下键盘上的字符键时触发按住不放会重复触发 Esc键也会触发

　　keyup 释放键盘上的键时触发

　　对应键的键码

　　　HTML5事件

　　　contextmenu 上下文菜单

<ul id="box" style="display: none;">
    <li>复制</li>
    <li>剪切</li>
    <li>粘贴</li>
</ul>
<script type="text/javascript">
    var box = document.getElementById('box');
    document.addEventListener('contextmenu', function(event){
        event.preventDefault();
        box.style.display = 'block';
    }, false);
    document.addEventListener('click', function(event){
        box.style.display = 'none';
    }, false);
</script>

　　　beforeunload 页面卸载前触发

　　　DOMContentLoaded 在DOM树加载完成时触发

　　　readystatechange 提供文档或者元素的加载状态有关的信息

function loadJS(url, callback) {
    var doc = document,
        script = doc.createElement('script'),
        head = doc.getElementsByTagName('head')[0];
    script.type = 'text/javascript';
    if (script.readyState) {
        script.onreadystatechange = function() {
            if (script.readyState == 'loaded' || script.readyState == 'complete') {
                script.onreadystatechange = null;
                callback && callback();
            }
        };
    } else {
        script.onload = function() {
            callback && callback();
        };
    }
    script.src = url;
    head.appendChild(script);
}

　　　hashchange 在URL的参数列表（以及URL中'#'好后面的所有字符串）发生变化时提供通知

　　　触摸事件

　　　touchstart touchmove touchend （iPhone Android）

　　　pointerdown pointermove pointerup （window phone）

　　　手势事件　

　　　gesturestart gesturechange gestureen

　　　......

　　事件委托

　　　自定义事件(事件模拟)

　　 ......

　　第13章主要介绍事件相关知识，事件流，事件处理程序，事件对象，事件类型，事件性能，事件模拟，其中事件性能，事件模拟需要好好熟悉。

posted @ 2016-05-27 12:00 eyeear 阅读(259) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

读书时间《JavaScript高级程序设计》六：事件

公告