|
关键词：
注册事件（绑定）
删除事件（解绑）
DOM事件流
事件对象
阻止事件冒泡
事件委托（代理、委派）
常用的鼠标事件
常用的键盘事件
一、注册事件
两种方法：传统方法和方法监听注册方法
?? ?1. 传统方式注册事件
?? ?2. 事件侦听注册事件 节点对象.addEventListener(type,listener[,useCapture])
?? ? ? ?(1) 里面的事件类型是字符串 必定加引号 而且不带on
? ? ? ? (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
?? ?3. attachEvent IE9以前的版本支持
二、删除事件
代码方法：
?? ?1. 传统方式删除事件
?? ?2. removeEventListener 删除事件
?? ?3. detachEvent
?? ?<script>
? ? ? ? var divs = document.querySelectorAll('div');
? ? ? ? divs[0].onclick = function() {
? ? ? ? ? ? ? ? alert(11);
? ? ? ? // 1. 传统方式删除事件
? ? ? ? ? ? divs[0].onclick = null;
? ? ? ? }
? ? ? ??
? ? ? ? // 2. removeEventListener 删除事件
? ? ? ? divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
? ? ? ? function fn() {
? ? ? ? ? ? alert(22);
? ? ? ? ? ? divs[1].removeEventListener('click', fn);
? ? ? ? }
? ? ? ? // 3. detachEvent
? ? ? ? divs[2].attachEvent('onclick', fn1);
? ? ? ? function fn1() {
? ? ? ? ? ? alert(33);
? ? ? ? ? ? divs[2].detachEvent('onclick', fn1);
? ? ? ? }
三、DOM事件流
?
DOM事件流的过程：
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
<script>
? ? ? ? // dom 事件流 三个阶段
? ? ? ? // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
????????// 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
? ? ? ? // 3. 捕获阶段如果addEventListener 第三个参数是 true 那么则处于捕获阶段 ?document -> html -> body -> father -> son/
? ? ? ? var son = document.querySelector('.son');
? ? ? ? son.addEventListener('click', function() {
? ? ? ? ? ? alert('son');
? ? ? ? }, true);
? ? ? ? var father = document.querySelector('.father');
? ? ? ? father.addEventListener('click', function() {
? ? ? ? ? ? alert('father');
? ? ? ? }, true);
? ? ? ? // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 ?/
? ? ? ? //son -> father ->body -> html -> document
? ? ? ? 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>
? ? 注意：
?? ??? ?1. JS代码中只能执行捕获或者冒泡其中的一个阶段。
?? ??? ?2. onclick和attachEvent只能得到冒泡阶段。
?? ??? ?3. addEventListener (type, listener [, useCapture])第三 个参数如果是true ,表示在事件捕获阶段调用事件处理程序;
?? ??? ? ? 如果是false (不写默认就是false) , 表示在事件冒泡阶段调用事件处理程序。
?? ??? ?4. 实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
?? ??? ?5. 有些事件是没有冒泡的,比如onblur、onfocus、 onmouseenter. onmouse leave
?? ??? ?6. 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件,我们后面讲解。
四、事件对象
? ? (一)概念
1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 ?e = e || window.event;
? ? ? ? var div = document.querySelector('div');
? ? ? ? 方法1
? ? ? ? div.onclick = function(e) {
? ? ? ? ? ? ? ? ? ? // console.log(e);
? ? ? ? ? ? ? ? ? ? // console.log(window.event);
? ? ? ? ? ? ? ? ? ? // e = e || window.event;
? ? ? ? ? ? ? ? ? ? console.log(e);
? ? ? ? ? ? ? ? }
? ? ? ? 方法2
? ? ? ? div.addEventListener('click', function(e) {
? ? ? ? ? ? ? ? console.log(e);
? ? ? ? ? ? })
? ? (二)常见事件对象的属性和方法
? ? ? ? (1)返回事件类型
? ? ? ? ? ? 1. e.target 返回的是触发事件的对象（元素） ?this 返回的是绑定事件的对象（元素）
? ? ? ? ? ? /区别 ： 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) {
? ? ? ? ? ? ? ? ? ? ? ? // 我们给ul 绑定了事件 ?那么this 就指向ul ?
? ? ? ? ? ? ? ? ? ? ? ? console.log(this);
? ? ? ? ? ? ? ? ? ? ? ? console.log(e.currentTarget);
? ? ? ? ? ? ? ? ? ? ? ? // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
? ? ? ? ? ? ? ? ? ? ? ? console.log(e.target);
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? // 了解兼容性
? ? ? ? ? ? ? ? ? ? // div.onclick = function(e) {
? ? ? ? ? ? ? ? ? ? // ? ? e = e || window.event;
? ? ? ? ? ? ? ? ? ? // ? ? var target = e.target || e.srcElement;
? ? ? ? ? ? ? ? ? ? // ? ? console.log(target);
? ? ? ? ? ? ? ? // }
? ? ? ? ? ? 2. 了解 跟 this 有个非常相似的属性 currentTarget ?ie678不认识
? ? ? ? (2)阻止默认行为（事件）?
? ? ? ? ? ? /让链接不跳转 或者让提交按钮不提交/
? ? ? ? ? ? var a = document.querySelector('a');
? ? ? ? ? ? a.addEventListener('click', function(e) {
? ? ? ? ? ? ? ? ? ? e.preventDefault(); // ?dom 标准写法
? ? ? ? ? ? ? ? })
? ? ? ? (3)阻止冒泡 ?
? ? ? ? ? ? 目的：
? ? ? ? ? ? /*dom 推荐的标准*/ stopPropagation()?
? ? ? ? ? ? var son = document.querySelector('.son');
? ? ? ? ? ? /-----------------------阻止冒泡---------------------------------/
? ? ? ? ? ? son.addEventListener('click', function(e) {
? ? ? ? ? ? ? ? alert('son');
? ? ? ? ? ? ? ? e.stopPropagation(); // stop 停止 ?Propagation 传播
? ? ? ? ? ? ? ? e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
? ? ? ? ? ? }, false);
? ? ? ? ? ? /---------------------------------------------------------------/
? ? ? ? ? ? var father = document.querySelector('.father');
? ? ? ? ? ? father.addEventListener('click', function() {
? ? ? ? ? ? ? ? alert('father');
? ? ? ? ? ? }, false);
? ? ? ? ? ? document.addEventListener('click', function() {
? ? ? ? ? ? ? ? alert('document');
? ? ? ? ? ? })
? ? ? ? (#)事件委托（代理、委派）
? ? ? ? ? ? /阻止事件冒泡的应用场景/
? ? ? ? ? ? <!>事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点 ; 根据树结构的思想，可灵活应用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?最主要的操作如下：为父节点添加侦听器（绑定事件），然后在执行代码块中获取事件对象event从而操作这个对象
? ? ? ? ? ? var ul = document.querySelector('ul');
? ? ? ? ? ? ul.addEventListener('click', function(e) {
? ? ? ? ? ? ? ? // alert('知否知否，点我应有弹框在手！');
? ? ? ? ? ? ? ? // e.target 这个可以得到我们点击的对象
? ? ? ? ? ? ? ? e.target.style.backgroundColor = 'pink'; ? // e.target 为点击的对象，在这里要么是li要么是ul（子、父对象）
? ? ? ? ? ? })
? ? ? ? ? ? <!>有个小问题：
? ? ? ? ? ? 如果点的是ul，那么 e.target 就是 ul对象（元素节点），函数执行会把这个对象的背景色变为粉色。
五、常用事件
? ??
? ? (一)鼠标事件
? ? ? ? /*鼠标事件对象 MouseEvent*/
? ? ? ? (1) click
? ? ? ? ? ? document.addEventListener('click', function(e) {
? ? ? ? ? ? ? ? // 1. client 鼠标在可视区的x和y坐标
? ? ? ? ? ? ? ? console.log(e.clientX);
? ? ? ? ? ? ? ? console.log(e.clientY);
? ? ? ? ? ? ? ? console.log('---------------------');
? ? ? ? ? ? ? ? // 2. page 鼠标在页面文档的x和y坐标
? ? ? ? ? ? ? ? console.log(e.pageX);
? ? ? ? ? ? ? ? console.log(e.pageY);
? ? ? ? ? ? ? ? console.log('---------------------');
? ? ? ? ? ? ? ? // 3. screen 鼠标在电脑屏幕的x和y坐标
? ? ? ? ? ? ? ? console.log(e.screenX);
? ? ? ? ? ? ? ? console.log(e.screenY);
? ? ? ? ? ? })
? ? ? ? (2) mousemove
? ? ? ? ? ? var pic = document.querySelector('img');
? ? ? ? ? ? document.addEventListener('mousemove', function(e) {
? ? ? ? ? ? // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
? ? ? ? ? ? // console.log(1);
? ? ? ? ? ? // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
? ? ? ? ? ? var x = e.pageX;
? ? ? ? ? ? var y = e.pageY;
? ? ? ? ? ? console.log('x坐标是' + x, 'y坐标是' + y);
? ? ? ? ? ? //3 . 千万不要忘记给left 和top 添加px 单位
? ? ? ? ? ? pic.style.left = x - 50 + 'px';
? ? ? ? ? ? pic.style.top = y - 40 + 'px';
? ? ? ? ? ? });
? ? (二)键盘事件
? ? ? ? 触发事件
? ? ? ? keyCode属性-ASCII
? ? ? ? (1) keyup
? ? ? ? ? ? // keyup 按键弹起的时候触发?
? ? ? ? ? ? // document.onkeyup = function() {
? ? ? ? ? ? // ? ? ? ? console.log('我弹起了');
? ? ? ? ? ? // }
? ? ? ? ? ? document.addEventListener('keyup', function() {
? ? ? ? ? ? ? ? console.log('我弹起了');
? ? ? ? ? ? })
? ? ? ? (2) keypress
? ? ? ? ? ? // keypress 按键按下的时候触发 ?不能识别功能键 比如 ctrl shift 左右箭头啊
? ? ? ? ? ? document.addEventListener('keypress', function() {
? ? ? ? ? ? ? ? ? ? console.log('我按下了press');
? ? ? ? ? ? })
? ? ? ? (3)keydown
? ? ? ? ? ? // keydown 按键按下的时候触发 ?能识别功能键 比如 ctrl shift 左右箭头啊
? ? ? ? ? ? document.addEventListener('keydown', function() {
? ? ? ? ? ? ? ? console.log('我按下了down');
? ? ? ? ? ? })
? ? ? ? <!>三个事件的执行顺序 (队列) ?keydown -- keypress -- keyup
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? keyCode属性
? ? ? ? ? ? ? ? // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
? ? ? ? ? ? ? ? /1. 我们的keyup 和keydown事件不区分字母大小写 ?a 和 A 得到的都是65/
? ? ? ? ? ? ? ? /2. 我们的keypress 事件区分字母大小写 ?a ?97 和 A 得到的是65/
? ? ? ? ? ? ? ? document.addEventListener('keyup', function(e) {
? ? ? ? ? ? ? ? ? ? // console.log(e);
? ? ? ? ? ? ? ? ? ? console.log('up:' + e.keyCode);
? ? ? ? ? ? ? ? ? ? // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
? ? ? ? ? ? ? ? ? ? if (e.keyCode === 65) {
? ? ? ? ? ? ? ? ? ? ? ? alert('您按下的a键');
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? alert('您没有按下a键')
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? document.addEventListener('keypress', function(e) {
? ? ? ? ? ? ? ? ? ? // console.log(e);
? ? ? ? ? ? ? ? ? ? console.log('press:' + e.keyCode);
? ? ? ? ? ? ? ? })
? ? ? ? ? ??
?
|