实用JS系列——事件类型

事件就是用户对窗口上各种组件的操作。JS中的事件中的事件即由访问Web页面的用户引起的一系列的操作。一般用于浏览器和用户操作进行交互,例如:用户的单击事件等。

类型分为:

内联模型、脚本模型和DOM2模型。

1、内联模型

先看两个内联模型的例子:

//示例1
    <input type="button" id="button1" value="Test" onclick="alert('Hello World!')" />

或者利用函数

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" >
        function test() {
            alert("Hello World!");
        }
    </script>
</head>
<body>
    //示例2
    <input type="button" value="Test1" onclick="test()" />
</body>
</html>

它是最传统的处理事件方法。

特点:

从上面两个例子中可以看到,虽然对于初学者来说,这种写法会很好理解功能实现,但html和JavaScript没有做到很好的分离。

2、脚本模型

脚本模型可以在js中处理事件,来解决内联模型带来的问题。

//获取对象
 var Obj = document.getElementById('testButton');
//单击事件
            Obj.onclick = function () {
                alert('Hello World!');
            }

getElementById 根据ID获取对象,类似的还有getElementByTagName、getElementsByClassName等。用法类似,但要注意的是,id是唯一的,但class并不是唯一的。

3、DOM事件

W3C 规范 在DOM 级别 1中并没有定义任何的事件,DOM
级别 2中已经提供了提供了一种更详细的更细致的方式以控制 Web 页面中的事件,最后,完整的事件是在2004年 DOM 级别 3的规定中才最终定案。

在DOM事件中,我们可以为元素添加事件监听(addEventListener),当我们不再使用它时,可以将其移除(removeEventListener)。

1)addEventListener

格式为:

element.addEventListener(<event-name>, <callback>, <use-capture>);

参数一 :event-name 事件名称或类型

参数二:callback 回调函数,会在事件触发的时候被调用。

参数三:use-capture 是否在捕获阶段被触发。

代码示例:

 var Obj = document.getElementById('testButton');
            Obj.addEventListener("click", function () {
                alert("Hello World! Dom2");
            }, false);

2)removeEventListener

格式为:

element.removeEventListener(<event-name>, <callback>, <use-capture>);

参数与addEventListener相同,用法也十分类似。

小结:

有人说,事件是JavaScript应用跳动的心脏 。事件通常与函数配合使用,当事件发生时函数才会执行。当我们与浏览器中
Web 页面进行某些类型的交互时,事件就发生了。但在使用事件的时候,也要合理选择,这样才能在效率和结构上获得双赢。

时间: 2024-10-17 14:15:44

实用JS系列——事件类型的相关文章

实用JS系列——BOM常用对象

背景:  最近在着手项目的时候,意识到自己JS的欠缺.虽然看了不少JavaScript的视频,但真正项目中并不是经常遇到大且难的例子.所以JavaScript的基础还需要再打扎实,也就有了这一系列博客.这一系列更重视实用,理论部分可参看之前博客. BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分.它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM. 由图中可看出,window对象是BOM中所有对象的父对象. 1.window对

JS中的事件类型和事件属性的基础知识

周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习,  小姨子再也不用担心我的学习啦: 从哪里开始呢?????? ??????? 事件的类型 DOM3规定了下面这几事件类型: UI事件:onload,resize,scoll等等; 焦点事件: 鼠标事件: 滚轮事件: 文本事件: 键盘事件: 变动事件:(用的也少): 变动名称事件,当元素的属性名发生改变的时候触发(没啥用, 要弄编辑

js关于事件的一些总结(系列一)

今天小弟在这里说一下 js 关于事件的一些总结  在这里直接上代码 省去啰嗦的步骤以免看烦了  总结的不好希望大家见谅 一.事件的默认事件 事件的默认事件是什么? 就是a标签有一个链接事件  input type标签有一个默认的点击输入事件 等等.... 那么问题来了 如果我这里有一个a标签  默认是有一个超链接的  我在a标签上添加了点击事件 那么会不会触发点击事件呢?? 答案是不会   代码来证明一下(经过测试) <!DOCTYPE html> <html lang="en

JS 事件(5)——事件类型——UI事件

UI事件 UI(User Interface,用户界面)事件,指的是那些不一定与用户操作有关的事件. UI事件包括load.unload.abort.error.select.resize.scroll. 这些事件在DOM2级事件中都归为HTML事件:要确定浏览器是否支持DOM2级事件中规定的HTML事件,可以使用如下代码: 1 var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0&qu

js事件类型

JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设备事件 触摸与手势事件 第一部分:UI事件 UI事件中UI即(User Interface,用户界面),当用户与页面桑拿的元素交互时触发. UI事件中主要包括load,unload,abort,error,select,resize,scroll事件. 1.load事件 此事件为当页面完全加载完之后

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

一.事件概述 事件是什么? 在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间.地点.人物,发生了什么来进行概括. 同样的在javascript也有这样的一个的东西------事件. 页面上发生的事件:鼠标移动.点击.滚动等等. 事件描述了页面上发生的事情,通常它有以下三个要素组成: 事件源:触发事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序(事件监听器):事件触发后要执行的代码(函数形式) Javascript 使我们可以动态的去操作一个页

《JS高程》事件类型学习笔记

事件类型: UI事件&焦点事件: 鼠标滚轮事件: 键盘与文本事件: 复合事件&变动事件: HTML5事件: 设备事件&触摸与手势事件:

原来js里不同事件类型也就这么几个——总结自《JavaScirpt&amp;jQuery交互式Web前端开发》

在浏览网站时通常有三种事件类型:UI事件,键盘事件以及鼠标事件 1. UI事件 (当用户与页面上的元素发生交互触发) load             Web页面加载完成unload         Web页面正在卸载(通常是因为请求了一个新页面)error 浏览器遇到JavaScript错误或有不存在的资源resize   浏览器窗口的大小发生了变化scroll 用户使用滚动条移动了页面 2. 键盘事件 (当用户操作键盘时发生) keydown 用户第一次按下一个键(按住这个键时会反复触发)k

js键盘事件全面控制

主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用 js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时 候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而 keypre