标签：function false -- JavaScript 事件 document event BOM
BOM
Browser Object Model
定义了浏览器的接口
BOM对象：Window，History，Navigator，Screen，Location
属性
滚动条滚动距离
pageXOffset / pageYOffset
求滚动条滚动距离，返回 number 类型的数值，单位是像素
- pageXOffset --> 横向
- pageYOffset --> 纵向
兼容性：IE9以下不兼容
- document.body/documentElement.scorllLeft --> 求横向滚动条滚动距离
- document.body/documentElement.scorllTop --> 纵向
有兼容性混乱，不同浏览器可用的方法不同，但只会有一种方法有值，另一个值为0，处理兼容性的话让这两种值相加即可。
document.body.scrollLeft + document.documentElement.scrollLeft;
document.body.scrollTop + document.documentElement.scrollTop;
查看视口的尺寸
innerWidth / innerHeight
获取试图窗口的尺寸
兼容性：IE9以下不兼容
浏览器标准模式下使用：
-
document.documentElement.clientWidth
-
document.documentElement.clientHeight
怪异模式下使用：
- document.body.clientWidth
- document.body.clientHeight
查看元素几何尺寸
获得关于这个元素的 尺寸、位置 信息
getBoundingClientRect();
- 兼容性很好
- 所有元素节点都有此方法
- left 和 top 表示该元素左上角的 X 和 Y 坐标，right 和 bottom 表示该元素右下角的 X 和 Y 坐标
- 返回的结果并不是实时的
- width 和 height 老版本 IE 不兼容
- 使用并不多
offsetWidth / offsetHeight
查看元素的尺寸（视觉尺寸：包含 padding, border）
offsetLeft / offsetTop
查看元素的位置（距离他有定位的父级的距离）
offsetParent
返回最近的有定位的父级，若没有，则返回 body
让滚动条滚动
scroll(),scrollTo() / scrollBy()
scroll(x, y) & scrollTo(x, y) 没有任何区别：使滚动条滚到指定位置
scrollBy(x, y) 累加滚动距离，有正负，多次调用多次执行
浏览器编译模式
标准模式
html页面顶部添加下面一行开启
<!DOCTYPE html>
怪异模式
兼容之前的几个版本，向后兼容
判断方式
document.compatMode 属性，返回值：
CSS1Compat：标准模式BackCompat：怪异模式
事件
绑定事件方法
-
ele.onxxx = function (event) {}- 兼容性很好，但同一个事件上只能绑定一个处理函数
- 基本等同于写在 HTML 行间
-
行间写，不需要写 function
<div onclick="console.log('a');"></div> -
obj.addEventListener(type, fn, false);- (事件类型, 事件处理函数, false)
- IE9 以下不兼容
- 可以为一个事件绑定多个处理程序
- 绑定事件时，若在循环中，注意闭包问题
- false：冒泡模型；true：捕获模型
-
obj.attachEvent(onxxx, fn);- IE 独有
事件对象，在函数的括号中写入 e 或者 event，记载了事件发生时的一些列数据和信息
运行环境
-
前三种方法进行事件绑定后 this 指向的是绑定的元素本身
-
attachEvent 绑定事件后，this 指向的是 window
解决：
var div = document.getElementByTagName('div')[0]; div.attachEvent('onclick', function () { handle.call(div); }); function handle() { // 事件处理程序 this. ... }
兼容性解决
function addEvent(elem, type, handle) {
if (elem.addEventListener) {
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, function () {
handle.call(elem);
})
} else {
elem['on' + type] = handle;
}
}
解除事件处理程序
ele.onclick = null;ele.removeListener(type, fn, false);ele.detachEvent('on' + type, fn)- 如果绑定的函数是匿名函数，则无法解除
事件处理模型
事件冒泡
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
事件捕获
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素。（自顶向下）
- 将 addEventListener() 内第三个参数 false 改为 true，即成了捕获模型
- IE 没有捕获事件
顺序：
- 先捕获，后冒泡
- 事件执行看绑定顺序
focus, blur, change, submit, reset, select 等事件不冒泡
特殊：
setCapture()：只能在 ie 中使用，给元素使用
使用后，该元素会捕获页面上发生的所有时间
releaseCapture()：取消上述捕获
取消冒泡
e.stopPropagation();W3C标准 --> 但不支持 IE9 以下版本e.cancelBubble = true;IE 使用
兼容性处理解决
function stopBubble(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
阻止默认事件
默认事件 – 表单提交，a标签跳转，右键菜单等。
- a 标签跳转
- 右键菜单事件
oncontextmenu
阻止方法：
return false;--> 兼容性特别好，以对象属性的方式注册的事件才生效（onxxx）e.preventDefault();--> W3C标准e.returnValue = false;--> IE 使用
兼容性处理解决
function cancelHandler(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
事件对象
兼容
var event = event || window.event
事件源对象
event.target--> 火狐event.srcElement--> IE
以上两个 chorme 都有
兼容
var target = event.target || event.srcElement
事件委托
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var ul = document.getElementsBytagName('ul')[0];
ul.onclick = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}
</script>
- 效率高：不需要循环所有的元素一个个绑定
- 可扩展：当有新的子元素时不需要重新绑定事件
事件分类
鼠标事件
| 事件名 | 作用 | 说明 |
|---|---|---|
| click | 鼠标点击 | mousedown + mouseup |
| mousedown | 鼠标点下 | |
| mousemove | 鼠标移动 | |
| mouseup | 鼠标抬起 | |
| contextmenu | 右键菜单事件 | 仅用于取消右键菜单 |
| mouseover | 鼠标进入 | |
| mouseout | 鼠标离开 | |
| mouseenter | 鼠标进入 | HTML5 新规范，同 mouseover |
| mouseleave | 鼠标离开 | HTML5 新规范，同 mouseout |
区分鼠标左右键
event.button 属性
- 0：左键
- 1：点击滚轮
- 2：右键
仅在 mousedown 和 mouseup 事件上可用，click 事件不可用
区分拖拽和点击
长时间按是长按，短时间按才触发 click 事件
var firstTime = 0;
var lastTime = 0;
var key = false;
document.onmousedown = function () {
firstTime = new Date().getTime();
}
document.onmouseup = function () {
lastTime = new Date().getTime();
if (lastTime - firstTime < 300) {
key = true;
}
}
document.onclick = function () {
if (key) {
console.log('click');
key = false;
}
}
移动端事件
| 事件名 | 作用 |
|---|---|
| touchstart | 触摸开始 |
| touchmove | 触摸移动 |
| touchend | 触摸结束 |
键盘事件
| 事件名 | 作用 |
|---|---|
| keydown | 按键按下 |
| keypress | 按键按下 |
| keyup | 按键抬起 |
执行顺序
keydown > keypress > keyup
keydown & keypress
- keydown：能够监测到所有按键，除 Fn 辅助键外
- 大小写没有区别
- 没有
e.charCode属性
- keypress：只能检测到 ASCII表 中有的值（字符类按键）
- 可以区分大小写
转换字符方法
String.fromCahrCode(e.charCode)
文本操作事件
| 事件名 | 作用 |
|---|---|
| input | 只要文本框值发生改变触发 |
| change | 获取焦点和失去焦点的值发生改变触发 |
| focus | 获取焦点 |
| blur | 失去焦点 |
其他事件
| 事件名 | 作用 |
|---|---|
| scroll | 页面发生滚动 |
| load | 页面所有加载项均完成后触发 |
<script>
window.onload = function () {
var div = document.getElementByTagName('div')[0];
} // 绑定 onl oad 后会等页面渲染、下载完后才会执行，就可以获取到之后的元素
</script>
<div></div> <!-- 正常上方 js 无法获取到这个div -->
缺点：
- 效率低
- 没必要
JSON
前后端之间联系一种数据纽带，通常叫做接口，一种就是叫做 json 类型的数据
数据格式
{
"name": "deng",
"age": 123
}
类型转换方法 *
JSON.stringify(obj) --> 将对象类型转换为 json 格式的字符串
JSON.parse(obj) --> 将字符串转换为对象类型
标签：function,false,--,JavaScript,事件,document,event,BOM 来源： https://blog.csdn.net/qq_58163927/article/details/119077901
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。