JS事件绑定、事件流模型案例分析-js教程-PHP中文网

二、事件绑定模型" >二、事件绑定模型

首页

web前端

js教程

JS事件绑定、事件流模型案例分析

php中世界最好的语言

May 22, 2018 am 09:52 AM

javascript 案例分析模型

这次给大家带来JS事件绑定、事件流模型案例分析，使用JS事件绑定、事件流模型的注意事项有哪些，下面就是实战案例，一起来看一下。

一、JS事件

（一）JS事件分类

1.鼠标事件：

click/dbclick/mouseover/mouseout

登录后复制

2.HTML事件：

 onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll

登录后复制

3.键盘事件：

keydown：键盘按下时触发
keypress：键盘按下并抬起的瞬间触发。
keyup：键盘抬起触发

[注意事项]

①执行顺序：keydown keypress keyup
②keypress只能捕获数字，字母，符号键，而不能捕获功能键。
③长按时循环执行keydown--keypress
④有keydown，并不一定有keyup，当长按时焦点失去，将不再触发keyup
⑤keypress区分大小写，keydown，kewup不区分。

4.事件因子：

当触发一个事件时，该事件将向事件所调用的函数中，默认传入一个参数，

这个参数就是一个事件因子，包含了该事件的各种详细信息。

 document.onkeydown=function(e){
 console.log(e);
 }
document.onkeydown=function(){
console.log(window.event);
}

登录后复制

//兼容浏览器的写法：
document.onkeydown=function(e){
e==e||Window.event;
var Code=e.keyCode||e.which||e.charCode;
if(code==13){
//回车
}
}

登录后复制

5.如何确定键盘按键？

①再出发的函数中，接收事件因子e。
②可以使用e.key直接去到按下的按键字符（不推荐使用）。
③一次可以使用keyCode/which/charCode取到按键的ASCII码值。

(兼容各种浏览器的写法)

 var Code=e.keyCode||e.which||e.charCode;
//判断组合键
var isAlt=0,isEnt=0;
document.onkeyup=function(e){
if(e.keyCode==18){
isAlt=1;
}      
if(e.keyCode==13){
isEnt=1;
}    
if(isAlt==1&&isEnt==1){
alert("同时按下Alt和Enter键");
}
}
document.onkeyup=function(){
console.log("keyup");
}
document.onkeypress=function(){
console.log("keypress");
}
document.onkeydown=function(){
console.log("keydown");
}
document.onkeypress=function(){
console.log(window.event);
}
//判断是否按下了回车键
document.onkeydown=function(e){
var code=e.keyCode;
if(code==13){
alert("你输入的是回车键");
}
}

登录后复制

二、事件绑定模型

（一）DOM0事件模型

绑定注意事项：

①使用window.onload加载完成后进行绑定。

window.onload =function(){//事件}

②放在body后面进行绑定。

//body内容
<body>
  <button onclick="func()">内联模型绑定</button>
  <button id="btn1">哈哈哈哈</button>
  <button id="btn2">DOM2模型绑定</button>
  <button id="btn3">取消DOM2</button>
</body>

登录后复制

1.内联模型（行内绑定）：将函数名直接作为html标签中属性的属性值。

<button onclick="func()">内联模型绑定</button>

登录后复制

缺点：不符合w3c中关于内容与行为分离的基本规范。

2.脚本模型（动态绑定）：通过在JS中选中某个节点，然后给节点添加onclick属性。

document.getElementById("btn1")=function(){}

登录后复制

优点：符合w3c中关于内容与行为分离的基本规范，实现html与js的分离。
缺点：同一个节点只能添加一次同类型事件，如果添加多次，最后一个生效。

document.getElementById("btn1").onclick=function(){
  alert(1234);  
}
document.getElementById("btn1").onclick=function(){
  alert(234);  
}//重复的只能出现最近的一次

登录后复制

3.DOM0共有缺点：通过DOM0绑定的事件，一旦绑定将无法取消。

document.getElementById("btn3").onclick=function(){//不能取消匿名函数
  if(btn.detachEvent){
    btn.detachEvent("onclick",func1);
  }else{
    btn.removeEventListener("click",func1);
  }
    alert("取消DOM2");
}

登录后复制

（二）DOM2事件模型

1.添加DOM2事件绑定：

①IE8之前，使用.attachEvent("onclick",函数);
②IE8之后，使用.addEventListener("click",函数，true/false);
参数三：false（默认）表示事件冒泡，传入true表示事件捕获。
③兼容所有浏览器的处理方式：

 var btn=document.getElementById("btn1");
 if(btn.attachEvent){
 btn.attachEvent("onclick",func1);//事件，事件需要执行的函数IE8可以
 }else{
 btn.attachEventListener("click",func1);
 }

登录后复制

2.DOM2绑定的优点：

①同一个节点，可以使用DOM2绑定多个同类型事件。
②使用DOM2绑定的事件，可以有专门的函数进行取消。
3.取消事件绑定：
①使用attachEvent绑定，要用detachevent取消。
②使用attachEventListener绑定，要用removeEventListenter取消。
注意：如果DOM2绑定的事件，需要取消，则绑定事件时，回调函数必须是函数名，
而不能是匿名函数，因为取消事件时，取消传入函数名进行取消。

三、JS事件流模型

（一）JS中的事件流模型

1. 事件冒泡(fasle/不写)：当触发一个节点的事件是，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。
2. 事件捕获(true)：当初发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。
3. 什么时候事件冒泡？什么时候事件捕获？
① 当使用addEventListener绑定事件，第三个参数传为true时表示事件捕获；
② 除此之外的所有事件绑定均为事件冒泡。

4. 阻止事件冒泡：

① IE10之前，e.cancelBubble = true;
② IE10之后，e.stopPropagation();

5. 阻止默认事件：

① IE10之前：e.returnValue = false;
② IE10之后：e.preventDefault();

//css
#p1{
  width: 300px;;
  height: 300px;
  background-color: powderblue;
}
#p2{
  width: 200px;
  height: 200px;
  background-color: deeppink;
}
#p3{
  width: 100px;
  height: 100px;
  background-color:#A9A9A9;
}
//html
<p id="p1">
  <p id="p2">
    <p id="p3"></p>
  </p>
