javascript的事件

ZweiZhao 发布于2019-08-20 15:37 / 1838人阅读

摘要：所谓事件呢，就是可以被侦测到的行为。事件传播的顺序对应浏览器的两种事件流模型捕获型事件流和冒泡型事件流。

去年一直在学习框架的东西，比如VueJs,angularJs的东西，但感觉自己的基础知识还是很匮乏，因此想着该重新回归本质，多看看原生javascrip的东西，现在返回去学一些东西，感觉很多都豁然开朗的感觉。

所谓事件呢，就是可以被 JavaScript 侦测到的行为。而具体的事件有哪些呢

鼠标事件

键盘事件

window事件

media事件

form事件

当触发事件时，就需要去处理他，而使用事件处理模型有三种

html事件处理模型----定义：将事件直接绑定到html标签上----缺点：html和javascript耦合，无法处理多个事件程序

. DOM0级事件处理模型----定义:函数赋值给事件处理程序的方法

var btn=document.getElementById("btn");

 btn.onclick=function(){

 console.log("这是通过DOM 2级处理程序")

};

. DOM 2级事件处理程序----通过addEventListener 和 removeEventListener,这两个函数的参数要一致

function showMsg(){
console.log("msg")
}
btn.addEventListener("click", showMsg, false)
btn.removeEventListener("click", showMsg, false)

IE事件处理
IE8以下的版本不支持addEventListener
因此需要用attachEvent 添加事件处理程序

       detachEvent 删除事件处理程序

而事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

事件捕获：不太具体的DOM节点，具体节点接收到事件

事件冒泡：由具体的DOM节点逐级向上传递至最不具体的节点

网上的图片更形象的表明了

当我们点击son的时候，控制台会先后打出

som msg
father msg

可是我们只想显示son msg，应该怎么处理呢，接着往下看

DOM中的事件对象

在触发DOM上的事件时都会产生一个对象 
DOM中的 event事件对象
     type:事件类型，
     target:获取事件目标元素
     stopPropagation:方法 阻止事件冒泡
     preventDefault 方法 阻止事件的默认行为
IE中的事件对象
    type:事件类型
    srcElement 属性 获取事件目标元素
    cancleBubble 属性
    returnValue 属性 设置为true

通过以上知识，我们可以封装一个跨浏览器的事件对象

    var eventObj= {
         /**
         * 添加事件 
         * element 元素
         * 事件类型
         * 事件处理
         **/
        addEventHandler: 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;
            }
        },
        /**
        * 移除事件
        * element 元素
        * 事件类型
        * 事件处理
        **/
        removeEventHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler)
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler)
            } else {
                element["on" + type] = null;
            }
        },
        /**
        *获取事件
        **/
        getEvent: function (e) {
            return e ? e : window.event;
        },
        /**
        * 阻止默认行为
        **/
        preventDefault: function (e) {
            if (e.preventDefault) {
                e.preventDefault()
            } else {
                e.returnValue = false;
            }
        },
        getElement: function (e) {
            return e.target || e.srcElement;
        },
        /** 
        * 阻止事件冒泡
        **/
        stopPropagation: function (e) {
            if (e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true;
            }

        }
    };
    eventUtil.addHandler(btn2, "click", showMessage);

GPU云服务器云服务器 javascript的事件 javascript事件 javascript键盘事件 javascript焦点事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82372.html

浏览器下的 Event Loop

摘要：前言是以单线程的形式运行在宿主环境下，采用了回调的形式来解决异步任务。线程中步就是在浏览器下的。前言 javascript 是以单线程的形式运行在宿主环境下，javascript 采用了回调的形式来解决异步任务。为什么是单线程？ javascript 的最开始的出现是为了给 web 页面增添一些动态的效果，那么就避免不了获取页面上的元素信息，如果 javascript 是以多线程的...

forrest23 2019-08-23 16:50 评论0 收藏0
什么是JavaScript 事件循环 ?

摘要：此事件队列的美妙之处在于它只是函数等待被调用和移动到调用栈的一个临时存放区域。在事件循环不断监视调用栈是否为空现在确实是空的时候调用创建一个新的调用栈来执行代码。在执行完之后进入了一个新的状态这个状态调用栈为空事件记录表为空事件队列也为空。这篇文章是对个人认为讲解　JavaScript　事件循环比较清楚的一篇英文文章的简单翻译,原文地址是http://altitudelabs.com...

tracymac7 2019-08-20 16:15 评论0 收藏0
JavaScript 浏览器事件解析

摘要：原文浏览器事件之间的关系程序采用了异步事件驱动编程模型，维基百科对它的解释是事件驱动程序设计英语是一种电脑程序设计模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、浏览器、事件之间的关系 JavaScript 程序采用了异步事件驱动编程（Event-driven program...

spacewander 2019-08-20 11:26 评论0 收藏0
《JavaScript高级程序设计》学习笔记：JavaScript中的事件流和事件处理程序

摘要：可以使用侦听器或处理程序来预订事件，以便事件发生时执行相应的代码。响应某个事件的函数称为事件处理程序或事件侦听器。可以删除通过级方法指定的事件处理程序。 JavaScript和HTML之间的交互是通过事件实现的。事件：文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序来预订事件），以便事件发生时执行相应的代码。 1. 事件流事件流：从页面中接收事件的顺序。 ...

Rocko 2019-08-19 17:21 评论0 收藏0
【译】JavaScript面试问题：事件委托和this

摘要：主题来自于的典型面试问题列表。有多种方法来处理事件委托。这种方法的缺点是父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 评论0 收藏0
初窥JavaScript事件机制的实现（一）—— Node.js事件驱动实现概览

摘要：如果当前没有事件也没有定时器事件，则返回。相关资料关于的架构及设计思路的事件讨论了使用线程池异步运行代码。下一篇初窥事件机制的实现二中定时器的实现在浏览器中，事件作为一个极为重要的机制，给予JavaScript响应用户操作与DOM变化的能力；在Node.js中，事件驱动模型则是其高并发能力的基础。学习JavaScript也需要了解它的运行平台，为了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 评论0 收藏0