JavaScript事件

2022-04-01 00:45:31

关键词：

注册事件（绑定）
删除事件（解绑）
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、 onm ouseenter. onm ouse 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()

(#)事件委托（代理、委派）

/阻止事件冒泡的应用场景/

<!>事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点 ; 根据树结构的思想，可灵活应用
最主要的操作如下：为父节点添加侦听器（绑定事件），然后在执行代码块中获取事件对象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);

})

码农公寓