HTML事件
HTML 事件可以是浏览器行为,也可以是用户行为。HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。
示例:按钮元素中添加了 onclick 属性
<button onclick="this.innerHTML=Date()">现在的时间?button>
常见的HTML事件:
事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
事件流就是描述了页面中接受事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流。
事件冒泡
事件冒泡即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的节点(文档)。(由内及外)
示例:
<span id="span"> <a id="aTag">事件测试a> span> div>
document.getElementById("aTag").addEventListener('click',aTag);
document.getElementById("span").addEventListener('click',span);
document.getElementById("div").addEventListener('click',div);
function aTag(e) {
alert("点击的是a标签");
}
function span(e) {
alert("点击的是span标签");
}
function div(e) {
alert("点击的是div标签");
}
事件捕获
事件捕获即事件最早由不太具体的节点接收,而最具体的节点最后接收到事件。(由外及内)
示例:
document.getElementById("div").addEventListener('click',div,true);
document.getElementById("aTag").addEventListener('click',aTag,true);
document.getElementById("span").addEventListener('click',span,true);
第三个参数设置为true,即为捕获事件,默认为false;否则的话,事件流还是和上面的一样,因为不管是在IE还是标准浏览器下,事件冒泡浏览器都支持的。
DOM事件流
DOM2级事件流:
DOM2级事件 规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
DOM事件级别
(1)DOM0级
DOM0级事件具有极好的跨浏览器优势,会以最快的速度绑定。绑定方式有如下两种
<div onclick="btnClick()">按钮div>
<script>
function btnClick(){
console.log("hello");
}
script>
<div id="btn">按钮div>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
console.log("点击");
}
script>
(2)DOM2级
DOM2级定义了两个事件处理程序。(观察者模式)
(3)DOM3级
对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。定义了一些新的事件,比如键盘事件,还可以自定义事件。
自定义事件:
自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。
要创建的自定义事件可以由createEvent(“CustomEvent”); 返回的对象有一个initCustomEvent()方法接收如下四个参数。
一个事件本来是要绑定到某个元素上,然而却绑定到了该元素的父(或祖先)元素上,利用事件冒泡原理,触发执行效果。
事件委托优点:
事件委托的使用方法:
var ul = document.querySelector("ul");
ul.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() === "li"){
alert("li");
}
}