wordpress网站被攻击,ftp如何修改网站备案号,一共有多少网站,有没有什么做海报字体的网站文章目录 7 事件高级7.1 注册事件概述7.2 删除事件7.3 DOM事件流7.4 事件对象7.5 事件委托7.6 鼠标事件7.6.1 常用的鼠标事件7.6.2 鼠标事件对象 7.7 键盘事件7.7.1 常用的键盘事件7.7.2 键盘事件对象 7 事件高级
7.1 注册事件概述
给元素添加事件#xff0c;称为注册事件或… 文章目录 7 事件高级7.1 注册事件概述7.2 删除事件7.3 DOM事件流7.4 事件对象7.5 事件委托7.6 鼠标事件7.6.1 常用的鼠标事件7.6.2 鼠标事件对象 7.7 键盘事件7.7.1 常用的键盘事件7.7.2 键盘事件对象 7 事件高级
7.1 注册事件概述
给元素添加事件称为注册事件或者绑定事件。
注册事件有两种方式∶传统方式和方法监听注册方式
传统注册方式on开头
用on开头的事件onclickbutton onclick “alert(‘hi~’)”/buttonbtn.onclick function{}特点注册事件的唯一性同一个元素同一个事件只能设置一个处理函数
方法监听注册方式addEventListener()
w3c标准推荐addEventListener()方法IE9以前为attachEvent()特点同一个元素同一个事件可以注册多个监听器监听处理函数function按注册顺序依次执行
eventTarget.addEventListener(type, listener, useCapture)将指定的监听器注册到eventTarget(目标对象上当该对象触发指定的事件时就会执行事件处理函数涉及到的参数为
type事件类型为字符串比如’click’、‘mouseover’注意这里不要带onlistener事件处理函数事件发生时会调用该监听函数useCapture可选参数是一个布尔值默认是false冒泡阶段true是捕获阶段
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbodybutton传统注册事件/buttonbutton方法监听注册事件/buttonbuttonie9 attachEvent/buttonscriptvar btns document.querySelectorAll(button);// 1. 传统方式注册事件 onclickbtns[0].onclick function() {alert(hi);}btns[0].onclick function() {alert(hao a u); // 第二个监听器会覆盖第一个传统方法要保证唯一性}// 2. 事件侦听注册事件 addEventListener btns[1].addEventListener(click, function() { // 事件类型是字符串 必定加引号 而且不带onalert(22);})btns[1].addEventListener(click, function() { // 可以添加多个监听器事件处理程序alert(33);})// 3. attachEvent ie9以前的版本支持btns[2].attachEvent(onclick, function() {alert(11);})/script
/body/html7.2 删除事件 传统注册方式 eventTarget.onclick null; 方法监听注册方式 ① eventTarget.removeEventListener(type, listener, useCapture); ② eventTarget.detachEvent(eventNameWithOn, callback);
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;}/style
/headbodydiv1/divdiv2/divdiv3/divscriptvar divs document.querySelectorAll(div);// 1. 传统方式删除事件divs[0].onclick function() {alert(11);divs[0].onclick null; //效果弹出一次11后再次点击就不再弹出11了解绑该事件}// 2. removeEventListenerdivs[1].addEventListener(click, fn) // 调用fnfunction fn() {alert(22);divs[1].removeEventListener(click, fn); // 删除事件里面的fn不需要调用加小括号}// 3. detachEventdivs[2].attachEvent(onclick, fn1);function fn1() {alert(33);divs[2].detachEvent(onclick, fn1);}/script
/body/html7.3 DOM事件流
事件流 从页面中接收事件的顺序。DOM 事件流事件发生时会在元素节点之间按照特定的顺序传播的传播过程。
比如我们给一个div注册了点击事件 DOM 事件流分为3个阶段
捕获阶段当前目标阶段冒泡阶段更常用onclick 和 attachEventie 只能得到冒泡阶段。onblur、onfocus、onmouseenter、onmouseleave 没有冒泡阶段。
事件捕获网景最早提出由 DOM 最顶层节点开始然后逐级向下传播到到最具体的元素接收的过程。事件冒泡IE 最早提出事件开始时由最具体的元素接收然后逐级向上传播到到 DOM 最顶层节点的过程。JS代码中只能执行捕获或者冒泡其中的一个阶段。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle.father {overflow: hidden;width: 300px;height: 300px;margin: 100px auto;background-color: pink;text-align: center;}.son {width: 200px;height: 200px;margin: 50px;background-color: purple;line-height: 200px;color: #fff;}/style
/headbodydiv classfatherdiv classsonson盒子/div/divscript// 1. 捕获阶段 如果addEventListener第三个参数是 true 那么处于捕获阶段 document - html - body - father - sonvar son document.querySelector(.son);son.addEventListener(click, function() {alert(son);}, true);var father document.querySelector(.father);father.addEventListener(click, function() {alert(father);}, true); // 效果先弹出father再弹出son// 2. 冒泡阶段 如果addEventListener第三个参数是false或者不填 那么处于冒泡阶段 son - father -body - html - documentvar son document.querySelector(.son);son.addEventListener(click, function() {alert(son);}, false);var father document.querySelector(.father);father.addEventListener(click, function() {alert(father);}, false);document.addEventListener(click, function() {alert(document);}) // 效果先弹出son再弹出father最后弹出document。只能执行捕获或者冒泡其中的一个阶段后面的冒泡阶段会覆盖前面的捕获阶段/script
/body/html7.4 事件对象
eventTarget.onclick function(event) {}
eventTarget.addEventListener(click, function(event) {}
这里 event 就是事件对象相当于形参我们还喜欢的写成 e 或者 evtevent对象代表**事件的状态**比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件发生后**跟事件相关的一系列信息数据的集合**都放到这个对象里面这个对象就是事件对象 event它有很多属性和方法。
常用的属性和方法 e.target 和 this 的区别
this 返回绑定事件的元素 这个函数的调用者绑定的谁e.target 返回触发事件的元素点击的谁
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;}/style
/headbodydiv123/divulliabc/liliabc/liliabc/li/ulscript// e.target返回点击的谁this返回绑定的谁var div document.querySelector(div);div.addEventListener(click, function(e) {console.log(e.target); // 触发事件的元素返回div123/divconsole.log(this); // 绑定事件的元素返回div123/div})var ul document.querySelector(ul);ul.addEventListener(click, function(e) { console.log(this); // 绑定事件的元素返回ul.../ulconsole.log(e.target); // 触发事件的元素返回liabc/li})/script
/body/htmle.type 返回是事件的类型。e.preventDefault()阻止默认行为事件
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle/style
/headbodydiv123/diva hrefhttp://www.baidu.com百度/aform actionhttp://www.baidu.cominput typesubmit value提交 namesub/formscript// 常见事件对象的属性和方法// 1. e.type返回事件类型var div document.querySelector(div);div.addEventListener(click, fn);div.addEventListener(mouseover, fn);div.addEventListener(mouseout, fn);function fn(e) {console.log(e.type); // mouseover click mouseout显示当前发生的事件类型}// 2. 阻止默认行为事件 例如让链接不跳转/让提交按钮不提交var a document.querySelector(a);a.addEventListener(click, function(e) {e.preventDefault(); // dom 标准写法})// 3. 传统的注册方式a.onclick function(e) {// 普通浏览器 e.preventDefault(); 方法// e.preventDefault();// 低版本浏览器 ie678 returnValue 属性// e.returnValue;// return false也能阻止默认行为没有兼容性问题。return false;alert(11); // return 后面的代码不执行了}/script
/body/htmle.stopPropagation()阻止事件冒泡推荐
scriptvar son document.querySelector(.son);son.addEventListener(click, function(e) {alert(son);e.stopPropagation(); // 标准 stop停止 Propagation传播e.cancelBubble true; // 非标准IE6-8 cancel取消 bubble泡泡}, false); // false冒泡阶段var father document.querySelector(.father);father.addEventListener(click, function() {alert(father); // 点击盒子后只弹出son不弹出father和document}, false);document.addEventListener(click, function() {alert(document);})
/script7.5 事件委托
原理 不是每个子节点单独设置事件监听器而是事件监听器设置在其父节点上然后利用冒泡原理影响其每个子节点。例子 给 ul 注册点击事件然后利用事件对象的 target 来找到当前点击的 li因为点击 li事件会冒泡到 ul 上 ul 有注册事件就会触发事件监听器。作用 我们只操作了一次 DOM 提高了程序的执行效率。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbodyulli知否知否点我应有弹框在手/lili知否知否点我应有弹框在手/lili知否知否点我应有弹框在手/lili知否知否点我应有弹框在手/lili知否知否点我应有弹框在手/li/ulscript// 事件委托的核心原理给父节点添加侦听器利用事件冒泡影响每一个子节点var ul document.querySelector(ul);ul.addEventListener(click, function(e) {alert(知否知否点我应有弹框在手); // 点li就会出现弹框e.target.style.backgroundColor pink; // e.target可以得到我们点击的哪个小li哪个小li背景就变粉})/script
/body/html7.6 鼠标事件
7.6.1 常用的鼠标事件 1. 禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单主要用于取消默认的上下文菜单
document.addEventListener(contextmenu, function(e) {e.preventDefault();
})2. 禁止鼠标选中selectstart 开始选中
document.addEventListener(selectstart, function(e) {e.preventDefault();
})例子
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbody我是一段不愿意分享的文字script// 1. 禁用右键菜单 contextmenu document.addEventListener(contextmenu, function(e) {e.preventDefault();})// 2. 禁止选中文字 selectstartdocument.addEventListener(selectstart, function(e) {e.preventDefault();})/script
/body/html7.6.2 鼠标事件对象
event对象 代表事件的状态跟事件相关的一系列信息的集合MouseEvent 鼠标事件对象KeyboardEvent 键盘事件对象 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylebody {height: 3000px;}/style
/headbodyscript// 鼠标事件对象 MouseEventdocument.addEventListener(click, function(e) { // MouseEvent {属性属性值...鼠标点击的x,y坐标、which按的鼠标左键还是右键...}// 1. client 鼠标在可视区的x和y坐标console.log(e.clientX); // 51:距离可视区左侧51pxconsole.log(e.clientY); // 58:距离可视区上侧58px// 2. page 鼠标在页面文档的x和y坐标更常用console.log(e.pageX); // 50:距离页面文档左侧51pxconsole.log(e.pageY); // 1328:距离页面文档上侧58px// 3. screen 鼠标在电脑屏幕的x和y坐标console.log(e.screenX);console.log(e.screenY);})/script
/body/html案例小天使logo一直跟着鼠标走mousemove
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyleimg {position: absolute; /* 绝对定位图片要移动距离而且不占位置 */}/style
/headbodyimg srcimages/angel.gif altscriptvar pic document.querySelector(img);document.addEventListener(mousemove, function(e) { // 在页面中移动给document注册事件同时mousemove只要我们鼠标移动1px 就会触发这个事件var x e.pageX; // pageX鼠标在页面中的X坐标var y e.pageY;// console.log(x坐标是 x, y坐标是 y);pic.style.left x - 50 px; // x和y坐标做为图片的top和left值就可以移动图片同时添加px单位pic.style.top y - 40 px; // 40是图片的高不减值鼠标就对齐图片的左上角});/script
/body/html7.7 键盘事件
7.7.1 常用的键盘事件 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbodyscript// 常用的键盘事件// 1. keyup 按键弹起的时候触发 // 传统方法// document.onkeyup function() {// console.log(我弹起了);// }// document.addEventListener(keyup, function() {console.log(我弹起了);})// 2. keypress 按键按下的时候触发不能识别功能键ctrl/shift/左右箭头document.addEventListener(keypress, function() {console.log(我按下了press);})// 3. keydown 按键按下的时候触发能识别功能键document.addEventListener(keydown, function() {console.log(我按下了down);})// 4. 三个事件的执行顺序 keydown -- keypress -- keyup/script
/body/html7.7.2 键盘事件对象
更多的使用keydown和keyup 它能识别所有的键包括功能键Keypress不识别功能键但是keyCode属性能区分大小写返回不同的ASCII值 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbodyscript// 1. 我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65// 2. 我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65document.addEventListener(keyup, function(e) {console.log(e); // 按下1返回KeyboardEvent{key:1,keyCode:49...}console.log(up: e.keyCode); // 按下a/A返回65(不区分大小写)返回用户按下键的ASCII码值if (e.keyCode 65) {alert(您按下的A键);} else {alert(您没有按下A键)}})document.addEventListener(keypress, function(e) {console.log(press: e.keyCode); // 按下a返回97A返回65(区分大小写)})/script
/body/html案例1按下S键就把光标定位到搜索框
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbodyinput typetextscriptvar search document.querySelector(input);document.addEventListener(keyup, function(e) { // keydown导致按下后一直触发内容会跑到搜索框里因此要使用keyup// console.log(e.keyCode); 查询S的ASCII码值是多少if (e.keyCode 83) { // keyCode 判断用户按下的是否是s键search.focus(); // 搜索框获得焦点用focus()方法}})/script
/body/html案例2输入快递单号
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle* {margin: 0;padding: 0;}.search { /* 最大的盒子 */position: relative;width: 178px;margin: 100px;}.con { /* .search中上面的字体放大后的盒子 */display: none; /* 原本看不见输入内容后才可见 */position: absolute;top: -40px;width: 171px;border: 1px solid rgba(0, 0, 0, .2);box-shadow: 0 2px 4px rgba(0, 0, 0, .2);padding: 5px 0;font-size: 18px;line-height: 20px;color: #333;}.con::before { /* 小三角形 */content: ;width: 0;height: 0;position: absolute;top: 28px;left: 18px;border: 8px solid #000;border-style: solid dashed dashed;border-color: #fff transparent transparent;}/style
/headbodydiv classsearchdiv classcon123/divinput typetext placeholder请输入您的快递单号 classjd/divscriptvar con document.querySelector(.con);var jd_input document.querySelector(.jd);jd_input.addEventListener(keyup, function() {// console.log(输入内容啦); 表单中输入几次就返回几次if (this.value ) {con.style.display none; // 内容为空则隐藏} else {con.style.display block; // 本来是display: none;,显示后鼠标离开记得隐藏con.innerText this.value; // this.value为当前输入的值赋值给con}})// 当我们失去焦点隐藏这个con盒子jd_input.addEventListener(blur, function() {con.style.display none;})// 当我们获得焦点显示这个con盒子jd_input.addEventListener(focus, function() {if (this.value ! ) { // 里面有内容才显示concon.style.display block;}})/script
/body效果
