javascript权威指南第13章 事件示例代码

html 部分

<!DOCTYPE html>
<html>
    <head>
        <title>Event Bubling Example</title>
    </head>
    <body>
        <!--事件冒泡 与事件捕捉 顺序相反-->
        <!--事件冒泡
            1 <div>
            2 <body>
            3 <html>
            4 document
        -->
        <!--事件捕捉
           1.document
           2.html
           3.body
           4.div
        -->
        <div id="myDiv" onclick="showMessage();">Clike Me</div>
        <input type="button" value="click me" onclick="alert(this.value);" />
        <!--如果函数在函数未定义前单击不会抛出错误-->
        <input type="button" value="click me" onclick="try{showMessage();} catch(ex){console.log(ex);}" />
        <input type="button" value="myBtn" id="myBtn"/>
        <input type="button" value="myBtn2" id="myBtn2" />
        <input type="button" value="IEEevent" id="myBtn3" />
        <input type="button" value="13.3.1 DOM中的事件对象" id="myBtn4" />
        <a href="http://www.baidu.com" id=‘link‘> link </a>

        <div id="myDiv2" >
            Right click or Ctrl+click me to get a custom context menu.
            <ul id="myMenu" style="position: absolute;visibility: hidden;background-color:silver;">
                <li><a href="http://www.nczonline.net">Nicholas Site</a></li>
                <li><a href="http://www.wrox.com">Wrox Site</a></li>
                <li><a href="http://www.yahoo.com">Yahoo !</a></li>
            </ul>
        </div>

        <script type="text/javascript" src="event.js" ></script>
    </body>
</html>

　　

js 部分

function showMessage() {
    alert("Hello world!");
}
//alert(this.value)  匿名函数thi.value翻译 from 是所属表单
// function(){
//     with(document)
//     {
//         with(this.form)
//         {
//             with(this)
//             {
//                 //元素属性值
//             }
//         }
//     }
// }

//13.2.2

var btn = document.getElementById("myBtn");
btn.onclick = function () {
    alert("Clicked");
    alert(this.id);
    btn.onclick = null; //事件删除
}

//13.2.3 DOM2级事件处理程序

btn.addEventListener(‘click‘, function () {
    alert(this.id);
}, false);

btn.addEventListener(‘click‘, function () {
    alert("Hello wolrd!");
}, false);

btn.removeEventListener(‘click‘, function () { alert(this.id); }, false); //此处无法删除事件，因为事件引用不同。
//btn.onclick =null; //此处也无用，因为事件监听是属于一个观察者模式，所以这里删除btn本身的事件无法达到删除监听设置的事件
//下属方式可以实现增加和删除事件

//实现事件监听和移除
var btn2 = document.getElementById("myBtn2");
var handler = function () { alert(this.id); };
btn2.addEventListener(‘click‘, handler, false);
//btn2.removeEventListener(‘click‘,handler,false); //有效

//13.2.4 IE事件处理程序

var btn3 = document.getElementById("myBtn3");
//下面代码在IE11中已经不支持，IE11支持 addEventListener
// btn3.attachEvent(‘onclick‘,function(){
//     alert(‘clicked‘);
// });
// var handler2 = function(){alert(‘Clicked‘);};
// btn3.attachEvent(‘onclick‘,handler2);
// btn3.detachEvent(‘onclick‘,handler2);

//13.2.5 跨浏览器的事件处理程序

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent(‘on‘ + 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(‘on‘ + type, handler);
        }
        else {
            element[‘on‘ + type] = null;
        }
    }
};

var handler = function () { alert(‘Clicked‘); };

EventUtil.addHandler(btn3, ‘click‘, handler);
//EventUtil.removeHandler(btn4,‘click‘,handler);

//13.3 事件对象
// 13.3.1 DOM中的事件对象

