基础整理---dom

使用闭包保存状态

   for (var i = 0; i < elems.length; i++) {
        (function (lockedInIndex) {
            elems[i].addEventListener('click', function (e) {
                e.preventDefault();
                alert('I am link #' + lockedInIndex);
            }, 'false');
        })(i);
    }

这里写图片描述

改变 HTML 输出流

document.write(Date());

改变 HTML 内容

document.getElementById(id).innerHTML=新的 HTML

改变 HTML 属性

document.getElementById(id).attribute=新属性值
document.getElementById("image").src="landscape.jpg";

改变 HTML 样式

document.getElementById(id).style.property=新样式

document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

使用事件

<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

这里写图片描述

点击

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

<h1 onclick="changetext(this)">点击文本!</h1>

<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>

<button onclick="displayDate()">点这里</button>

使用 HTML DOM 来分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie

<body onload="checkCookies()">

<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}

onchange 事件

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;
">Mouse Over Me</div>



<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

JavaScript HTML DOM EventListener
addEventListener() 方法

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}

向同一个元素中添加多个事件句柄

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);


var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}

向 Window 对象添加事件句柄

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

传递参数

document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});

事件冒泡或事件捕获？
事件传递有两种方式：冒泡与捕获。
事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 “click” 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发，然后再触发

元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型

removeEventListener() 方法

document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}

HTML DOM 事件
http://www.runoob.com/jsref/dom-obj-event.html

猜你喜欢