DOM事件第一弹

     近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指正或补充。

一、事件类型

参数

事件接口

初始化方法

HTMLEvents

HTMLEvent

iniEvent()

MouseEvents

MouseEvent

iniMouseEvent()

UIEvents

UIEvent

iniUIEvent()

此处为DOM2级事件,DOM3级对事件分解更加详细,后续文章继续整理。

二、事件对象

也就是所谓的event对象。标准浏览器的event对象是通过方法的参数传入的,而ie则是window.event来获取。现将常用的一些事件对象操作总结如下:

标准属性或者方法名

作用

IE兼容事件名

bubbles

判断事件是否冒泡阶段,true表示冒泡阶段

cancelable

指示事件是否可以取消默认动作

target

返回触发此事件的元素(事件的目标节点)

srcElement

type

返回事件的类型

preventDefault()

阻止默认事件的执行

returnValue为false表示

stopPropagation()

阻止事件的传播

cancelBubble属性为false

三、如何自定义一个事件

1. 使用document.createEvent创建一个事件。

2.通过对应的“初始化方法”初始化事件对象

3.使用dispatchEvent初始化事件

示例代码如下:

<input type="text" value="text" id="text" />
    <button type="button" id="btn">按钮</button>
    <div id="foo" style="width: 200px; height: 200px; background: red;" contenteditable="true" ></div>
    <script>
        var text = document.getElementById('text');
        var foo = document.getElementById('foo');
        var btn = document.getElementById('btn');

        //自定义focus事件
        foo.onfocus = function(evt){
            evt = evt || window.event;
            console.log(evt);
            foo.innerHTML += "<br/>发生了focus事件" + ( evt.view ? 'view' : 'dispatch' );
        }
        if(document.createEvent){
            var cFocus = document.createEvent('HTMLEvents');
            //参数全是为了兼容IE9+
            cFocus.initEvent('focus',true, false); 
            foo.dispatchEvent(cFocus);
        }else{
            foo.focus(); //Ie8-下会触发两个
        }

        //dispatch触发按钮事件
        
        btn.onclick = function(){
            alert('text: ' + text.value);
            text.focus();
        }
        if(document.createEvent){
            var clickHandle = document.createEvent('MouseEvents');
            //参数全是为了兼容IE9+
            clickHandle.initMouseEvent('click',true,false,window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
            btn.dispatchEvent(clickHandle);
        }else{
            btn.click(); //Ie8-下也只有一次
        }

    </script>
  1. 如果是view触发的事件,event对象上也会有view(视图对象)和which(按的哪个键),而通过dispatchEvent触发的则没有这两个属性
  2. 兼容Ie8-的浏览器,把事件委托当作一个方法调用即可,如我想调用click事件(不带on前缀) foo.click

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏瓜大三哥

matlab GUI基础2

GUIDE编程开发 matlab可视化姐买你的设计,一般有两种方法,一是直接通过编辑M脚本文件产生GUI,二是通过MATLAB图形用户界面开发环境GUIDE来建...

27470
来自专栏Hongten

python开发_tkinter_复选菜单

==============================================================

12320
来自专栏大前端_Web

Vue与React的异同-组件(二)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

16320
来自专栏天天

js事件对象相关随记

14530
来自专栏一个会写诗的程序员的博客

JQuery中bind和unbind函数

测试: 页面代码: <body> <input type="button" name="aaa" value="点击我"> <input type="c...

21320
来自专栏互联网杂技

React中的-- 数据流

简介 React的组件简单理解起来其实就是一个函数,这个函数会接收props和state作为参数,然后进行相应的逻辑处理,最终返回该组件的虚拟DOM展现。在Re...

39990
来自专栏向治洪

React Native之ViewPagerAndroid 组件

概述 今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。我们知道在Android开发中系统有ViewPager这个组件,...

21880
来自专栏陈纪庚

HTML5 drag和drop的亲手实践

最近在公司打杂的时候,突然分到了一个锅,就是要支持一个新的功能:用户可以通过拖曳组件来改变组件的顺序。因此,这阵子就看了一下网上的一些drag和drog的文章以...

12430
来自专栏前端说吧

Vue-自定义事件之—— 子组件修改父组件的值

37350
来自专栏www.96php.cn

Discuz后台常用函数详解

当您在编写后台时,需要对几个常用后台显示函数进行详细的了解  下面的函数讲解按照重要性、常用性进行排序 目录 ---- showsetting()表单显示  c...

82250

扫码关注云+社区

领取腾讯云代金券