深入理解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
#div1{
width: 300px;;
height: 300px;
background-color: powderblue;
}
#div2{
width: 200px;
height: 200px;
background-color: deeppink;
}
#div3{
width: 100px;
height: 100px;
background-color:#A9A9A9;
}
//html
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<a href="01-事件笔记.html" rel="external nofollow" onclick="func()">超链接</a>
div1.addEventListener("click",function(){
console.log("div1 click");
},false);
div2.addEventListener("click",function(){
console.log("div2 click");
},false);
div3.addEventListener("click",function(){ //原来的顺序是：3-->2-->1。
// myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
console.log("div3 click");
},false);
结果（事件冒泡）（由小到大div3-》div2-》div1）：
div1.addEventListener("click",function(){
console.log("div1 click");
},true);
div2.addEventListener("click",function(){
console.log("div2 click");
},true);
div3.addEventListener("click",function(){
// myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
console.log("div3 click");
},true);
结果(事件捕获)（由小到大div3-》div2-》div1）：
//依然遵循事件冒泡
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之前
}
}
总结
以上所述是小编给大家介绍的JS的事件绑定、事件流模型，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章:
- javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
- JS 事件绑定、事件监听、事件委托详细介绍
- js事件绑定快捷键以ctrl+k为例
- Node.js中使用事件发射器模式实现事件绑定详解
- JS的事件绑定深入认识
- js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
- ExtJs事件机制基本代码模型和流程解析
相关推荐
-
JS 事件绑定、事件监听、事件委托详细介绍
在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件
-
js事件绑定快捷键以ctrl+k为例
js代码 <html> <head> <script type="text/javascript"> window.onload=function(){ HotKeyHandler.Init(); } var HotKeyHandler={ currentMainKey:null, currentValueKey:null, Init:function(){ HotKeyHandler.Register(0,"K",functio
-
JS的事件绑定深入认识
一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi
-
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
复制代码 代码如下: /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if (!event) /* For IE. */ event = window.event; if (event.w
-
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,
-
ExtJs事件机制基本代码模型和流程解析
代码实现的目的:为一个自定义的类的某个属性在使用它时候,触发某个事件. 该程序的效果:点击输入按钮,弹出一个脚本提示输入框让用户输入他的姓名,确定后,用户录入的姓名会显示在页面的姓名文本框中,并且页面标题变成和姓名一致,接着再弹出脚本提示输入框让用户输入性别,录入完毕并点击确定后,用户录入的性别将会显示在页面的性别文本框里. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo
-
Node.js中使用事件发射器模式实现事件绑定详解
在Node里,很多对象都会发射事件.比如,一个TCP服务器,每当有客户端请求连接就会发射"connect"事件,又比如,每当读取一整块数据,文件系统就会发射一个"data"事件.这些对象在Node里被称为事件发射器(event emitter).事件发射器允许程序员订阅他们感兴趣的事件,并将回调函数绑定到相关的事件上,这样每当事件发射器发射事件时回调函数就会被调用.发布/订阅模式非常类似传统的GUI模式,比如按钮被点击时程序就会收到相应的通知.使用这种模式,服务端程
-
Cpage.js给组件绑定事件的实现代码
Cpage.js是一款轻量级的Mvvm框架,使用TypeScript(JavaScript的超集)开发. 内置模板引擎,路由,指令,http,dom等模块.可以方便地进行组件化开发,语法统一.易用,不依赖于第三方框架,适合中小项目开发. Cpage.js不仅可以给普通元素绑定事件,也可以给组件绑定事件! 首先,我们可以定义一个组件header var header = Cpage.component({ name: 'header', components: [], template: `<di
-
JS中动态添加事件(绑定事件)的代码
两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 复制代码 代码如下: var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); } 第二种情况 复制代码 代码如下: var tb = document.getElementById("tab1"); if(window.addEventListener){
-
Vue.JS入门教程之事件监听
你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel: <div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <a v-on
-
详解Vue的数据及事件绑定和filter过滤器
目录 Vue数据绑定 单向绑定 双向绑定 值绑定 事件绑定 事件处理器 事件修饰符 键值修饰符 class与style绑定 绑定class 绑定内联样式 filter过滤器 总结 Vue数据绑定 单向绑定 将Model绑定到View后,当用JavaScript代码更新Model时,View会自动更新.(模型——>视图) 单向绑定的实现过程是: 所有数据只保存一份. 一旦数据变化,就去更新页面(只有data——>DOM,没有DOM——>data) 若用户在页面上做了更新,就手动收集(双向绑
-
JavaScript 事件绑定及深入
事件绑定分为两种: 一种是传统事件绑定(内联模型/脚本模型);上一章内容; 一种是现代事件绑定(DOM2级模型);现代事件绑定在传统事件绑定基础上提供了更强大的功能; 一 传统事件绑定的问题 // 脚本模型将一个函数赋值给一个事件处理函数; var box = document.getElementById('box'); // 获取元素; box.onclick = function(){ // 元素点击触发事件; alert('Lee'); } // 问题一:一个事件处理函数触发两次事件;
-
深入理解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只能捕获数字,字母,符号键,
-
理解JS绑定事件
本文为大家详细分析了JS绑定事件,供大家参考,具体内容如下 绑定事件有兼容性问题,在IE早期版本中使用的是obj.attachEvent(),而其他浏览器使用的则是addEventListener(). 这两个方法都有三个参数,分别为:事件类型,事件函数,最后一个是布尔值,true或者是false. true表示在事件捕获阶段执行,false表示在事件冒泡阶段执行. 由于IE只支持事件冒泡,所以同大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,即默认为"false" 这样可以最
-
Vue快速理解事件绑定是什么
目录 一.监听事件 二.事件修饰符 1.stop修饰符阻止事件冒泡 2.capture修饰符 3.self修饰符 4.prevent修饰符 5.键盘事件修饰符 6.鼠标事件修饰符 一.监听事件 监听事件一般使用的是v-on指令,可以在JavaScript代码中将v-on直接将写在代码上面,语法是:v-on:你所定的事件名=‘代码’,v-on指令可以接收到函数的调用,并且将其分成是无参数调用函数还是有参数调用函数.当然v-on函数可以简写成@+事件名的写法,很方便. 在初始化vue对象的时候要申明