🏆事件对象

事件对象只要有了事件才会存在，它是系统给我们自动创建的不需要传递参数

事件对象可以自己命名，例如：event、evt、e。

事件对象也有兼容性问题 ie678 通过window.event 兼容性写法 e = e || window.event

vardiv=document.querySelector('div');
// event 就是一个事件对象，写到我们侦听函数的小括号里，当形参来看div.onclick=function(event){}

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div>123</div><script>vardiv=document.querySelector('div');
div.onclick=function(event){
console.log(event);
        }
</script></body></html>

图片.png

官方解释：event对象代表事件的状态，比如键盘按键状态、鼠标的位置、鼠标按钮状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

🍇事件对象常见的属性和方法

事件对象属性方法说明

e.target 返回触发事件的对象（标准）

e.srcElement 返回触发事件的对象（非标准）

e.type 返回事件的类型例如：click mouseover 不带on

e.cancelBubble 该属性阻止冒泡非标准 ie6-8使用

e.returnValue 该属性阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转

e.preventDefault() 该方法阻止默认事件（默认行为）标准比如不让链接跳转

e.stopPropagation() 阻止冒泡标准

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div>123</div><ul><li></li><li></li><li></li><li></li></ul><script>// 常见事件对象的属性和方法// 1.e.target返回的是触发事件的元素（对象），this返回的是绑定事件的元素（对象）// 区别：e.target点击了那个元素就返回了那个元素 this哪个元素绑定了事件就返回谁vardiv=document.querySelector('div');
div.addEventListener('click',function(e){
console.log(e.target);
console.log(this);
        })
varul=document.querySelector('ul');
ul.addEventListener('click',function(e){
// 我们给ul绑定了事件，那么this就指向ulconsole.log(this);
// e.target指向我们点击的那个对象，谁触发了事件 我们点击的li e.target就指向谁console.log(e.target);
        })
// 2.e.srcElement 非标准 ie6-8使用 了解// div.onclick = function(){//     e = e || window.event;//     var target = e.target || e.srcElement;//     console.log(target);// }</script></body></html>

图片.png

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div>123</div><ahref="https://www.baidu.com">百度</a><formaction="https://www.baidu.com"><inputtype="submit"value="提交"></form><script>// 1.返回事件类型vardiv=document.querySelector('div');
div.addEventListener('click',fn);
div.addEventListener('mousemove',fn);
div.addEventListener('mouseout',fn);
functionfn(e){
console.log(e.type);
        }
// 2.阻止默认行为（事件）让链接不跳转 或者让提交按钮不提交vara=document.querySelector('a');
a.addEventListener('click',function(e){
e.preventDefault(); //dom标准写法，阻止链接跳转        })
a.onclick=function(e){
// 普通浏览器// e.preventDefault();// IE6-8// e.returnValue// rerurn false 也能阻止默认行为，但是后面的代码不能执行        }
</script></body></html>

图片.png

🍈阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。

事件冒泡的本身特性既有好处也有坏处，需要我们灵活掌握。

stopPropagation()方法（标准写法）ie低版本浏览器未cancelBubble(); 这里不在讲解。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>        .father{
width: 400px;
height: 400px;
margin: 100pxauto;
background-color: #008c8c;position: relative;
        }
        .son{
position: absolute;
width: 200px;
height: 200px;
background-color: #f00;left: 25%;
top: 25%;
        }
</style></head><body><divclass="father"><divclass="son"></div></div><script>// 冒泡阶段，如果addEventListener 第三个参数是 false或省略 那么则处于冒泡阶段 // son -> father -> body -> html -> documentvarson=document.querySelector('.son');
son.addEventListener('click',function(e){
alert('son')
e.stopPropagation() // 停止冒泡传播        },false)
varfather=document.querySelector('.father');
father.addEventListener('click',function(){
alert('father')
        },false)
</script></body></html>

图片.png

🍉事件委托

事件委托也称事件代理，在jQuery里面称为事件委派。

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

作用：只操作了一次DOM，提高了程序的性能。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ul><li>我是li1</li><li>我是li2</li><li>我是li3</li><li>我是li4</li></ul><script>// 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点。varul=document.querySelector('ul');
ul.addEventListener('click', function (e) {
e.target.style.backgroundColor='red'        })
</script></body></html>

图片.png

🍊鼠标事件

禁止选中文字

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body>你能右键复制我吗？<script>document.addEventListener('contextmenu',function(e){
e.preventDefault();
        })
</script></body></html>

禁止选中文字

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body>你能选中我吗？<script>document.addEventListener('selectstart',function(e){
e.preventDefault();
        })
</script></body></html>

🍋鼠标事件对象

鼠标事件对象说明

e.clientX 返回鼠标相对于浏览器窗口可视区的 X 坐标

e.clientY 返回鼠标相对于浏览器窗口可视区的 Y 坐标

e.pageX 返回鼠标相对于文档页面的 X 坐标 IE9+支持

e.pageY 返回鼠标相对于文档页面的 Y 坐标 IE9+支持

e.screenX 返回鼠标相对于电脑屏幕的 X 坐标

e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>// 鼠标事件对象document.addEventListener('click',function(e){
// client 鼠标可视区的x和y坐标console.log(e.clientX);
console.log(e.clientY);
console.log('----------------');
// page 鼠标在页面文档的x和y坐标console.log(e.pageX);
console.log(e.pageY);
console.log('----------------');
// screen 鼠标在电脑屏幕的x和y坐标console.log(e.screenX);
console.log(e.screenY);
        })
</script></body></html>

图片.png

🍌键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发但不识别功能键比如 ctrl shift 箭头等

三个事件的执行顺序：keydowm -> keypress -> keyup

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>// 1.keyup 按键弹起时触发document.addEventListener('keyup',function(){
console.log('键盘按下弹起了');
        })
// 2.keydown 按键按下的时候触发document.addEventListener('keydown',function(){
console.log('键盘按下了down');
        })
// 3.keypress 不能识别功能键 ctrl shift 左右箭头等document.addEventListener('keypress',function(){
console.log('键盘按下了press');
        })
</script></body></html>

图片.png

🍍键盘事件对象

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>// 键盘事件对象的keyCode属性可以得到相应键的ASCII码值// 1.我们的keyup 和 keydown 时间不区分大小写 a 和 A 得到的都是65document.addEventListener('keyup',function(e){
console.log('up:'+e.keyCode);
// 我们可以通过keyCode返回的ASCII码值来判断用户按下了哪个键if(e.keyCode==65){
alert('您按下了a键')
            }else{
alert('您没有按下a键')
            }
        })
// 2.我们的keypress 事件 区分字母大小写 a 得到的是 97  A 得到的是65document.addEventListener('keypress',function(e){
console.log('press:'+e.keyCode);
        })
</script></body></html>

图片.png

【JavaScript】一文了解事件对象

🏆事件对象

🍇事件对象常见的属性和方法

🍈阻止事件冒泡

🍉事件委托

🍊鼠标事件

🍋鼠标事件对象

🍌键盘事件

🍍键盘事件对象

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

【JavaScript】一文了解事件对象

🏆事件对象

🍇事件对象常见的属性和方法

🍈阻止事件冒泡

🍉事件委托

🍊鼠标事件

🍋鼠标事件对象

🍌键盘事件

🍍键盘事件对象

热门文章

最新文章

相关课程

相关电子书