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、當滑鼠在被拖拽元素上按下時，開始拖拽 onm ousedown
* 2、當滑鼠移動時拖拽元素跟隨滑鼠移動 onm ousemove
* 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://www.uj5u.com/qianduan/294963.html
標籤：其他
下一篇：JavaScript 網頁特效