<div class="a1"><div class="a2"><div class="a3"></div></div>
</div>
当我们点击a3时，则点击事件传递开始，顺序为a1->a2->a3->a3->a2->a1
前半部分a1->a2->a3我们称之为捕获过程
后半部分a3->a2->a1我们称之为冒泡过程
在不使用任何框架下，通过原生js的addEventListener方法给Dom添加监听事件。
addEventListener（event，fn，useCapture），其中event为click，blur，focus等事件，fn为函数，useCapture默认不传为false，用来控制是否捕获触发。
js中通过stopPropagation来阻止事件的继续传递，若在a2添加stopPropagation，则只会执行a1->a2
e.currentTarget 指向捕获事件的对象； e.target 指向发生这个事件的对象
<script>var a1 = document.querySelector(".a1");a3.addEventListener("click",clickHandler);function clickHandler(e){console.log(e.currentTarget); //a1console.log(e.target); //a3}</script>
事件委托 将子元素或者后代元素的事件委托给父元素减少事件侦听的增加，防止内存泄漏,内存泄漏是指当创建多个对象后并没有回收，可以给变量null进行堆的回收，每隔一段时间浏览器就会有垃圾回收车进行回收内存。
事件委托例子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>ul {max-height: 1000px;transition: all 0.5s;overflow: hidden;}</style></head><body><ul class="menu"><li>北京<ul><li>朝阳</li><li>昌平<ul><li>沙河</li><li>老牛湾</li><li>回龙观</li><li>霍营</li><li>天通苑</li></ul></li><li>海淀</li><li>东城</li><li>通州</li></ul></li><li>上海</li><li>山西</li><li>陕西<ul><li>西安</li><li>咸阳<ul><li>泾阳</li><li>三原</li><li>淳化</li><li>旬邑</li></ul></li><li>铜川</li><li>宝鸡</li></ul></li><li>河北</li><li>河南</li></ul><script>var menu = document.querySelector(".menu");menu.addEventListener("click", clickHandler);function clickHandler(e) {if (deName !== "LI") return;if (e.target.firstElementChild &&e.deName === "UL") {if (!e.target.bool) {e.target.firstElementChild.style.maxHeight = 0;e.target.bool = true;} else {e.target.firstElementChild.style.maxHeight = "1000px";e.target.bool = false;}}}</script></body>
</html> // 早期的事件会自动设计了一个event全局变量，用于事件的处理// 同步执行时不会丢失，异步执行延迟会清除// 只能执行一个函数// 有冒泡功能，没有捕获功能，这样写大多数都会写出匿名函数// 大多数的回调地狱都是在事件函数中发生的,原因时匿名函数的使用// 不支持自定义事件
//=======================================================//现在的事件// 一般这种事件不写匿名函数,写命名函数,适合于函数式编程// 这种事件包括捕获,冒泡阶段和阻止,还包括自带事件event对象// 是否执行一次,它支持自定义事件,可以执行多个函数// 写起来麻烦,IE8及以下不支持// onclick等所有系统事件,将会去掉on// bn.addEventListener("click",clickhandler2);//=========================================================// IE11以下支持,IE11及以上不支持// 没有捕获阶段触发// var bn=document.querySelector("button");// bn.attachEvent("onclick",clickHandler3);// bn.attachEvent("onclick",clickHandler4);// function clickHandler3(e){// console.log("abc");// }// function clickHandler4(e){// console.log("cde")// bn.detachEvent("onclick",clickHandler4)// }
//submit和reset
var form=document.querySelector("form");
form.addEventListener("submit",submitHanlder);
form.addEventListener("reset",submitHanlder);function submitHanlder(e){// 阻止表单提交跳转 submit// 阻止表单重置 resete.preventDefault();//阻止默认事件行为console.log(e);// e.returnValue=false;//兼容写法
}//select 针对input或者textArea的
var input=document.querySelector("input");
input.addEventListener("select",selectHandler);function selectHandler(e){console.log(e);// console.log(input.selectionStart,input.selectionEnd)input.value=input.value.slice(0,input.selectionStart)+input.value.slice(input.selectionStart,input.selectionEnd).toUpperCase()+input.value.slice(input.selectionEnd)
}//change 可以针对表单元素,也可以针对form表单//失去焦点时,原value的值发生改变时,触发
var input=document.querySelector("input");//判断整个表单的修改
var form=document.querySelector("form");
form.addEventListener("change",changeHandler);function changeHandler(e){console.log(e.target,e.target.value);
}//resize 更改浏览器中文档的大小 window侦听
resizeHandler();
window.addEventListener("resize",resizeHandler);function resizeHandler(e){// console.log(screen.width)document.documentElement.style.fontSize=document.body.clientWidth/screen.width*100+"px";
}//load 加载完成window.addEventListener("load",loadHandle/* MouseEvent对象中按住键盘辅助键点击altKey: falsectrlKey:falseshiftKey:falsemetaKey:false判断鼠标按键button: 0 1 2buttons: 1 4 2which 1 2 3// 坐标// clientX x 相同都是鼠标相对视口距离clientX: 495clientY: 87x: 221y: 48是相对e.target左上角的坐标 layer如果目标元素e.target定位了,offset和他相同如果目标元素e.target没有定位,offset不变,layer相对父元素的左上角位置layerX: 293layerY: 73offsetX: 293offsetY: 73用于Mousemove事件,相对上次移动的距离movementX: 0movementY: 0// 绝对于屏幕左上角位置screenX: 293screenY: 144// 相对页面顶端左上角位置pageX: 221pageY: 48addEventListener可监听的事件clickdblclickmousedownmouseupmousemovemouseovermouseoutmouseentermouseleavecontextmenu 单击右键*/ ;(function(win){function ajax(options){if(!isObject(options))options = {};var _default = {type:"GET",dataType:"html",jsonp:"callback"}for(var attr in options){_default[attr] = options[attr];}options = _pe = UpperCase();if(isObject(options.data)){var _data = "";for(var p in options.data){_data+="&"+p+"="+options.data[p];}_data = _data.slice(1);console.log(_data);pe === 'GET'){options.url+="?"+_data;}options.data = _data;}switch (options.dataType){case "jsonp":return _jsonp(options);default:return _xhr(options);}}function _jsonp(options){return new Promise(function(fulfill,reject){var glovbal_fn_name = "GP"+ w()+Math.random();glovbal_fn_name = glovbal_place(/0./g,"_");win[glovbal_fn_name] = function (res){delete win[glovbal_fn_name];fulfill(res);typeof options.callback === "function" ?options.callback(res):"";}})}function _xhr(options){return new Promise(function(fulfill,reject){var xhr = new XMLHttpRequest();xhr.pe,options.url);pe === "POST"){xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")}xhr.pe === "POST" ? options.data:null);adystatechange = function (){adyState === 4 && /^2d{2}$/.test(xhr.status)){var data = sponseText;switch(options.dataType){case "json":data = JSON.parse(data);break;case "html":data = data;}fulfill(data);typeof options.callback === "function" ? options.callback(data):"";}}})}function isObject(data){return (typeof data === "object" && data !== null && !(data instanceof Array));}
win.ajax = ajax;
})(window);
本文发布于:2024-01-30 15:39:43，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170660038721054.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