// 属性方法     类型       读写    说明
//  bubbles      Boolean   只读    表明事件是否冒泡
// cancelable    Boolean   只读    表明是否可以取消事件的默认行为
// currentTarget Element   只读    其事件处理程序应当正在处理事件的那个元素
// defaultPrevented Boolean 只读   为true表示已经调用了preventDefault() DOM3级事件中新增
// detail         Integer  只读    与事件相关的详细信息
// eventPhase     Integer  只读    调用事件处理程序的阶段：1表示事件捕捉阶段，2表示 "处于目标" 3表示冒泡阶段
// preventDefault Function 只读    取消事件的默认行为,如果cancelable是true,则可以使用这个方法
// stopImmediatePropagetion Function 只读    取消事件的进一步捕获或者冒泡，同时阻止任何事件处理程序被调用 DOM3级事件中新增
// stopPropagation   Function 只读     取消事件的进一步捕捉或冒泡。如果bubbles 为true  则可使用该方法
// target           Element  只读     事件的目标
// trusted      Boolean     只读      为true表示事件是浏览器生成的，为false表示事件是有开发人员通过avascript 创建的 DOM3 中新增
// type          string     只读      触发事件的类型
// view          AbstractView  只读  与事件关联的抽象视图。等同于发生事件的window 对象

//事件冒泡到body click

// document.body.onclick = function (event) {
//     alert(event.currentTarget === document.body); //当前处理事件的元素是body
//     alert(this === document.body);
//     alert(event.target === document.getElementById("myBtn")); //事件目标，由谁触发

// }

var btn4 = document.getElementById("myBtn4");
var handler4 = function (event) {
    switch (event.type) {
        case "click":
            alert("Clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor = ‘red‘;
            break;
        case "mouseout":
            event.target.style.backgroundColor = ‘‘;
            break;
    }
}

btn4.onclick = handler4;
btn4.onmouseover = handler4;
btn4.onmouseout = handler4;

var link = document.getElementById("link");
link.onclick = function (event) {
    if (event.cancelable) {
        event.preventDefault(); //取消事件默认行为
    }
    event.stopPropagation(); //取消事件向下冒泡
};

//13.3.2 IE中的事件对象 （IE11版本都已支持DOM2 DOM3 的特性即html5 等标准）
//  属性/方法             类型     读写    说明
//   cancelBubble       Boolean   读/写   默认为false ,但将其设置为true就可以取消事件冒泡
//                                        与 DOM 中的stopPropagation() 方法相同
//   returnValue        Boolean   读/写   默认值为true ,但将其设置为false 就可以取消事件的默认行为
//                                        与DOM中的preventDefault() 方法相同
//   srcElement         Element   只读     事件的目标（与DOM中的target属性相同）
//   type               string    只读     被触发的事件类型

// 13.3.3 跨浏览器的事件对象

var EventUtilExt = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent(‘on‘ + 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(‘on‘ + type, handler);
        }
        else {
            element[‘on‘ + type] = null;
        }
    },
    getEvent: function (event) {
        return event ? event : window.event; //ie 低版本只支持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.cancelable = true;
        }
    }
};

// btn4.onclick =function(event){
//     event = EventUtilExt.getEvent(event);
// }

// 13.4 事件类型
// 13.4.1 UI事件
//             load : 当页面完全加载后在window 上面触发
//            unload: 当页面完全卸载后在window 上面触发
//             abort: 当用户停止下载过程时，如果嵌入的内容没有加载完成，则在<object> 元素上面触发
//             error: 当发生javascript错误时候在window 上面触发
//            select: 当用户选择文本框（input 或 texterea) 中一或者多个字符时触发
//            resize: 当窗口或者框架的大小发生变化时在window或者框架上触发。
//            scroll: 当用户滚动带滚动条的元素的内容时候触发。在该元素上触发
//    document.implementation.hasFeature("HTMLEvents","2.0") //确定浏览器是否支持DOM2级事件规定的HTML事件

// EventUtil.addHandler(window, ‘load‘, function (event) {
//     alert(‘Loaded‘);
// });

//13.4.2 焦点事件
// blur  元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持它
// DOMFocusIn: 在元素或得焦点时候触发，这个事件与html事件focus 等价，但会冒泡，只有Opera 支持 DOM3级别已废除，选择focusin
// DOMFocusOut: 在元素失去焦点时候触发，DOM3已废除 支持focusout
// focus : 获得焦点 元素获得焦点时候触发，不会冒泡。所有浏览器支持
// focusin : focus等价，但会冒泡
// focusout : 失去焦点时触发与blur 等价

//13.4.3 鼠标与滚动轮事件

