Home > Article > Web Front-end > JS event binding and event flow model case analysis
JS event binding and event flow model case analysis
- php中世界最好的语言Original
- 2018-05-22 09:52:501159browse
This time I will bring you a case analysis of JS event binding and event flow model. What are the precautions when using JS event binding and event flow model. The following is a practical case. Let’s take a look. .
1. JS events
(1) JS event classification
1. Mouse event :
click/dbclick/mouseover/mouseout
2. HTML event:
onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll
3. Keyboard event:
keydown: triggered when the keyboard is pressed
keypress: when the keyboard is pressed and lifted Triggered instantly.
keyup: trigger when keyboard is raised
[Notes]
①Execution sequence: keydown keypress keyup
②keypress can only capture numbers, letters, and symbol keys, but not functions key.
③When long pressing, execute keydown--keypress in loop
④If there is keydown, there is not necessarily keyup. When the focus is lost when long pressing, keyup will no longer be triggered
⑤keypress is case-sensitive, keydown, kewup are not different.
4. Event factor:
When an event is triggered, the event will pass in a parameter by default to the function called by the event.
This parameter is a Event factors contain various detailed information of the event.
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. How to determine the keyboard keys?
①In the re-starting function, receive the event factor e.
② You can use e.key to directly go to the pressed key character (not recommended).
③You can use keyCode/which/charCode to get the ASCII code value of the key.
(Compatible with writing methods of various browsers)
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("你输入的是回车键");
}
}
2. EventBinding model
(1) DOM0 event model
Notes on binding:
①Use window.onload to bind after loading is complete.
window.onload =function(){//Event}
②Place it behind the body for binding.
//body内容 6c04bd5ca3fcae76e30b72ad730ca86d ac6d94d45af08d62f601c60315a41ead内联模型绑定65281c5ac262bf6d81768915a4a77ac0 2b35a4bd2f218298ed835abd930b5962哈哈哈哈65281c5ac262bf6d81768915a4a77ac0 fa1cdecaa9f71d90ec149b54d5226970DOM2模型绑定65281c5ac262bf6d81768915a4a77ac0 4318a98e4d103d446d721f73b458035e取消DOM265281c5ac262bf6d81768915a4a77ac0 36cc49f0c466276486e50c850b7e4956
1. Inline model (inline binding): Use the function name directly as the attribute value of the attribute in the html tag.
ac6d94d45af08d62f601c60315a41ead内联模型绑定65281c5ac262bf6d81768915a4a77ac0
Disadvantages: It does not comply with the basic specifications of the w3c on the separation of content and behavior.
2. Script model (dynamic binding): Select a node in JS and then add the onclick attribute to the node.
document.getElementById("btn1")=function(){}
Advantages: It complies with the basic specifications of the w3c on the separation of content and behavior, and realizes the separation of html and js.
Disadvantages: The same type of event can only be added once to the same node. If added multiple times, the last one will take effect.
document.getElementById("btn1").onclick=function(){
alert(1234);
}
document.getElementById("btn1").onclick=function(){
alert(234);
}//重复的只能出现最近的一次
3.DOM0 has a common shortcoming: events bound through DOM0 cannot be canceled once bound.
document.getElementById("btn3").onclick=function(){//不能取消匿名函数
if(btn.detachEvent){
btn.detachEvent("onclick",func1);
}else{
btn.removeEventListener("click",func1);
}
alert("取消DOM2");
}
(2) DOM2 event model
1. Add DOM2 event binding:
①Before IE8, use .attachEvent("onclick", function);
②After IE8, use .addEventListener("click", function, true/false);
Parameter three: false (default) means event bubbling, passing in true means event capture.
③ Compatible with all browser processing methods:
var btn=document.getElementById("btn1");
if(btn.attachEvent){
btn.attachEvent("onclick",func1);//事件，事件需要执行的函数IE8可以
}else{
btn.attachEventListener("click",func1);
}
2. Advantages of DOM2 binding:
① The same node can be bound to multiple events of the same type using DOM2.
②Events bound using DOM2 can be canceled with special functions.
3. Cancel event binding:
① Use attachEvent to bind and use detachevent to cancel.
②Use attachEventListener to bind and use removeEventListenter to cancel.
Note: If the event bound to DOM2 needs to be canceled, when binding the event, the callback function must be a function name,
and cannot be an anonymous function, because when the event is canceled, the callback function Enter the function name to cancel.
3. JS event flow model
(1) Event flow model in 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
1543e05224819c12ab8136df28db3a2e
5daf0f4c91d62e4731d4aa9ee9a1b709
7280f502980e0d5ec16910135c6538dc94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
6b4fa9013772f692d8c074f2d220e434超链接5db79b134e9f6b82c0b36e0489ee08ed
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中文网其它相关文章！
推荐阅读：
The above is the detailed content of JS event binding and event flow model case analysis. For more information, please follow other related articles on the PHP Chinese website!