博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js学习总结----事件基础
阅读量:5334 次
发布时间:2019-06-15

本文共 1737 字,大约阅读时间需要 5 分钟。

1、什么是事件?

事件分为两部分:

  1)、行为本身:浏览器天生就赋予其的行为 onclick 、onmouseover(onmouseenter)、onmouseout(onmouseleave)、onmousemove、onmousedown、onmouseup、onmousewheel(鼠标滚轮滚动行为)、onscroll(滚动条滚动行为)、onresize(window.onresize浏览器窗口大小改变事件)、onload、onunload、onfocus(文本框获取焦点行为)、onblur(文本框失去焦点行为)、onkeydown、onkeyup(键盘的按下和抬起行为)。没有给上述的行为绑定方法,事件也是存在的,当我们点击这个盒子的时候,同样会触发它的onclick行为,只是什么都没有做而已

  2)、事件绑定:给元素的某一个行为绑定方法  

    
Document

2、关于事件对象MouseEvent的兼容问题

1)、事件对象本身的获取存在兼容问题:标准浏览器中是浏览器给方法传递的参数,我们只需要定义形参e就可以获取到;在IE6-8中浏览器不会给方法传递参数,我们如果需要的话,我们需要到window.event中获取查找

oDiv.onclick = function(e){            e = e || window.event;            e.target = e.target || e.srcElement            e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft))            e.pageY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop))            e.preventDefault()?e.preventDefault():e.returnValue = false            e.clientX/e.clientY //当前鼠标触发点距离当前屏幕左上角的x/y轴的坐标值            e.type // 存储的是当前鼠标触发的行为类型"click"            e.target //事件源,当前鼠标触发的是哪个元素,那么他存储的就是哪个元素,但是在ie6-8中不存在这个属性(e.target的值就是undefined),我们使用e.srcElement来获取事件源            e.pageX/e.pageY://当前鼠标触发点距离body左上角(页面第一屏幕最左上端)的x/y轴的坐标,但是在ie6-8中没有这个属性,我们通过使用clientY+滚动条卷去的高度来获取也可以            e.preventDefault://阻止浏览器的默认行为,在ie6-8中没有这个方法,我们需要使用e.returnValue = false; 或者使用return false;和上述代码是一样的效果            e.stopPropagation://阻止事件的冒泡传播,在ie6-8中不兼容,使用e.cancelBubble = true来代替            KeyboardEvent(键盘事件)                e.keyCode://当前键盘每一个键对应的值            /*                默认行为:                a标签的默认行为就是跳转页面,但是有时候我们使用a标签,只是想应用他的特殊性,并不想点击的时候跳转            */        } 

转载于:https://www.cnblogs.com/diasa-fly/p/7206457.html

你可能感兴趣的文章
管道,数据共享,进程池
查看>>
SDUTOJ3754_黑白棋(纯模拟)
查看>>
把word文档中的所有图片导出
查看>>
ubuntu 18.04取消自动锁屏以及设置键盘快捷锁屏
查看>>
arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)
查看>>
YTU 2625: B 构造函数和析构函数
查看>>
加固linux
查看>>
Hyper-V虚拟机上安装一个图形界面的Linux系统
查看>>
【Crash Course Psychology】2. Research & Experimentation笔记
查看>>
关于 linux 的 limit 的设置
查看>>
MTK笔记
查看>>
【题解】 bzoj1597: [Usaco2008 Mar]土地购买 (动态规划+斜率优化)
查看>>
fat32转ntfs ,Win7系统提示对于目标文件系统文件过大解决教程
查看>>
shell cat 合并文件,合并数据库sql文件
查看>>
构建自己的项目管理方案
查看>>
利用pca分析fmri的生理噪声
查看>>
div水平居中且垂直居中
查看>>
epoll使用具体解释(精髓)
查看>>
安装Endnote X6,但Word插件显示的总是Endnote Web"解决办法
查看>>
python全栈 计算机硬件管理 —— 硬件
查看>>