你知道页面上常见的事件类型吗

2023年9月23日 214次阅读 来源: baiying

我们常用的事件类型有UI事件,焦点事件,鼠标事件,滚轮事件,键盘事件和文本事件,用了跨浏览器添加事件处理程序的方法来小试一下哦,大概思路是先定义一个对象,里边包含了两个方法,添加事件处理程序和移除事件处理程序,并且做到了跨浏览器使用,我在该对象的基础上添加了一些常用的事件的处理程序,可以直接拿过去用哦,当然还有一些不太常见的(例如复合事件,变动事件等等)此处没做过多尝试

//html
<body>
<button  id="btn">button</button>
<input type="text" id="in">
</body>

//JavaScript
window.onload = function () {
    var btn = document.getElementById('btn');
    var input  =document.getElementById('in');

    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.addEventListener) {
                element.removeEventListener(type, handler, false)
            }
            else if (element.attachEvent) {
                element.detachEvent('on' + type, handler)
            }
            else {
                element['on' + type] = null;
            }
        }
    };

    function handler(event) {
        console.log(event.type);
    }

    //常见UI事件
    EventUtil.addHandler(window, 'load', handler);//页面加载后触发,也可以是当所有框架加载完,图像加载完触发
    EventUtil.addHandler(window, 'unload', handler);//页面卸载后触发,也可以是当所有框架卸载完,图像卸载完触发,只要用户从一个页面切换到另一个页面就会发生unload事件
    EventUtil.addHandler(window, 'resize', handler);//浏览器窗口被调整到一个新的高度时触发

    //常见焦点事件
    EventUtil.addHandler(btn, 'blur', handler);//元素失去焦点时触发,不支持冒泡
    EventUtil.addHandler(btn, 'focus', handler);//元素获得焦点时触发,不支持冒泡
    EventUtil.addHandler(btn, 'focusin', handler);//元素获得焦点时触发,支持冒泡
    EventUtil.addHandler(btn, 'focusout', handler);//元素失去焦点时触发,支持冒泡

    //鼠标与滚轮事件
    EventUtil.addHandler(btn, 'click', handler);//单击主鼠标按钮或者按下回车时触发
    EventUtil.addHandler(btn, 'dbclick', handler);//双击主鼠标按钮时触发
    EventUtil.addHandler(btn, 'mousedown', handler);//按下任意鼠标按钮时触发
    EventUtil.addHandler(btn, 'mouseenter', handler);//鼠标光标首次从元素外部移动到元素范围之内时触发
    EventUtil.addHandler(btn, 'mouseleave', handler);//位于元素上方的鼠标光标移动到元素范围之外时触发
    EventUtil.addHandler(btn, 'mousemove', handler);//鼠标光标在元素内部移动时重复触发
    EventUtil.addHandler(btn, 'mouseout', handler);//位于元素上方的鼠标光标移动到另一个元素时触发
    EventUtil.addHandler(btn, 'mouseover', handler);//鼠标指针位于一个元素外部,首次将其移入另一个元素边界之内时触发
    EventUtil.addHandler(btn, 'mouseup', handler);//释放鼠标按钮时触发
    EventUtil.addHandler(btn, 'mousewheel', handler);//可指定给页面中的任何元素或者document对象,当用户通过鼠标滚轮与页面交互,垂直方向上滚动页面时就会触发

    //键盘与文本事件
    EventUtil.addHandler(btn, 'keydown', handler);//按下键盘上的任意键触发,按住不放会重复触发
    EventUtil.addHandler(btn, 'keypress', handler);//按下键盘上的字符键时触发,按住不放会重复触发
    EventUtil.addHandler(btn, 'keyup', handler);//释放键盘上的键时触发
    EventUtil.addHandler(input, 'textInput', handler);//DOM3引入的,在可编辑区域中输入字符时触发,用于代替keypress,不同是keypress能被任何可以获得焦点的元素触发,但只有可编辑区域才能触发textInput

};
    原文作者：baiying
    原文地址: https://www.jianshu.com/p/f014aa5b6540
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