JavaScript事件详细讲解

2024-02-29 11:10:16

事件的概念

事件：指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。

一、事件流

1.事件流：描述的是在页面中接受事件的顺序

2.事件冒泡:由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）

3.事件捕获：最不具体的节点先接收事件，而最具体的节点应该最后接收事件

二、事件处理

1.HTML事件处理：直接添加到HTML结构中

2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性

3.DOM2级事件处理：

addEventListener("事件名","事件处理函数",布尔值)

true:事件捕获

false:事件冒泡

removeEventListener();

4.IE事件处理程序

attachEvent

detachEvent

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<!--<script>
function demo(){
alert("Hello HTML事件处理");
}
</script>-->
<!--<script>
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){alert("Hello DOM0级事件处理程序")};//被覆盖掉
btn1.onclick = function(){alert("Hello DOM0级事件处理程序2")};
btn1.onclick = function(){alert("Hello DOM0级事件处理程序3")};
</script>-->
<!--<script>
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1(){
alert("DOM2级事件处理程序1");
}
function demo2(){
alert("DOM2级事件处理程序2");
}
function demo3(){
alert("DOM2级事件处理程序3");
}
btn1.removeEventListener("click",demo2)
</script>-->
<script>
var btn1 = document.getElementById("btn1");
if(btn1.addEventListener){
btn1.addEventListener("click",demo);
}else if(btn1.attachEvent){
btn1.attachEvent("onclick",demo)
}else{
btn1.onclick = demo();
}
function demo(){
alert("Hello");
}
</script>
</body>
</html>

三、事件对象

1、事件对象：在触发DOM事件的时候都会产生一个对象

2、事件对象event:

type:获取事件类型

target：获取事件目标

stopPropagation():阻止事件冒泡

preventDefault():阻止事件默认行为

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
<button id="btn1">按钮</button>
<a href="http://www.baidu.com" id="aid">百度</a>
</div>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event){
// alert(event.type);
alert(event.target);
event.stopPropagation();//阻止事件冒泡
}
function showDiv(){
alert("div")
}
function showA(event){
// event.stopPropagation();
// event.preventDefault();
}
</script>
</body>
</html>

js和jquery实现监听键盘事件示例代码

项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e
详解Javascript事件驱动编程

一.基本概述 JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理. PS:这种方式和Java GUI中的事件监听机制很像,都是需要注册监听,然后再处理监听,只不过实现的方式不同而已. 二.事件驱动原理事件源:产生事件的地方(html元素) 事件:点击/鼠标操作/键盘操作等等事件对象:当某个事件发生时,可能会产生一个事件对象,该时间对象会封装好该时间的信息,传递给事件处理程序事件处理程序:响应用户事件的
js实现滑动触屏事件监听的方法

本文实例讲述了js实现滑动触屏事件监听的方法.分享给大家供大家参考.具体实现方法如下: function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; var span_top = $(span).offset().top; var start_left = $(span).offset().left; var start_top
js实现用户离开页面前提示是否离开此页面的方法（包括浏览器按钮事件）

本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件).分享给大家供大家参考.具体如下: 用户离开页面前,提示是否离开此页面(包括浏览器按钮事件) <script type="text/javascript"> window.onbeforeunload = function(){ return "您的文章尚未保存!"; } </script> 如果在退出页面时需要弹出对话框,提示用户将要退出页面,类似当设置某个功
理解JS事件循环

伴随着JavaScript这种web浏览器脚本语言的普及,对它的事件驱动交互模型,以及它与Ruby.Python和Java中常见的请求-响应模型的区别有一个基本了解,对您是有益的.在这篇文章中,我将解释一些JavaScript并发模型的核心概念,包括其事件循环和消息队列,希望能够提升你对一种语言的理解,这种语言你可能已经在使用但也许并不完全理解. 这篇文章是写给谁的? 这篇文章是针对在客户端或服务器端使用或计划使用JavaScript的web开发人员的.如果你已经精通事件循环,那么这篇文章的大部
javascript性能优化之事件委托实例详解

本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa
js网页滚动条滚动事件实例分析

本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig
实例讲解javascript注册事件处理函数

事件是javascript的核心内容,它的重要性这里就不多介绍了.触发事件之后就需要有事件处理函数去处理,例如我们可以定义当点击一个按钮之后,将一个div的背景设置为绿色,那么就先看一下如何实现此效果,代码实例如下: <html> <head> <meta charset=" utf-8"> <title>javascript如何注册事件处理函数</title> <style type="text/css&qu
浅谈javascript的Touch事件

