首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >DOM事件第一弹

DOM事件第一弹

作者头像
sam dragon
发布2018-01-17 11:22:04
5870
发布2018-01-17 11:22:04
举报
文章被收录于专栏:cnblogscnblogs

     近期温习了部分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
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-04-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、事件类型
  • 二、事件对象
  • 三、如何自定义一个事件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档