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

我们常用的事件类型有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

};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,143评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,185评论 19 139
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,297评论 3 11
  • 总有人说,说话谁不会?这还用学吗?然而说话可是情商高的重要体现。 小娇想要沉浸在游戏中的老公做家务,直接说:“你去...
    旭公子的半满人生阅读 526评论 0 1
  • 过年辞家赴新疆,为了生活日日忙。 怎奈妻儿不情愿,时时弄得心空凉。 天山雪岭昆仑岗,轮台胡杨已落黄。 尔在东山哭断...
    姹姊嫣红阅读 122评论 0 0