会用框架做网站能找到工作吗,展示展厅设计,京东快递 网站建设特点,南京俄语网站建设三、事件高级
1、注册事件#xff08;绑定事件#xff09;
注册事件概述 给元素添加事件#xff0c;称为注册事件或者绑定事件。 注册时间有两种方式#xff1a;传统方式和方法监听注册方式 传统注册方式 利用 on 开头的事件 onclickbutton onclick alert(hi~)…三、事件高级
1、注册事件绑定事件
注册事件概述 给元素添加事件称为注册事件或者绑定事件。 注册时间有两种方式传统方式和方法监听注册方式 传统注册方式 利用 on 开头的事件 onclickbutton onclick alert(hi~)/buttonbtn.onclick function() {}特点注册事件的唯一性同一个元素同一个时间只能设置一个处理函数最后注册的处理函数将会覆盖前面注册的处理函数 方法监听注册方式 w3c 标准 推荐方式addEventListener() 它是一个方法IE9 之前的 IE 不支持此方法可使用 AttachEvent() 代替特点同一个元素同一个时间可以注册多个监听器按注册顺序依次执行 addEventListener 事件监听方式 eventTarget.addEventListener(type, listener[, useCapture]) type事件类型字符串比如 click、mouseover注意这里不要带 onlistener事件处理函数事件发生时会调用该监听函数useCapture可选参数是一个布尔值默认是false 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodybutton传统注册事件/buttonbutton方法监听注册事件/buttonscriptvar btn document.querySelectorAll(button);// 1.传统方式btn[0].onclick function() {alert(hi);}btn[0].onclick function() {alert(hoe are you);}// 2.事件侦听// 同一个元素同一个事件可以添加多个侦听器事件处理程序btn[1].addEventListener(click, function() {alert(123);})btn[1].addEventListener(click, function() {alert(456);})/script
/body
/htmlattachEvent 事件监听方式 eventTarget.attachEvent(eventNameWithOn, callback) eventNameWithOn事件类型字符串比如 onclick、onmouseover这里要带 oncallback事件处理函数当目标触发事件是回调函数被调用 注册事件兼容性解决方案 function addEventListener(element, eventName, fn) {// 判断当前浏览器是否支持 addEventListen 方法if (element.addEventListener) {element.addEventListener(eventName, fn); // 第三个参数 默认是false} else if (element.attachEvent) {element.attachEvent(on eventName. fn);} else {// 相当于 element.onclick fn;element[on eventName] fn;}
}2、删除事件解绑事件
删除时间的方式 传统注册方式 eventTarget.onclick null;方法监听注册方式 eventTarget.removeEventListener(type, listener[, useCapture]);eventTarget.detachEvent(eventNameWithOn, callback); 删除事件兼容性解决方案 function removeEventListener(element, eventName, fn) {// 判断当前浏览器是否支持 removeEventListener 方法if(element.removeEventListener) {element.removeEventListener(eventName, fn); // 第三个参数 默认是 false} else if (element.detachEvent) {element.detachEvent(on eventName, fn);} else {element[on eventName] null; }
}3、DOM 事件流 事件流描述的是从页面中接收时间的顺序。 事件发生时会在元素节点之间按照特定的顺序传播这个传播过程即 DOM 事件流 DOM 事件流分为3个阶段 捕获阶段当前阶段冒泡阶段 注意: JS 代码中只能执行捕获或者冒泡其中的一个阶段onclick 和 attachEvent 只能得到冒泡阶段addEventListener(type, listener[, useCapture]) 第三个参数如果是 ture表示再事件捕获阶段调用事件处理程序如果是 false不写默认就是false表示在事件冒泡阶段调用事件处理程序。实际开发中很少使用事件捕获更关注事件冒泡有些事件是没有冒泡的比如 onblur、onfocus、onmouseenter、onmouseleave 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/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
/head
bodydiv classfatherdiv classsonson盒子/div/divscript// 捕获阶段var son document.querySelector(.son);son.addEventListener(click, function() {alert(son);}, true);var father document.querySelector(.father);father.addEventListener(click, function() {alert(father);}, true);// 冒泡阶段var 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);})/script
/body
/html4、事件对象
什么是事件对象 eventTarget.onclick function() {}
eventTarget.assEventListener(click, function(event) {})event 对象表示时间的状态比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。 事件发生后跟事件相关的一系列信息数据的集合都放到这个对象里面这个对象就是事件对象 event。 事件对象的兼容性方案 解决 e e || window.event; 事件对象的常见属性和方法 事件对象属性方法说明e.target返回触发事件的对象标准e.srcElement返回触发事件的对象非标准 ie6~8 使用e.type返回事件的类型 比如 click mouseover不带 one.cancelBubble该属性阻止冒泡非标准 ie6~8 使用e.returnValue该属性 阻止默认事件默认行为非标准 ie6~8 使用比如不让链接跳转e.preventDefault()该方法 阻止默认事件默认行为标准比如不让跳转链接e.stopPropagation()阻止冒泡标准 示例一 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;}/style
/head
bodydiv123/divulliabc/liliabc/liliabc/li/ulscript// 1. e,target 返回的是触发事件的对象元素 this 返回的是绑定事件的对象元素var div document.querySelector(div);div.addEventListener(click, function(e) {console.log(e.target);console.log(this);})var ul document.querySelector(ul);ul.addEventListener(click, function(e) {// 绑定事件对象console.log(this);console.log(e.currentTarget);// 谁触发返回谁console.log(e.target);})// 了解兼容性// div.onclick function() {// e e || window.event;// var target e.target || e.srcElement;// console.log(target);// }// 跟 this 有个非常相似的属性 currentTarget ie6~8不认识/script
/body
/html示例二 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv123/diva hrefhttp://www.baidu.com百度/aform actionhttp://www.baidu.cominput typesubmit value提交 namesub/formscript// 返回事件类型var div document.querySelector(div);div.addEventListener(click, fn);div.addEventListener(mouseover, fn);div.addEventListener(mouseout, fn);function fn(e) {console.log(e.type);}// 阻止默认的行为事件var a document.querySelector(a);a.addEventListener(click, function(e) {e.preventDefault(); // dom 标准写法})// 传统的注册方式a.onclick function(e) {// e.preventDefault();// // 普通// e.returnValue();// return false 也能阻止默认行为 没有兼容性问题return false;}/script
/body
/html5、阻止事件冒泡
阻止事件冒泡的两种方式 标准写法利用事件对象里面的 stopPropagation() 方法 e.stopPropagation()非标准写法IE 6~8 利用事件对象 cancaelBubble 属性 阻止事件冒泡的兼容性解决方案 if (e e.stopPropagation) {e.stopPropagation();
} else {window.event.cancelBubble true;
}6、事件委托代理、委派 事件委托也称为时间代理在jQuery里面称为事件委派 事件委托的原理 不是每个子节点单独设置事件监听器而是事件监听器设置在其父节点上然后利用冒泡原理影响设置每个子节点。 事件委托的作用 我们只操作了一次 DOM提高了程序的性能。 7、常用的鼠标事件 禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单主要用于程序员取消默认的上下文菜单 document.addEventListener(contextmenu, function(e) {e.preventDefault();
})禁止鼠标选中selectstart 开始选中 document.addEventListener(selectstart, function(e) {e.preventDefault();
})鼠标事件对象 MouseEvent鼠标事件对象KeyboardEvent键盘事件对象。 鼠标事件对象说明e.clientX返回鼠标相对于浏览器窗口可视区的 X 坐标e.clientY返回鼠标相对于浏览器窗口可视区的 Y 坐标e.pageX返回鼠标相对于文档页面的 X 坐标IE9 支持e.pageY返回鼠标相对于文档页面的 Y 坐标IE9 支持e.screenX返回鼠标相对于电脑屏幕的 X 坐标e.screenY返回鼠标相对于电脑屏幕的 Y 坐标 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {height: 3000px;}/style
/head
bodyscript// 鼠标事件对象 MouseEventdocument.addEventListener(click, function(e) {// 1.鼠标在可视化窗口的位置console.log(e.clientX);console.log(e.clientY);console.log(----------------);// 2.鼠标在文档的位置console.log(e.pageX);console.log(e.pageY);})/script
/body
/html8、常用键盘事件 键盘事件触发条件onkeyup某个键盘按键被松开时触发onkeydown某个键盘按键被按下时触发onkeypress某个键盘按键被按下时触发 但是它不识别功能键 比如 ctrl shift 箭头等 注意 三个事件的执行顺序是keydwon – keypress – keyup 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// 1.keyup// document.onkeyup function() {// console.log(1);// }document.addEventListener(keyup, function() {console.log(2);})// 2.keydowndocument.addEventListener(keydown, function() {console.log(3);})// 3.keypressdocument.addEventListener(keypress, function() {console.log(4);})// 4. 三个事件的执行顺序keydown -- keypress -- keyup/script
/body
/html键盘事件对象 键盘事件对象属性说明keyCode返回该键的ASCII值 注意onkeydown 和 onkeyup 不区分字母大小写onkeypress 区分字母大小写。 四、BOM 浏览器对象模型
1、BOM 概述
什么是 BOM BOMBrower Object Model即浏览器对象模型它提供了独立于内容而与浏览器窗口进行交互的对象。其核心对象是 window。 BOM 的构成 window 对象是浏览器的顶级对象它具有双重角色 它是 JS 访问浏览器窗口的一个接口。它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法 注意window 下的一个特殊属性 window.name 2、window 对象的常见事件
窗口加载事件 window.onload function() {};
或者
window.addEventListener(load, function() {});window.onload 是窗口页面加载事件当文档内容完全加载完成会触发该事件包括图像、脚本文件、CSS文件等。 注意 有了 window.onload 就可以把 JS、 代码写到页面上方因为 onload 是等页面内容全部加载完毕再去执行处理函数。window.onload 传统注册事件方式只能写一次如果有多个会议最后一个 window.onload 为准。如果使用 addEventListener 则没有限制· document.addEventListener(DOMContentLoaded, function() {}) DOMContentLoaded 事件触发时仅当DOM加载完成不包括样式表图片flash等等。Ie9以上才支持。 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// window.onload function() {// var btn document.querySelector(button);// btn.addEventListener(click, function() {// alert(click to me);// })// }// window.onload function() {// alert(1);// }window.addEventListener(load, function() {var btn document.querySelector(button);btn.addEventListener(click, function() {alert(click to me);})})window.addEventListener(load, function() {alert(1);})document.addEventListener(DOMContentLoaded, function() {alert(2);})// load 等页面元素全部加载完毕// DOMContentLoaded 是 DOM 加载完毕直接执行加载速度比 load 快/scriptbutton点击/button
/body
/html调整窗口大小事件 window.onresize function() {};
window.addEventListener(resize, function() {});注意 在开发响应式布局时可用到window.innerWidth 当前屏幕的宽度 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;background-color: pink;}/style
/head
bodyscriptwindow.addEventListener(load, function() {var div document.querySelector(div);window.addEventListener(resize, function() {if (window.innerWidth 800) {div.style.display none;} else {div.style.display block;}})})/scriptdiv/div
/body
/html3、定时器
两种定时器 setTimeout()setInterval() setTimeout() 定时器 window..setTimeout(调用函数, [延迟的毫秒数]); setTimeout() 方法用于设置一个定时器该定时器在定时器到期后执行调用函数 注意 window 可以省略这个调用函数可以直接写函数或者写函数名或者采取字符串 ‘函数名()’ 三种方式延迟的毫秒数省略默认是0 setTimeout() 这个函数也称为回调函数 callback 停止 setTimeout() 定时器 window.clearTimeout(timeoutID); 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton点击停止定时器/buttonscriptvar btn document.querySelector(button);var timer setTimeout(function() {console.log(1);}, 5000)btn.addEventListener(click, function() {clearTimeout(timer);})/script
/body
/htmlsetTnterval() 定时器 window.setInterval(回调函数, [间隔的毫秒数]); setInterval() 方法重复调用一个函数每个一段时间就去调用这个函数 注意 window 可以省略这个调用函数可以直接写函数或者写函数名或者采取字符串 ‘函数名()’ 三种方式延迟的毫秒数省略默认是0 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptsetInterval(function() {console.log(1);}, 1000)/script
/body
/html停止 setInterval() 定时器 window.clearInterval(intervalID); 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton classbegin开启定时器/buttonbutton classstop停止定时器/buttonscriptvar begin document.querySelector(.begin);var stop document.querySelector(.stop);var timer null; // 设置一个空对象begin.addEventListener(click, function() {timer setInterval(function() {console.log(1);}, 1000)})stop.addEventListener(click, function() {clearInterval(timer);})/script
/body
/htmlthis 全局作用域或者普通函数种this指向全局对象window定时器中的this指向window方法调用中谁调用this指向谁构造函数种this指向构造函数的实例 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton点击/buttonscript// 1.全局作用域或者普通函数种this指向全局对象window定时器中的this指向windowconsole.log(this);function fn() {console.log(this);}window.fn();setTimeout(function() {console.log(this);}, 1000)// 2.方法调用中谁调用this指向谁var o {greet: function() {console.log(this);}}o.greet();var btn document.querySelector(button);// btn.onclick function() {// console.log(this);// }btn.addEventListener(click, function() {console.log(this);})// 3.构造函数种this指向构造函数的实例function Fun() {console.log(this);}var fun new Fun();/script
/body
/html、JS 执行队列
JS 是单线程
同步和异步 同步任务 同步任务都在主线程上执行形成一个执行栈 异步任务 JS 的异步函数是通过回调函数实现的。 普通事件如 click、resize 等资源加载如 load、error 等定时器包括 setTimeout、setInterval 等 异步任务相关回调函数添加到任务队列中任务队列也称为消息队列 JS 执行机制 先执行执行栈中的同步任务异步任务回调函数放入任务队列中一旦执行栈中的所有同步任务执行完毕系统会按次序读取任务队列中的异步任务于是被读取的异步任务结束等待状态进入执行栈开始执行 由于主线程不断地重复获得任务、执行任务再获取任务、执行任务所以这种机制被称为事件循环even loop 5、location 对象
什么是 location 对象 window 对象提供的 location 属性用于获取或设置窗体地URL并且可以用于解析 URL。 URL 统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。 URL 地一般语法格式为 protocol://host[:port]/path/[?query]#fragment 组成说明protocol通信协议 常用的http,ftp,maito等host主机域名port端口号 可选省略时使用方案的默认端口 如http的默认地址端口为80path路径 由零个或多个 ‘/’ 符号隔开的字符串一般用来表示主机上的一个目录或文件地址query参数 以键值对的形式通过符号分隔开来fragment片段 #后面内容 常见于链接 锚点 location 对象的属性 location对象属性返回值location.href获取或者设置整个URLlocation.host返回主机域名location…port返回端口号如果未写返回空字符串location.pathname返回路径location.search返回参数location.hash返回片段#后面内容 常见于链接、锚点 location 对象的方法 location对象方法返回值location,assign()跟 href 一样可以跳转页面也称为重定向页面location.replace()替换当前页面因为不记录历史所以不能后退页面location.reload()重新加载页面相当于刷新按钮或者 f5如果参数为true则强制刷新ctrlf5) 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton点击/buttonscriptvar btn document.querySelector(button);btn.addEventListener(click, function() {// location.assign(http://www.baidu.com);// location.replace(http://www.baidu.com);location.reload(true);})/script
/body
/html6、navigator 对象 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPad|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WenOS|Symbian|Windows Phone)/i))) {windows.location.href ; // 手机
} else {windows.location.href ; //电脑
}7、history 对象 history对象方法作用back()可以后退功能forward()前进功能go(参数)前进后退功能参数如果是 1 则前进一个页面如果是 -1 则后退一个页面
