JavaScript知识——事件BOM简介
Posted 七冬与小糖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript知识——事件BOM简介相关的知识，希望对你有一定的参考价值。
事件
事件的委派
事件的委派指的是将事件统一绑定给元素的共同的祖先元素，这样后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先的响应函来处理事件。
例子：
使得添加的超链接和原来的超链接都拥有单击响应事件。
<script>
window.onload = function () {
var btn = document.getElementById("btn");
var ul = document.getElementsByTagName("ul")[0];
btn.onclick = function () {
var li = document.createElement("li");
ul.appendChild(li);
li.innerhtml = "<a href='javascript:;' class='link'>新创建的超链接</a>"
};
ul.onclick = function (event) {
event = event || window.event;
if(event.target.className == "link"){
alert("~~")
}
};
};
</script>
<body>
<button id="btn">添加新的链接</button>
<br>
<ul style="background-color: #bfa;">
<li><a href="javascript:;" class="link"> 超链接</a></li>
<li><a href="javascript:;" class="link"> 超链接</a></li>
<li><a href="javascript:;" class="link"> 超链接</a></li>
</ul>
</body>
事件的绑定
使用 对象.事件 = 函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个，则后边的覆盖到掉前边的。
btn.addEventListener()
通过这个方法也可以为元素绑定响应函数，参数：
- 第一个参数是事件的字符串，不要on
- 回调函数，当事件触发时该函数会被调用
- 是否在捕获阶段触发事件，需要一个布尔值，一般为false
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert("1");},
false);
btn.addEventListener("click",function(){
alert("2");},
false);
};
</script>
<body>
<button id = "btn">按钮</button>
</body>
这个方法不支持IE8及以下
在IE8中可以使用attachEvent（），但是执行顺序相反。
- 第一个参数为事件的字符串，要On
- 回调函数
写一个函数使得事件绑定兼容所有的浏览器
function bind(obj, eventStr,callback){
if(obj.addEventListener){
obj.addEventListener(obj,callback,false);
}else{
//this是谁，由调用方式确定
//callback.call(obj)
obj.attachEvent("on"+eventStr,function(){
callback.call(obj);
});
}
};
拖拽
<script>
window.onload = function () {
/*
* 拖拽box元素：
* 1、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
* 2、当鼠标移动时拖拽元素跟随鼠标移动 onmousemove
* 3、当鼠标松开时，将拖拽元素固定在当前位置 onomouseup
*
*/
var box = document.getElementById("box");
box.onmousedown = function (event) {
//div的偏移量 鼠标.clientX - 元素.offsteleft
//div的偏移量 鼠标.clientY - 元素.offstetop
var ol = event.clientX - box.offsetLeft;
var ot = event.clientY - box.offsetTop;
document.onmousemove = function (event) {
//为doncument绑定一个onmouse事件
event = event || window.event;
var left = event.clientX - ol;
var top = event.clientY - ot;
box.style.left = left + "px";
box.style.top = top + "px";
};
document.onmouseup = function () {
//取消document.onmousemove事件
document.onmousemove = null;
document.onmouseup = null;
}
};
};
</script>
<style>
#box {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<body>
<div id="box"></div>
</body>
鼠标滚轮事件
<script>
window.onload = function () {
var box = document.getElementById("box");
box.onwheel = function (event) {
event = event || window.event;
if (event.wheelDelta > 0) {
box.style.height = box.clientHeight - 10 + "px";
} else {
box.style.height = box.clientHeight + 10 + "px";
}
return false;
};
};
</script>
键盘事件
控制box随着键盘移动
document.onkeydown = function (event) {
var speed = 10;
if (event.ctrlKey) {
speed = 50;
};
switch (event.keyCode) {
case 37:
box.style.left = box.offsetLeft - speed + "px";
break;
case 39:
box.style.left = box.offsetLeft + speed + "px";
break;
case 38:
box.style.top = box.offsetTop - speed + "px";
break;
case 40:
box.style.top = box.offsetTop + speed + "px";
break;
}
};
BOM
- 浏览器对象模型
- BOM可以通过JS来操作浏览器
- 在BOM中提供了一组对象，用来对浏览器操作
Window:代表的是整个浏览器的窗口，同时window也是网页的全局对象
Navigator:代表当前浏览器的信息，通过该对象可以识别不同的浏览器
Location：代表当前浏览器的地址栏信息，可以获取地址栏信息，或者操作浏览器跳转页面
History:代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
Screen:代表用户的屏幕的信息，通过该对象可以获得到用户显示器的相关的信息。
以上是关于JavaScript知识——事件BOM简介的主要内容，如果未能解决你的问题，请参考以下文章