js的touch事件,一般用于移动端的触屏滑动复制代码代码如下: $(function(){document.addEventListener("touchmove", _touch, false);}) function _touch(event){alert(1);} touchstart:当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove:当手指在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止滚动. to
JavaScript事件详细讲解

事件的概念事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间.我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码. 一.事件流 1.事件流:描述的是在页面中接受事件的顺序 2.事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 3.事件捕获:最不具体的节点先接收事件,而最具体的节点应该最后接收事件二.事件处理 1.HTML事件处理:直接添加到HTML结构中 2.DOM0级事件处理:把一个函数赋值给一个事件处理程序属性 3.DOM2级事
javaScript事件机制兼容【详细整理】

[添加事件机制] addEventListener 和 attachEvent [W3C] addEventListener('click' , function(){alert('Hello World')} ,false ) //W3C规范添加事件(IE8及以上不兼容): 第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获 [IE] attachEvent('onclick',function(){alert('Hello World')}
JavaScript事件方法(实例讲解)

废话不多说,直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text
JavaGUI事件监听机制超详细讲解

1.一个事件模型中有上对象:事件源,事件以及监听程序 2.事件监听机制: 事件源事件发生的地方事件要发生的事情事件处理针对发生的事情做出的处理方案事件监听把事件源和事件关联起来使用步骤: 新建一个组件(如 JButton) 将该组件添加到相应的面板(如 JFrame) 注册监听器以监听事件源产生的事件(如通过ActionListener来响应用户点击按钮) 定义处理事件的方法(如在ActionListener中的actionPe
关于编写性能高效的javascript事件的技术

如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题.几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端性能的书籍,轰动了整个web开发技术界,让神秘的web前端优化问题成为了大街的白菜,web前端优化变成了菜鸟和大牛都能回答的简单问题,当整个业界都知道了惊天秘密的答案,那么现有的优化技术已经不能对你开发的网站产生的质的飞越,为了让我们开发的网站性能比别人的网站更加优秀,我们需要更加深入的独立思考,储备更加优秀的技能. Javascript里的事件系统是我想到的第一个突破
超详细讲解Java秒杀项目登陆模块的实现

目录一.项目前准备 1.新建项目 2.导入依赖 3.执行sql脚本 4.配置yml文件 5.在启动类加入注解 6.自动生成器二.前端构建 1.导入layui 2.将界面放到template 3.在js目录下新建目录project 4.新建controller类三.MD5加密 1.导入帮助包与exception包 2.新建vo类 3.登录方法: 4.密码加密四. 全局异常抓获 1.给实体类userVo加入注解 2.导入帮助包validate,异常抓获 3.在UserController类方
JavaScript 事件冒泡应用实例分析

然而,在今天一些大型的WEB交互项目中,比如大型的WebGame项目,JavaScript事件冒泡影响是值得重视的.本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项. 如果你对JavaScript事件冒泡还没有什么印象,不妨先看看我之前写的一篇博客<JavaScript事件冒泡简介及应用>.本文讲究实用,不在对JavaScript事件冒泡基础知识进行过多的阐述. 在文章开始之前,现在先看看下面这样一个需求:下面HTML假设描述的是一个WebGame项目包裹栏(玩过网游的人
javascript兼容性(实例讲解)

1.事件冒泡: //取消冒泡 if(e.stopPropagation){ e.stopPropagation();//w3c定义的APIbiaozhun }else{ e.cancelBubble=true;//兼容IE 6,7,8浏览器 } 2.获取某个元素的CSS属性值: //获取某个元素的CSS属性值 function getStyle(element,stylename){ if(element.currentStyle){ //IE return element.currentSty
详解javascript事件冒泡

事件是javascript中的核心内容之一,在对事件的应用中不可避免的要涉及到一个重要的概念,那就是事件冒泡,在介绍事件冒泡之前,先介绍一下另一个重要的概念事件流: 一.什么是事件流: 文档对象模型(DOM)是一个树形结构,可以形象的用下图表示. 如果一个html元素触发事件,那么这个事件就会在DOM树中的触发节点和根节点之间按照一定的顺序传播,所有经过的节点都会接收到被触发的事件,这个传播过程被称之为事件流.按照事件的传播顺序,可以将其分为两类,一种是事件冒泡,一种是事件捕获,这里就涉及到本章
javascript事件模型介绍

一.原始事件模型其事件类型:分为"输入事件(如onclicki)"和"语义事件(如onsubmit)" 事件程序的注册可以以下几种方式: 1.JS代码作为HTML性质值复制代码代码如下: <input type="button" value="Press me" onclick="alert('thanks');" 2.事件处理程序作为JS属性附注:文档中的每个HTML元素在文档树中都有一个相

JavaScript事件详细讲解

相关推荐

随机推荐