DOM
Document Object Model文档对象模型;
DOM改变html属性
<script>
document.getElementById("image").src="landscape.jpg";
</script>
使用html的DOM来分配事件
<script>
document.getElementById(" ").onclick=function(){displayDate()};
</script>
onload/onunload
用户进入或离开页面时触发;onchange
输入框或文本的字段发生改变;onmouseover/onmouseout/onmouseup/onmousedown/onclick
鼠标相关操作;
< div onmouseover="mOver(this)" onmouseout="mOut(this)" style="">Mouse Over Me< /div>
< script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
< /script>
- onfocus
获得焦点;
HTML DOM EventListener
使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听;
你可以使用 removeEventListener() 方法来移除事件的监听;
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click",displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
- element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
事件冒泡和事件捕获
事件传递有两种方式:冒泡与捕获,事件传递定义了元素事件触发的顺序。
在 *冒泡 *中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 *捕获 *中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);