</p>
<a href="01-事件笔记.html" rel="external nofollow" onclick="func()">超链接</a>
p1.addEventListener("click",function(){
  console.log("p1 click");
},false);
p2.addEventListener("click",function(){
  console.log("p2 click");
},false);
p3.addEventListener("click",function(){ //原来的顺序是：3-->2-->1。
//  myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
  console.log("p3 click");
},false);

登录后复制

结果（事件冒泡）（由小到大p3-》p2-》p1）：

p1.addEventListener("click",function(){
  console.log("p1 click");
},true);
p2.addEventListener("click",function(){
  console.log("p2 click");
},true);
p3.addEventListener("click",function(){ 
//  myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
  console.log("p3 click");
},true);

登录后复制

结果(事件捕获)（由小到大p3-》p2-》p1）：

//依然遵循事件冒泡
document.onclick=function(){
  console.log("document click")
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
   e = e || window.event;
  if (e.stopPropagation) {
     e.stopPropagation(); //IE10以后 
  } else {
     e.cancelBubble = true; //IE10之前
   }
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
   e = e || window.event;
  if (e.stopPropagation) {
     e.stopPropagation(); //IE10以后 
  } else {
     e.cancelBubble = true; //IE10之前
   }
}
//阻止默认事件
function eventHandler(e) {
  e = e || window.event;
// 防止默认行为 
   if (e.preventDefault) {
     e.preventDefault(); //IE10之后
  } else {
     e.returnValue = false; //IE10之前  
  }
}

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7333

Java教程

1627

CakePHP 教程

1351

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

全球最强开源 MoE 模型来了，中文能力比肩 GPT-4，价格仅为 GPT-4-Turbo 的近百分之一 May 07, 2024 pm 04:13 PM

想象一下，一个人工智能模型，不仅拥有超越传统计算的能力，还能以更低的成本实现更高效的性能。这不是科幻，DeepSeek-V2[1]，全球最强开源MoE模型来了。DeepSeek-V2是一个强大的专家混合（MoE）语言模型，具有训练经济、推理高效的特点。它由236B个参数组成，其中21B个参数用于激活每个标记。与DeepSeek67B相比，DeepSeek-V2性能更强，同时节省了42.5%的训练成本，减少了93.3%的KV缓存，最大生成吞吐量提高到5.76倍。DeepSeek是一家探索通用人工智

替代MLP的KAN，被开源项目扩展到卷积了 Jun 01, 2024 pm 10:03 PM

本月初，来自MIT等机构的研究者提出了一种非常有潜力的MLP替代方法——KAN。KAN在准确性和可解释性方面表现优于MLP。而且它能以非常少的参数量胜过以更大参数量运行的MLP。比如，作者表示，他们用KAN以更小的网络和更高的自动化程度重现了DeepMind的结果。具体来说，DeepMind的MLP有大约300,000个参数，而KAN只有约200个参数。KAN与MLP一样具有强大的数学基础，MLP基于通用逼近定理，而KAN基于Kolmogorov-Arnold表示定理。如下图所示，KAN在边上具

