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:代表用户的屏幕的信息，通过该对象可以获得到用户显示器的相关的信息。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/xiaotangyu7dong/article/details/119750388
内容来源于网络，如有侵权，请联系作者删除！
