美文网首页前端攻城狮前端学习
JavaScript事件处理程序

JavaScript事件处理程序

作者: 范小饭_ | 来源:发表于2016-11-27 19:00 被阅读236次

    事件处理程序

    事件:用户和浏览器执行的操作
    事件处理程序:响应时间的函数
    方法:
    **1.直接在HTML标签中给同名的事件处理程序赋值相应的JS代码 **
    <button onclick="this.innerHTML = 饭饭'">按钮一</button>
    this:引用,此时代表的元素节点
    不能移除事件
    2、在HTML标签中给同名的时间处理程序赋值相应的函数调用
    <button onclick="func2(this)">按钮二</button>
    this在标签中代表的是当前这个标签节点
    一般认为此类事件不能移除
    应用

            function func2(obj) {//obj = this;
                console.log("事件二");
                //注意:在函数中this代表的是window
                console.log(this);
                console.log(obj);
            }
    

    3.获取相应的元素节点将函数赋值给事件处理程序
    <button id="but3">按钮三</button>
    在事件函数中this代表的是当前这个标签节点
    事件可以移除:元素节点.事件处理程序 = null;

            var jsBut3 = document.getElementById("but3");
            jsBut3.onclick = func3;
            function func3() {
                console.log("fanfanis a good girl");
                console.log(this);
            }
    

    此时如果添加事件会覆盖上一个事件
    4.添加事件的监听
    元素节点.addEventListener(参数1, 参数2, 参数3);
    参数1:事件名
    参数2:响应事件的函数
    参数3:事件流 一般情况下为false
    事件监听可以添加多个事件处理程序,多个事件相互之间互不影响。

            jsBut4.addEventListener("click", func4, false);
            function func4() {
                console.log("fanfanis a good girl");
                //事件函数中this代表的是当前元素节点
                console.log(this);
            }
            //可以添加多个事件处理程序,多个事件相互不影响
            jsBut4.addEventListener("click", func5, false);
            function func5() {
                console.log("Yes, you are very right!");
            }
    

    总结一下this在四中方法中用法
    this

    1、HTML标签中代表当前元素节点
    2、HTML标签中代表当前元素节点,在函数中代表的window全局对象,在标签中将this当做实参传递给函数,那么在函数中形参就代表了当前元素节点。
    3、事件函数中this代表当前元素节点
    4、事件函数中this代表当前元素节点

    window中常用的事件

    事件类型.png

    unload卸载事件
    在页面完全卸载之后触发的卸载事件

            window.onunload = function() {
                函数体;
            };
    

    load加载事件
    当页面完全加载后触发加载事件

            window.onload = function() {
                函数体;
            }
    

    scroll滚动事件
    当鼠标滚动时触发滚动事件

    window.onscroll = function(){
                //滚动高度
                var h = document.documentElement.scrollTop || document.body.scrollTop;
            };
    
    

    resize窗口变化事件
    改变窗口尺寸时触发窗口变化事件

    window.onresize = function() {
    //获取窗口宽度
    var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
    //获取窗口高度
    var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
            };
    

    焦点事件
    焦点事件一般发生在输入框

    var jsInput = document.getElementById("put");//获取元素节点
    //用第四种事件处理程序,给jsInput添加聚焦事件
            jsInput.addEventListener("focus", function(){
                函数体;
            }, false);
    //用第四种事件处理程序,给jsInput添加离焦事件
            jsInput.addEventListener("blur", function(){
                函数体
            }, false);
    

    鼠标单击事件
    鼠标单击时发生

    jsDiv.addEventListener("click", funcOnceClick, false);
            function funcOnceClick() {
                函数体;
            }
    

    鼠标双击时发生

    jsDiv.addEventListener("dblclick", funcDblClick, false);
            function funcDblClick() {
                函数体;
            }
    

    mouseover鼠标移入事件
    当鼠标移入时触发
    var jsDiv = document.getElementById("box");

    jsDiv.onmouseover = function() {
            this.style.backgroundColor = "green";
            };
    

    mouseout鼠标移出事件
    当鼠标移出时触发
    var jsDiv = document.getElementById("box");

    jsDiv.onmouseout = function() {
            this.style.backgroundColor = "green";
            };
    

    mousedown鼠标按下事件
    当鼠标按下时触发

    jsDiv.onmousedown = function() {
            this.style.width = this.offsetWidth * 2 + "px";
            };
    

    mousedup鼠标抬起事件
    当鼠标抬起时触发

    jsDiv.onmouseup = function() {
            this.style.width = this.offsetWidth * 2 + "px";
            };
    

    mousemove:鼠标移动事件
    鼠标移动事件

    document.onmousemove = function() {
                console.log("鼠标移动");
            };
    

    鼠标事件的event对象

    鼠标事件的event对象.png
    触发事件即可得到一个该事件的对象,该对象包含了这个事件的所有信息
    document.onclick = function(e) {
        var evt = e || window.event;
    //常用信息
                console.log(evt.clientX, evt.clientY);//距离浏览器的坐标
                console.log(evt.pageX, evt.pageY);//当前页面的坐标
                console.log(evt.screenX, evt.screenY);
                console.log(evt.button);
    };
    

    keydown:按下任意按键触发(持续调用)

    document.onkeydown = function(e) {
            var evt = e || window.event;
                //keyCode按键ascii值
            console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
    
            };
    

    keyup:抬起任意按键触发

    document.onkeyup = function(e) {
                var evt = e || window.event;
                console.log(evt);//关于键盘的event的所有事件
            };
    
    

    ** keypress:按下非(ctrl,alt,shift,capsLock,NumLock)(持续调用)**

    document.onkeypress = function(e) {
                var evt = e || window.event;
                console.log(evt);
            };
    

    键盘应用事件小例子

    //按下shift和p使小方块变为黄色,使用上下左右键移动小方块
            
            var jsDiv = document.getElementById("box");
            var speed = 5;
            document.onkeydown = function(e) {
                var evt = e || window.event;
                // var str = "p";
                if (evt.shiftKey == true && evt.keyCode == 80) {
                    jsDiv.style.backgroundColor = "yellow";
                }
                switch(evt.keyCode) {
                    case 37:
                        if (jsDiv.offsetLeft > 0) {
                            jsDiv.style.left = jsDiv.offsetLeft - speed + "px";
                        }
                        break;
                    case 38:
                        if (jsDiv.offsetTop > 0) {
                            jsDiv.style.Top = jsDiv.offsetTop - speed + "px";
                        }
                        break;
                    case 39:
                        if (jsDiv.offsetLeft + jsDiv.offsetWidth <= $w()) {
                            jsDiv.style.left = jsDiv.offsetLeft + speed + "px";
                        }
                        break;
                    case 40:
                        if (jsDiv.offsetTop + jsDiv.offsetHeight <= $h()) {
                            jsDiv.style.top = jsDiv.offsetTop + speed + "px";
                        }
                        break;
                }
            };
    

    知识小扩展


    DOM0,DOM2,DOM3事件处理方式区别

    文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容、结构或显示样式。W3C协会早在1988年就开始了DOM标准的制定,W3C DOM标准可以分为DOM1,DOM2,DOM3三个版本。

    DOM1级主要定义的是HTML和XML文档的底层结构。

    DOM2和DOM3级别则在这个结构的基础上引入了更多的交互能力,也支持了更高级的XML特性。

    为此DOM2和DOM3级分为许多模块(模块之间具有某种关联),分别描述了DOM的某个非常具体的子集。

    1、DOM0级事件处理方式:

    通过javascript制定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性。第四代web浏览器出现,至今为所有浏览器所支持。优点,简单且具有跨浏览器的优势。

    var btn = document.getElementById("btn");
                btn.onclick = function(){
                    alert(this.id);//this指定当前元素btn
                }
    

    删除DOM0事件处理程序,只要将对应事件属性置为null即可。
    btn.onclick = null;
    缺点:一个事件处理程序只能对应一个处理函数。

    2、DOM2级事件处理方式

    DOM2级事件处理方式指定了,添加事件处理程序和删除事件处理程序的方法。

    添加事件:
    元素节点.addEventListener(参数1, 参数2, 参数3);
    参数1:事件名
    参数2:响应事件的函数
    参数3:事件流 一般情况下为false事件监听可以添加多个事件处理程序,多个事件相互之间互不影响。

    移除事件
    元素节点.removeEventListener(参数1, 参数2, 参数3);
    参数1:事件名
    参数2:响应事件的函数
    参数3:事件流 一般情况下为false事件监听可以添加多个事件处理程序,多个事件相互之间互不影响。

    例子在上述事件处理程序中已经说过,此处不再列举

    注意:
    a) eventName的值均不含on,例如注册鼠标点击事件eventName为“click”

    b) 处理函数中的this依然指的是指当前dom元素

    c) 通过addEventListener添加的事件处理程序,只能通过removeEventListener来删除,也就是说通过addEventListener添加的匿名函数将无法被删除。
    IE中的DOM2级事件处理

    d) IE中的DOM2级事件处理使用了attachEvent和detachEvent来实现。这俩个方法接受俩个相同的参数,事件处理名称和事件处理函数。IE8级更早版本只支持冒泡型事件,所以attachEvent添加的事件都会被添加到冒泡阶段。

            var btn = document.getElementById("btn");
                btn.attachEvent("onclick",function(){
                    alert(this);//此处this是window
                });
    

    通过attachEvent添加的事件第一个参数是“onclick”而非标准事件中的“click”。在使用attachEvent方法和DOM0级事件处理程序的主要区别在于事件处理程序的作用域。采用DOM0级处理方式,事件处理程序会在其所属元素的作用域内运行。使用attachEvent,事件处理程序会在全局作用域内运行,因此this等于window。

    跨浏览的事件处理方式:
    
    var EventUtil = {
        addEventHandler:function(element,type.handler){
    if(element.addEventListener){
                element.addEventListener(type,handler);
    }else if(element.attachEvent){
                element.attachEvent("on" + type,handler);
    }else{
                element["on" + type] = handler;
    }
        },
    removeEventHandler:function(element,type,handler){
    if(element.addEventListener){
                element.removeEventListener(type,handler);
    }else if(element.detachEvent){
                element.detachEvent("on" + type,handler);
    }else{
                element["on"+type] = null;
    }
        }
    }
    
    
    3、DOM3事件

    DOM浏览器中可能发生的事件有很多种,不同事件类型具有不同的信息,DOM3级事件规定了一下几种事件:
    UI事件,当用户与页面上的元素交互时触发;
    焦点事件,当元素获得或者失去焦点时触发;
    鼠标事件,当用户通过鼠标在页面上执行操作时触发;
    滚轮事件,当使用鼠标滚轮(或类似设备)时触发;
    文本事件,当在文档中,输入文本时触发;
    键盘事件,当用户通过键盘在页面上执行操作时触发;
    合成事件,当为IME(Input Method Editor,输入法编辑器)输入字符时触发;
    变动事件,当底层Dom结构发生变化时触发;

    DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件,IE9也支持DOM3级事件。
    DOM中的事件模拟(自定义事件):
    DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
    返回的对象有一个initCustomEvent()方法接收如下四个参数。
    1)type:字符串,触发的事件类型,自定义。例如 “keyDown”,“selectedChange”;
    2)bubble(布尔值):标示事件是否应该冒泡;
    3)cancelable(布尔值):标示事件是否可以取消;
    4)detail(对象):任意值,保存在event对象的detail属性中;
    可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如:

    var div = document.getElementById("myDiv");
    EventUtil.addEventHandler(div,"myEvent", function () {
    alert("div myEvent!");
    });
    EventUtil.addEventHandler(document,"myEvent",function(){
    alert("document myEvent!");
    });
    if(document.implementation.hasFeature("CustomEvents","3.0")){
    var e = document.createEvent("CustomEvent");
    e.initCustomEvent("myEvent",true,false,"hello world!");
    div.dispatchEvent(e);
    }
    这个例子中创建了一个冒泡事件“myEvent”。而event.detail的值被设置成了一个简单的字符串,然后在div和document上侦听该事件,因为在initCustomEvent中设置了事件冒泡。所以当div激发该事件时,浏览器会将该事件冒泡到document。
    IE中的事件模拟(IE8及之前版本中):
    与DOM中事件模拟的思路类似,先创建event对象,再为其指定相应信息,然后再使用该对象来触发事件。当然IE在实现以下每个步骤都不太一样。
    例如:
    var btn = document.getElementById("myBtn");
    //创建事件对象,不接受任何参数,结果会返回一个通用的event对象,你必须为该event对象指定所有必要的信息。
    var event = document.createEventObject();
    //初始化事件对象
    event.screenX = 100;
    event.screenY = 0;
    event.clientX = 0;
    event.clientY =0;
    event.ctrlKey = false;
    event.altKey = false;
    event.shiftKey = false;
    event.button = 0;

    //触发事件
    btn.fireEvent("onclick",event);

    相关文章

      网友评论

      本文标题: JavaScript事件处理程序

      本文链接:https://www.haomeiwen.com/subject/nhrnpttx.html