`

JS事件模型

 
阅读更多

一.事件冒泡与事件捕获
事件捕获:由外向内寻找事件源的过程。
事件冒泡:事件从事件源由内向外传播的过程。

二.指派事件监听者
1.在JavaScript中指定事件处理程序,动态指派
<p id="inner">点击</p>
<script type="text/javascript">

function tt(){
alert(this.id);
}
var inner=document.getElementById("inner");
inner.onclick=tt;
</script>

2.在XHTML标记的事件处理属性中指定,静态指派
<p id="inner" onclick="tt()">点击</p>
效果同如下JavaScript执行
var inner=document.getElementById("inner");
inner.onclick=function(){
tt();
};
两种方式的不同点如下图

所以动态指派返回inner,静态指派返回undefined
注意:事件处理程序的返回值可以影响事件的默认行为,默认行为是事件发生,返回一个false值可以取消事件的默认行为。
所以在静态指派时,添加<p id="inner" onclick="return tt()">点击</p>,才能返回正确的boolean值给onclick。

注意:== 内容相等 === 类型,内容都相等

3.现代事件处理程序指派方法
if(obj.attachEvent){
//ie式
obj.attachEvent("onclick",tt)
obj.detachEvent("onclick",tt)
}
else{
//dom式,第三个参数标识处理程序是用在捕获阶段(true),还是用在冒泡阶段(false)
obj.addEventListener("click",tt,false);
obj.removeEventListener("click",tt,false);
}

三.事件对象
if(window.event){
var event=window.event;//ie式
}
else{
var event=arguments[0];//dom式
}

注意:获取键盘键值和获取键盘输入值
keydown关注键值 keypress关注输入值


keyCode charCode
IE keydown 键值 不支持

keypress 输入值 不支持
FF keydown 键值 0

keypress 0 输入值
分享到:
评论

相关推荐

    js事件模型

    JavaScript事件模型是JavaScript编程中非常重要的一个概念,它涉及到网页交互和用户操作的响应机制。在JavaScript中,事件是用户或浏览器对网页进行某种操作时触发的特定行为,例如点击按钮、滚动页面等。理解并掌握...

    javascript事件模型

    JavaScript 事件模型是Web开发中的核心概念,它定义了如何处理和响应用户或浏览器的交互。ECMAScript规范中的ECMA-357是与事件处理相关的一部分,它提供了JavaScript中处理事件的标准。 事件流是JavaScript事件模型...

    javascript事件模型介绍.doc

    javascript事件模型介绍.doc

    javascript事件模型介绍

    一、原始事件模型 其事件类型:分为”输入事件(如onclicki)”和”语义事件(如onsubmit)” 事件程序的注册可以以下几种方式: 1、JS代码作为HTML性质值 复制代码 代码如下:&lt;input type=”button” value=”Press me...

    javascript事件模型代码

    JavaScript事件模型是编程中一种重要的交互机制,它允许程序对用户操作或者其他系统事件做出响应。在JavaScript中,事件处理涉及到事件触发、事件监听和事件处理程序的执行等多个方面。本节我们将深入探讨JavaScript...

    javascript的三种事件模型.docx

    JavaScript 事件模型是网页交互的核心机制,允许JavaScript代码在特定的用户操作或系统事件发生时执行。本文主要探讨了JavaScript中的三种事件模型,这些模型与不同的浏览器和DOM版本有关。尽管存在差异,但通过一些...

    javascript事件模型实例分析

    JavaScript事件模型是前端编程中处理用户交互的核心机制,它允许开发者对用户触发的行为做出响应。在JavaScript中,事件模型经历了几个发展阶段,目前以DOM2级事件模型为主流,其定义了事件捕获和事件冒泡两个阶段。...

    【ASP.NET编程知识】ASP.NET的事件模型(很适合学习的文章).docx

    ASP.NET 事件模型详解 ...我们讨论了 ASP.NET 事件模型的生命周期、OnInit 和 OnLoad 方法的使用,以及 JavaScript 事件模型的三个阶段。希望本文能够帮助读者更好地理解 ASP.NET 和 JavaScript 事件模型的概念。

    three.js加载obj模型添加点击事件及其他

    在本文中,我们将深入探讨如何使用three.js库加载OBJ模型并为其...总的来说,使用three.js处理3D模型是一个涉及多方面技术的过程,包括模型加载、交互事件处理和3D渲染。不断学习和实践将帮助你更好地掌握这些技能。

    手写DOM事件模型

    在Web开发中,DOM(Document Object Model)事件模型是JavaScript与网页交互的关键。它允许我们监听、处理和触发各种用户或浏览器产生的事件,如点击、鼠标移动、键盘输入等。本篇文章将深入探讨如何通过原生...

    javascript大事模型介绍_.docx

    JavaScript事件模型是编程中至关重要的概念,特别是在网页交互和用户界面设计中。本文将详细介绍三种主要的事件模型:原始事件模型、DOM2事件模型以及IE事件模型,并探讨它们的差异和使用方法。 首先,原始事件模型...

    事件模型探究及配套源码

    本文将深入探讨事件模型的各个方面,包括函数指针的进化、Java、.NET(C#)、DOM与JavaScript以及Flex和ActionScript3的事件模型。 首先,函数指针进化论讲述了编程中处理函数引用的方式如何演变。早期的编程语言中...

    js事件详解-0-1-2级模型.pdf

    标题提到的“js事件详解-0-1-2级模型”涉及到了JavaScript中事件的分层模型。JavaScript事件模型是前端开发中处理用户交互的核心机制之一,主要包括了事件捕获、目标阶段和事件冒泡三个阶段,这个模型被广泛地理解为...

    使用threejs渲染养殖场模型源码,养殖场模型obj+mtl格式,threejs模型

    在本文中,我们将深入探讨如何使用Three.js库来渲染一个养殖场模型,该模型采用obj+mtl格式。Three.js是一个基于WebGL的JavaScript库,它允许开发者在浏览器中创建和展示三维图形。让我们一起深入了解Three.js的核心...

    Three.js模型包

    Three.js 是一个非常流行的JavaScript库,专用于在Web浏览器中创建和展示三维图形。它利用 WebGL 技术,使得在网页上实现交互式3D视觉效果成为可能,无需用户安装任何插件。这个"Three.js模型包"包含了各种示例使用...

    threejs给模型添加外部轮廓demo

    在3D可视化领域,Three.js是一个非常流行的JavaScript库,它为Web浏览器提供了强大的3D图形渲染功能。本示例“threejs给模型添加外部轮廓demo”着重于如何使用Three.js来为3D模型添加外部轮廓,以提升模型在场景中的...

    Three.js 三维模型(一)

    在本文中,我们将深入探讨Three.js,这是一个广泛使用的JavaScript库,用于在Web浏览器中创建和展示3D模型。Three.js是WebGL技术的便捷接口,它使得开发人员无需深入了解底层图形编程,就能轻松构建交互式的三维场景...

    智慧城市模型-threejs的模型文件

    而提到的“three.js”,则是一个基于WebGL的JavaScript库,用于在浏览器中创建三维图形。因此,这个压缩包很可能是包含了一系列用three.js开发的智慧城市三维模型的资源文件。 three.js是WebGL领域中非常流行的一个...

    three官网所有模型

    使用这些模型时,你需要了解如何在Three.js中设置相机、光源和场景,以及如何将模型与交互事件绑定,如点击、拖动等。同时,理解模型的单位系统、坐标系统以及如何调整其大小和位置至关重要。此外,你可能还需要对...

Global site tag (gtag.js) - Google Analytics