首页 / JAVASCRIPT / 如何使用JS事件绑定、事件流模型

如何使用JS事件绑定、事件流模型

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何使用JS事件绑定、事件流模型，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6105字，纯文字阅读大概需要9分钟。

内容图文

这次给大家带来如何使用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）：

如何使用JS事件绑定、事件流模型 - 文章图片

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）：

如何使用JS事件绑定、事件流模型 - 文章图片

//依然遵循事件冒泡
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之前  
  }
}

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

内容总结

以上是互联网集市为您收集整理的如何使用JS事件绑定、事件流模型全部内容，希望文章能够帮你解决如何使用JS事件绑定、事件流模型所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/288856.html

来源：【匿名】

【上一篇】怎样使用垃圾回收器【下一篇】javascript 怎么调用php方法

更多 ►

【如何使用JS事件绑定、事件流模型】教程文章相关的互联网学习教程文章

JavaScript addEventListener()事件监听方法【代码】

文章链接：https://www.cnblogs.com/jc2182/p/11307165.htmladdEventListener()方法将事件处理程序附加到指定的元素。addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。addEventListener()方法可以更容易地控制...

JavaScript事件处理学习（2）—单选按钮复选框下拉框操作【代码】【图】

1 <html>2 <head>3 <title>dsd</title>4 <script language="JavaScript">5function show1(){6var name=document.myform.name.value //保存姓名 7 alert("姓名"+name);8var sex; //保存性别 9if(document.myform.sex[0].checked){ //如果第一个元素被选中10 sex=document.myform.sex[0].value; 11 }else {sex=document.myform.sex[1].value;} 12 alert("性别"+sex); 13var ints=...

【Javascript】重新绑定默认事件【代码】

更多内容，请移步 JSCON-简时空在有一种场景下，你想先屏蔽掉默认的系统事件，而在特定条件下又重新绑定回去。【场景】H5页面，动画欢迎界面，共6帧；想在前5帧中屏蔽掉默认的touchmove事件，在第6帧是表单页面，想恢复系统默认的touchmove——这样用户可以自由拖拽页面，浏览完整的表单信息原生JS：目前我所能想到的最简单粗暴有效的方法是这样的：（没错，it works） document.ontouchmove = function(e){returnfalse;}...

javaScript事件【代码】

JavaScript通过事件与HTML交互。事件流事件流规定了事件的触发规则和顺序。DOM2规定了事件流包括三个阶段：事件捕获 -> 目标触发除 -> 事件冒泡。DOM2规定在事件捕获阶段不应调用事件处理程序，不过各大浏览器都不鸟它。DOM2级的事件处理程序操作函数对：addEventListener和removeEventListener的第三个参数则把这种事变成了DIY，这是一种妥协，同时让初学者认为dom的管理一片混乱。var btn = document.getElementById("btn"); btn...

JavaScript 触发click事件兼容FireFox，IE 和 Chrome【代码】

解决了火狐下无法触发click事件的问题<script language="javascript">function test2(name){if(document.all){document.getElementById(name).click();}else{var evt = document.createEvent("MouseEvents");evt.initEvent("click", true, true);document.getElementById(name).dispatchEvent(evt);}} </script><a href="#" id="a3" onclick="location.href = ‘http://www.baidu.com‘;">baidu</a> <input type="button" value="c...

javascript事件代理(delegate)原理解析【代码】【图】

什么是事件代理？首先得知道什么是事件，并且弄清楚事件流，才能真正明白事件代理原理。一、什么是事件？　　javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。如onload、onclick、onmouseup、onmousedown... 。二、事件流　　DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，...

JavaScript键盘事件常见用法实例分析

JavaScript 键盘事件有以下3种keydown键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。keypress键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。keyup键盘按键弹起，可以捕获组合键。全局事件对象eventevent.ctrlKey功能键”ctrl”键是否按下。event.altKey功能键”alt”键是否按下。event.shiftKey功能键”shift”键是否按下。event.keyCode键盘按键键码。event.char...

JavaScript事件对象EventUtil【代码】

JS中事件对象有很多种，兼容性参差不齐，这个对象封装了大部分所需的各种方法var EventUtil={addHandler:function(element,type,handler){ //添加事件if(element.addEventListener){ element.addEventListener(type,handler,false); //使用DOM2级方法添加事件}elseif(element.attachEvent){ //使用IE方法添加事件element.attachEvent("on"+type,handler);}else{element["on"+type]=handler; //使用DO...

JavaScript事件(含Demo)【代码】

主要事件:　　onclick　　鼠标单击事件　　onmouseover 鼠标经过事件　　onmouseout　　鼠标移开事件　　onchange　　文本框内容改变事件　　onselect　　文本框内容被选中事件　　onfocus　　光标聚集　　onblur　　光标离开　　onload　　网页导入　　onunload　关闭网页 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title> 事件</title> 6<script type="text/javascript"> 7function count(){8 9var result="...

JavaScript事件处理程序

一、HTML事件处理程序作用域为元素所在的作用域function showMessage(){　　alert("showMessage");}<input type="text" value="Click" onclick="alert(‘Click‘)" ><input type="text" value="Click" onclick="showMessage()" > 二、DOM0级事件处理程序作用域为元素所在的作用域var btn = document.getElementById("btn");btn.onclock = function(){　　alert("click");} //删除事件btn.onclick = null;三、DOM2级事件处理程序作用...

JavaScript - 函数、对象、事件、字符串（三）【代码】

JS 函数JS 函数是被设计为执行特定任务的代码块JS 函数会在某代码调用它时被执行JS 函数语法JS 函数通过 function 关键词进行定义，其后是函数名和括号()函数名可包含字母、数字、下划线、美元符号（规则与变量名相同）括号内是参数列表，多个参数之间使用逗号分隔：(参数1，参数2，参数3...)由函数执行的代码被放置在花括号中：{...}function functionName(var1,var2,var3,...){//执行代码//return ... } JS 函数调用当事件发生时...

JavaScript利用闭包循环绑定事件【代码】

我们经常在做前端面试题的时候，会遇到循环绑定事件后，输出打印结果，很多人总是搞不清楚，今天借此机会跟大家梳理一下闭包相关作用。1.首先我们举一个简单的例子。html部分：<a href="#">首页</a> <a href="#">作品</a> <a href="#">文章</a> <a href="#">工具</a> <a href="#">招聘</a> <a href="#">赛事</a> <a href="#">更多</a>js部分：var a = document.getElementsByTagName("a"); for(var i =0; i<a.le...

javascript阻止事件冒泡和浏览器的默认行为【代码】

1.阻止事件冒泡,使成为捕获型事件触发机制.1function stopBubble(e) { 2//如果提供了事件对象，则这是一个非IE浏览器 3if ( e && e.stopPropagation ) 4//因此它支持W3C的stopPropagation()方法 5 e.stopPropagation(); 6else7//否则，我们需要使用IE的方式来取消事件冒泡 8 window.event.cancelBubble = true; 9 }2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为. 1//阻止浏...

Js事件分发与DOM事件流【图】

这一篇比较透彻：https://www.jianshu.com/p/dc1520327022 点击了目标节点后，捕获阶段里事件会从外向目标传递；到了目标阶段，捕获和冒泡的执行顺序按照事件被定义的先后顺序执行；最后冒泡阶段，又会由目标向外进行传递。原文：https://www.cnblogs.com/youzi-xuchongyou/p/11636244.html

[原创]Javascript 利用mousetrap.js进行键盘事件操作【图】

我们日常开发中，会遇到js的键盘操作，例如回车提交表单之类的。或者按下某个键执行某个方法。无意中发现一个大小不到4K的js文件，它非常方便的操作键盘事件。自己也尝试了一下：具体代码如下：详情可以去其逛网查看其API并下载，地址：http://craig.is/killing/mice<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3...

首页 / JAVASCRIPT / 如何使用JS事件绑定、事件流模型

如何使用JS事件绑定、事件流模型

内容导读

内容图文

二、事件绑定模型

内容总结

内容备注

内容手机端

【如何使用JS事件绑定、事件流模型】教程文章相关的互联网学习教程文章

模型 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程