// click  单击
// dbclick  双击
// mousedown 按下鼠标任意键，不能通过键盘触发该事件
// mouseenter 鼠标首次移动到元素内触发，鼠标DOM2 不支持，DOM3 纳入标准，不冒泡
// mouseleave 鼠标离开元素时候触发
// mousemove  鼠标在元素内部移动时候触发。不能通过键盘触发
// mouseout   鼠标指针位于一个元素上方，然后用户将其以入到另外一个元素时候触发
// mouseover  鼠标在一个元素外部，然后用户首次以入一个元素边界之内时候触发
// mouseup    在用户释放鼠标按钮时候触发，不能通过键盘触发这个事件

document.implementation.hasFeature(‘MouseEvents‘, "2.0"); //检查DOM2 是否支持鼠标事件
document.implementation.hasFeature(‘MouseEvent‘, "3.0"); //检查DOM3 是否支持鼠标事件

//event.clientX event.ClientY 从可视口（可见区域的位置)基于 窗口左上角计算
//event.pageX event.pageY 基于页面计算的位置，当视图没有滚动条上海clientx =pagex;
//event.screenX event.screenY 基于屏幕的位置计算

//DOM通过对象的relateTarget属性提供相关元素信，这个属性只对于mouseover mouseout 事件才有效
EventUtilExt.getRelateTarget = function (event) {
    if (event.relatedTarget) {
        return event.relatedTarget;
    } else if (event.toElement) {
        return event.toElement;
    }
    else if (element.fromElement) {
        return event.fromElement;
    } else {
        return null;
    }
}

//鼠标按钮
EventUtilExt.getButton = function (event) {
    if (document.implementation.hasFeature("MouseEvents", "2.0")) {
        return event.button; //原生DOM 模式
    } else {
        //IE 模式下的button
        switch (event.button) {
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4:
                return 1;
        }
    }

}

//鼠标滚动
//mousewheel

//键码 event.keyCode  参考键码表  event.charcode 

//textInput 事件

//btn.addEventListener(‘textInput‘,function(event){},false);
//textInput 事件中包含 属性  inputMethod 表示文本输入文本框的方式

//复合事件
//compositionStart : 在IME的文本复合系统打开时触发，表示要输入了
//compositionupdate: 在向输入字段中插入新字符时候触发，
//compositioned :  在IME的文本复合系统关闭时触发，表示返回正常的键盘输入状态
//document.implementation.hasFeature("CompositionEvent","3.0"); 确定浏览器是否支持复合事件

//13.4.6 变动事件
document.implementation.hasFeature("MutationEvents","2.0"); //检查浏览器是否支持变动事件
// DOMSubtreeModified: 在DOM结构中发生任何变化时触发，这个事件在其他任何事件触发后都会触发
// DOMNodeInserted: 在一个节点作为一个子节点插入到另外一个节点时触发
// DOMNodeRemoved:  在节点从其父节点中被移除时触发
// DOMNodeInsertIntoDocument : 在一个节点被直接插入文档或者通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发
// DOMAttrModified : 在特性被修改之后触发
// DOMCharacterDataModified : 在文本节点的值发生变化时触发

//13.4.7 HTML5事件
//contextmenu 鼠标右键
EventUtilExt.addHandler(window,‘load‘,function(event){
    var div = document.getElementById("myDiv2");
    EventUtilExt.addHandler(div,‘contextmenu‘,function(event){

        event =EventUtilExt.getEvent(event);

        EventUtilExt.preventDefault(event);

        var menu = document.getElementById("myMenu");
        menu.style.left = event.clientX+"px";
        menu.style.top = event.clientY+"px";
        menu.style.visibility =‘visible‘
    });

    EventUtilExt.addHandler(document,‘click‘,function(){
        document.getElementById("myMenu").style.visibility =‘hidden‘;
    });

});

//beforeunload  设计目的是让开发人员有可能在页面卸载前阻止这一操作
//readystatechange  含（uninitialized loading loaded interactive(交互) complete)
//pageshow pagehide
//hashchange 事件 以便在URL的参数列表（及URL中#号后面的所有字符串发生变化时通知开发人员
//之所以新增这个事件，是因为在Ajax应用中，开发人员经常利用URL参数列来保存状态信息或导航

　　

原文地址：https://www.cnblogs.com/ms_senda/p/11484147.html

时间： 2024-10-04 11:21:11

javascript权威指南第13章 事件示例代码的相关文章

JavaScript权威指南第13章 web浏览器中的javascript

13.1 客户端javascript window对象是所有的客户端javascript特性和api的主要接入点.表示浏览器的一个窗口,可以通过window对象来引用它. window 的方法 alert() prompt() confirm() 13.2 在html里嵌入javascript 4种方法: 内联:放置在<script></script>标签之中 外部引入:<script src="   "></script> html程序

