[DOM Event Learning] Section 2 概念梳理什麼是事件 DOM Event

時間 2019-11-18

標籤 dom event learning section 概念梳理什麼事件欄目 HTML 简体版

原文原文鏈接

[DOM Event Learning] Section 2 概念梳理什麼是事件 DOM Event

事件

　　事件(Event)是用來通知代碼,一些有趣的事情發生了.

　　每個Event都會被一個Event對象所表示,這個對象可能還會有一些自定義的字段或者方法,來獲取發生什麼事情的更多信息.

　　Event對象實現了Event接口(https://developer.mozilla.org/en-US/docs/Web/API/Event).

　　事件能夠是任何事情,從最基本的用戶交互,到rendering model中自動發生的一些事情.

　　有一些官方規範中的標準事件,也有一些特定瀏覽器使用的內部事件.

　　各類事件能夠參考: https://developer.mozilla.org/en-US/docs/Web/Events

事件處理器

　　要在某個對象發生某個事件(好比一個a標籤被點擊)的時候獲得通知,能夠爲這個對象的這個事件指定一個event handler.

　　指定方法:

　　1.用元素名爲on{eventtype}的HTML屬性, 好比:

<button onclick="return handleClick(event);">

　　2.用JavaScript選取元素,設置對應的onXXX屬性,好比:

document.getElementById("mybutton").onclick = function(event) { ... }.

　　更現代的瀏覽器能夠用addEventListener()方法: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

　　可是這個方法不兼容IE9以前的瀏覽器.

　　若是用jQuery來註冊監聽,框架會幫咱們處理瀏覽器的兼容性問題.

　　具體的各類註冊監聽的方式, 上一篇博文中有總結:http://www.cnblogs.com/mengdd/p/4354339.html

　　Event handler能夠設置在HTML元素上,也能夠設置在其餘產生事件的對象上,好比window, document, XMLHttpRequest等.

　　由於歷史緣由,一些<body>和<frameset>上的屬性實際是在它們的Window對象上設置event handler.

　　好比:onblur, onerror, onfocus, onload, onscroll.

事件對象

　　在時間被觸發的時候,回調方法接收一個事件對象做爲參數.

　　這樣你在處理的時候,能夠知道當前是什麼事件(type), 它的target, 以及相關的事件參數.

　　Event是一個接口, 它有一些公共的屬性和方法.

　　各類具體的事件接口(好比MouseEvent, KeyboardEvent)都是Event的子類.

　　事件屬性列表: https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties

　　事件對象的方法中:

　　event.stopPropagation() 會阻止當前事件的進一步傳播.

　　event.preventDefault() 會取消能夠取消的事件, 可是不阻止事件的進一步傳播.

　　preventDefault()用來阻止一些默認的行爲發生.

參考資料:

　　W3C Doc: https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html

　　Event Developer Guide: https://developer.mozilla.org/en-US/docs/Web/Guide/Events

　　learn jQuery Events: http://learn.jquery.com/events/

　　Mozilla Event reference: https://developer.mozilla.org/en-US/docs/Web/Events

　　Event Handler: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers

　　博客文章:http://chajn.org/project/javascript-events-responding-user/javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

[DOM Event Learning] Section 2 概念梳理 什麼是事件 DOM Event

[DOM Event Learning] Section 2 概念梳理 什麼是事件 DOM Event

事件

事件處理器

事件對象

參考資料:

[DOM Event Learning] Section 2 概念梳理什麼是事件 DOM Event

[DOM Event Learning] Section 2 概念梳理什麼是事件 DOM Event