专栏首页cnblogsDOM事件第一弹

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 条评论
登录 后参与评论

相关文章

  • JAVAScript柯里化、部分应用参数终极理解

    一、柯里化 在定义柯里化、部分应用参数的概念前,首先必须对闭包有深入的了解和定义,闭包一句话说清楚:函数返回值为函数。 柯里化的定义:将多参函数分解为按步骤接受...

    sam dragon
  • knockout源码分析之执行过程

    一、执行流程 ? 二、主要类分析 2.1. 在applyBindings中,创建bindingContext,然后执行applyBindingsToNodeAn...

    sam dragon
  • nuget服务器搭建,以及如何发布一个Nuget包

    一、本地dll如何打包,以及版本的更新 本小节主要介绍两种方式将本地dll打包为Nuget包, 1.1 利用nuget.exe进行打包(应用于.net fram...

    sam dragon
  • 数据抓取与利用行为的不正当竞争法规制

    编者按: 随着大数据时代的来临,数据的利用纠纷在司法实践中初露端倪。数据虽然在新修订的《民法总则》中作为一种新的客体出现,但其客体的范围、权利归属,权利界限在立...

    企鹅号小编
  • Leetcode: Maximum Subarray

    题目: Find the contiguous subarray within an array (containing at least one num...

    卡尔曼和玻尔兹曼谁曼
  • codeforces 1328D(思维)

    The round carousel consists of n figures of animals. Figures are numbered from 1...

    dejavu1zz
  • 【JS】575- 动态插入的script脚本执行时间

    譬如某个js文件不是很重要,并不是整个页面需要的脚本,可能只是某个功能需要的,这个功能可能是用户点击了某个按钮才触发,入口比较深。且和你页面本身的结构不同类,譬...

    pingan8787
  • Mysql group by实现方式(一) - 索引扫描

    由于GROUP BY实际上也同样须要进行排序操作,而且与ORDER BY相比,GROUP BY主要只是多了排序之后的分组操作。所以,在GROUP BY的实现过程...

    dys
  • 查找----基于有序数组

    SuperHeroes
  • 【C语言笔记】指针函数与函数指针?

    由于“*”的优先级低于“()”的优先级,因而pfun首先和后面的“()”结合,也就意味着,pfun是一个函数。即:int *(pfun(int, int));

    正念君

扫码关注云+社区

领取腾讯云代金券