JavaScript权威指南第20章 客户端存储

20 客户端存储 客户端存储的几种形式: web存储 cookie IE userData 离线应用 web数据库 文件系统api 20.1 localStorage 和 sessionStorage 20.1 .1 存储有效期和作用域 localStorage 和 sessionStorage区别在于存储的有效期和作用域不同. localStorage的作用域限制在文档源级别的. 文档源:协议 主机名 端口 决定同一个文档源 同源的文档源可以共享同一个localStorage,甚至可以修改和覆

JavaScript权威指南第04章 表达式和运算符

www.qdmm.com/BookReader/1845423,31051137.aspx www.qdmm.com/BookReader/1845423,31073665.aspx www.qdmm.com/BookReader/1845423,31088923.aspx www.qdmm.com/BookReader/1845423,31104070.aspx www.qdmm.com/BookReader/1845423,31114804.aspx www.qdmm.com/BookRea

JavaScript权威指南第01章 JavaScript 概述

JavaScript 概述 html +css +JavaScript = 网页三大利器 特点: 健壮性 高效性 通用性 1.JavaScript  语言核心 2.客户端JavaScript JavaScript权威指南第01章 JavaScript 概述

JavaScript权威指南第02章 词法结构

词法结构 2.1字符集 JavaScript 是Unicode字符集编写,几乎支持地球上所有的语言. 2.1.1区分大小写 javascript是区分大小写的语言. 2.1.2 空格.换行符和格式控制符 javascript会忽略标识之间的空格符.换行符.通过空格和换行可以大大地提高代码的可读性.当需要使用空格和换行符时,使用Unicode的转义来实现. 2.2注释 单行注释     //这里是单行注释 多行注释    /**多行注释 */ 2.3直接量 在程序中能够直接使用的量,比如数字,字符

JavaScript权威指南第03章 类型、值和变量

类型.值和变量 数据类型分类: 原始类型(primitive type):数字 字符串 布尔值 null undefined 对象类型(object type): 对象是属性的集合,每个属性都由"名/值"对构成. javascript解释器有自己的内存管理机制,可以自动对内存进行垃圾回收. 3.1数字 javascript不区分浮点和整型,所有的数字都是按照浮点型处理. 3.1.1整型直接量 3.1.2浮点型直接量 3.1.3算数运算 3.1.4二进制浮点数和四舍五入错误 当进行小数进

JavaScript权威指南第08章 函数

函数 在javascript中,函数是对象,所以可以给函数设置属性,可以调用他们的方法. 8.1函数定义 function 函数名(参数列表){ 语句内容 } 函数命名规则 1.字母之间用下划线 like_this() 2.非首字母的单词首字母大写 likeThis() 嵌套函数 在函数里面定义函数 8.2函数调用 函数调用的4种方法 1.函数 2.方法 3.构造方法 4.apply call 简介调用 8.3函数的实参和形参 8.4作为值的函数 8.5作为命名空间的函数 8.6闭包 8.7函数

JavaScript权威指南第09章 类和模块

类和模块 类的实现是基于继承机制的,如果两个类继承同一个原型对象,那么也就是说,也就意味着使用同一个构造函数来实例化,它们是同一个类的实例. 9.1类和原型 在javascript中,类的实例都是从同一个原型对象上继承属性,所以原型对象是类的核心. 9.2类和构造函数 构造函数是初始化新创建对象的函数. 构造函数的prototype属性被用作新对象的原型,因此,同一个构造函数的实例化的对象都继承自同一个对象. 9.3javasript中的java式的类继承 实例字段 实例方法 类字段 类方法 9

JavaScript权威指南第05章 语句

语句 5.1表达式语句 赋值语句 递增递减运算 delete运算符(不常用) 函数调用 5.2复合语句和空语句 1.语句块后面不要分号 2.缩进代码 3.javascript没有块级作用域 如果有特殊的目的使用空语句,那么应该加入注释,说明空语句的作用. 5.3声明语句 5.3.1 var var 声明一个变量,变量列表后面可以跟变量或者表达式. 如果var出现在函数体内,那么作用域是该函数,如果出现在顶层代码,那么这个变量是全局变量. var 定义变量后没有被赋值,其值为undefined.