你好，电动Atlas！波士顿动力机器人复活，180度诡异动作吓坏马斯克 Apr 18, 2024 pm 07:58 PM

波士顿动力Atlas，正式进入电动机器人时代！昨天，液压Atlas刚刚「含泪」退出历史舞台，今天波士顿动力就宣布：电动Atlas上岗。看来，在商用人形机器人领域，波士顿动力是下定决心要和特斯拉硬刚一把了。新视频放出后，短短十几小时内，就已经有一百多万观看。旧人离去，新角色登场，这是历史的必然。毫无疑问，今年是人形机器人的爆发年。网友锐评：机器人的进步，让今年看起来像人类的开幕式动作、自由度远超人类，但这真不是恐怖片？视频一开始，Atlas平静地躺在地上，看起来应该是仰面朝天。接下来，让人惊掉下巴

谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理训练最快选择 Apr 01, 2024 pm 07:46 PM

谷歌力推的JAX在最近的基准测试中性能已经超过Pytorch和TensorFlow，7项指标排名第一。而且测试并不是在JAX性能表现最好的TPU上完成的。虽然现在在开发者中，Pytorch依然比Tensorflow更受欢迎。但未来，也许有更多的大模型会基于JAX平台进行训练和运行。模型最近，Keras团队为三个后端（TensorFlow、JAX、PyTorch）与原生PyTorch实现以及搭配TensorFlow的Keras2进行了基准测试。首先，他们为生成式和非生成式人工智能任务选择了一组主流

AI颠覆数学研究！菲尔兹奖得主、华裔数学家领衔11篇顶刊论文｜陶哲轩转赞 Apr 09, 2024 am 11:52 AM

AI，的确正在改变数学。最近，一直十分关注这个议题的陶哲轩，转发了最近一期的《美国数学学会通报》（BulletinoftheAmericanMathematicalSociety）。围绕「机器会改变数学吗？」这个话题，众多数学家发表了自己的观点，全程火花四射，内容硬核，精彩纷呈。作者阵容强大，包括菲尔兹奖得主AkshayVenkatesh、华裔数学家郑乐隽、纽大计算机科学家ErnestDavis等多位业界知名学者。AI的世界已经发生了天翻地覆的变化，要知道，其中很多文章是在一年前提交的，而在这一

FisheyeDetNet：首个基于鱼眼相机的目标检测算法 Apr 26, 2024 am 11:37 AM

目标检测在自动驾驶系统当中是一个比较成熟的问题，其中行人检测是最早得以部署算法之一。在多数论文当中已经进行了非常全面的研究。然而，利用鱼眼相机进行环视的距离感知相对来说研究较少。由于径向畸变大，标准的边界框表示在鱼眼相机当中很难实施。为了缓解上述描述，我们探索了扩展边界框、椭圆、通用多边形设计为极坐标/角度表示，并定义一个实例分割mIOU度量来分析这些表示。所提出的具有多边形形状的模型fisheyeDetNet优于其他模型，并同时在用于自动驾驶的Valeo鱼眼相机数据集上实现了49.5%的mAP

特斯拉机器人进厂打工，马斯克：手的自由度今年将达到22个！ May 06, 2024 pm 04:13 PM

特斯拉机器人Optimus最新视频出炉，已经可以在厂子里打工了。正常速度下，它分拣电池（特斯拉的4680电池）是这样的：官方还放出了20倍速下的样子——在小小的“工位”上，拣啊拣啊拣：这次放出的视频亮点之一在于Optimus在厂子里完成这项工作，是完全自主的，全程没有人为的干预。并且在Optimus的视角之下，它还可以把放歪了的电池重新捡起来放置，主打一个自动纠错：对于Optimus的手，英伟达科学家JimFan给出了高度的评价：Optimus的手是全球五指机器人里最灵巧的之一。它的手不仅有触觉

Yolov10：详解、部署、应用一站式齐全！ Jun 07, 2024 pm 12:05 PM

一、前言在过去的几年里，YOLOs由于其在计算成本和检测性能之间的有效平衡，已成为实时目标检测领域的主导范式。研究人员探索了YOLO的架构设计、优化目标、数据扩充策略等，取得了显着进展。同时，依赖非极大值抑制（NMS）进行后处理阻碍了YOLO的端到端部署，并对推理延迟产生不利影响。在YOLOs中，各种组件的设计缺乏全面彻底的检查，导致显着的计算冗余，限制了模型的能力。它提供了次优的效率，以及相对大的性能改进潜力。在这项工作中，目标是从后处理和模型架构两个方面进一步提高YOLO的性能效率边界。为此

See all articles

JS事件绑定、事件流模型案例分析

二、事件绑定模型

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题