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参数列来保存状态信息或导航

//13.6.1 DOM中的事件模拟

//document.createEvent()  方法接收一个参数分别为  UEEvents MouseEvents MutationEvents HTMLEvents

//_event.initMouseEvent() //接收15个参数

//参数列表

    //1. type（字符串） 表示要触发的事件类型 ，如click

    //2. bubbles（boolean) 表示事件是否应该冒泡，为精准模拟鼠标事件，应该把这个参数设置为true

    //3. cancelable(boolean)  表示事件是否可以取消，精准模拟鼠标事件，应该把这个参数设置成为true

    //4. view(AbstractView) 与事件关联的视图，这个参数几乎总是要设置为 document.defaultView

    //5. detail (整数) 通常设置成0

    //6. screenX 事件相对于屏幕的X坐标

    //7. screenY 事件相对与屏幕的Y坐标

    //8. clientx 事件相对于视口的X坐标

    //9. clientY 事件相对于视口的Y坐标

    //10.ctrlKey 表示是否按下了Ctrl键，默认值为false

    //11 altKey  表示是否按下了Alt键， 默认值为false

    //12 shiftKey 表示是否按下了Alt键，默认值为false

    //13 metaKey  表示是否按下了Meta键，默认值为false

    //14 button 整数，表示按下了哪个一个鼠标键，默认值为0

    //15 relateTarget(对象) 表示与事件相关的对象，这个参数只在模拟mouseover 或 mouseout 时使用

    //模拟鼠标事件示例

    var btn5 = document.getElementById("myBtn5");

    //创建事件

    var __event = document.createEvent("MouseEvents");

    //初始化事件

    __event.initMouseEvent('click',true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);

    //触发事件

    btn5.dispatchEvent(__event);

    //模拟键盘事件示例

    //事件对象包含initKeyboardEvent方法

    //type 表示触发的事件类型 如 keydown

    //bubbles boolean 表示事件是否应该冒泡，为精准模拟事件应该设置为true

    //cancelable 表示是否可以取消，为精准模拟事件应该设置为true

    //view(AbstractView) 与事件关联的视图，这个参数几乎总是要设置为 document.defaultView

    //key (boolean) 表示按下键的键码

    //location (整数) 表示按下了哪里的键，0 表示默认主键盘，1表示左键盘，2表示右键盘，3表示数字键盘，4表示移动设备，5表示手柄

    //modifiers (字符串) 空格分隔的修改键列表，如shift

    //repeat 整数，在一行中按下了这个键多少次

    //ctrlKey 表示是否按下了Ctrl键，默认值为false

    //altKey  表示是否按下了Alt键， 默认值为false

    //shiftKey 表示是否按下了Alt键，默认值为false

    //metaKey  表示是否按下了Meta键，默认值为false

    //keyCode (整数) 被按下或释放的键的键码，这个参数对于keydown keyup事件有用，默认值为0

    //charCode(整数) 通过按键生成的ASCII编码，这个参数对于keypress事件有用，默认值为0

    function KeyboardEventA(){

    // var textbox = document.getElementById("myBtn6"),event;

    // if(document.implementation.hasFeature("KeyboardEvents","3.0")){

    //     event = document.createEvent("KeyboardEvent");

    //     event.initKeyboardEvent('keydown',true,true,document.defaultView,'a',0,"Shift",0);

    // }

    // //触发事件

    // textbox.dispatchEvent(event);

    //此处代码不知道为什么在浏览器失效，以后再研究。

    var txt=document.getElementById("myBtn6");

    txt.focus();

    if(document.implementation.hasFeature("KeyboardEvents","3.0")){

        var evt =document.createEvent("KeyboardEvent");

        evt.initKeyboardEvent("Keydown",true,true,document.defaultView,"a",0,"Shift",0);

        txt.dispatchEvent(evt);

    }

}

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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