js Event事件

事件对象(event)

是与特定事件相关且包含有关该事件详细信息的对象 event.type、 event.target

事件目标(tartet)

是发生的事件或与之相关的对象，window、document和Element对象是最常见的事件目标

事件类型(type)

鼠标事件

键盘事件

表单事件

window事件

DOM文档加载的步骤为

1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。//DOMContentLoaded
5. 加载图片等外部文件。
6. 页面加载完毕。//load

也就是说DOMContentLoaded是在DOM树渲染完成，如果导入的是外部css,js还没完成加载。load是在所有文件加载完成

h5拖拽事件

重点

1. 创建一个可拖拽对象，需要设置元素的 draggable 属性为 true。

   <img id="dragImg" draggable="true" />
   

2. 给 dragstart 设置一个事件监听器存储拖拽数据。

3. dragenter事件，用来确定放置目标是否接受放置。

<div id="dragTarget"></div>

document.getElementById("dragTarget").addEventListener("dragenter", function(event) {
    // 阻止浏览器默认事件
    event.preventDefault();
}, false);

4.　dragover事件，用来确定给用户显示怎样的反馈信息。

document.getElementById("dragTarget").addEventListener("dragover", function(event) {
    // 阻止浏览器默认事件
    event.preventDefault();
}, false);

1. 最后是drop事件，允许放置对象。

   document.getElementById("dragTarget").addEventListener("drop", function(event) {
    event.preventDefault();
    var data=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
   }, false);
   

事件注册

addEventListener()：标准模式下，ie8之前

　　attachEvent()：ie8之前

移事件事侦听

　　removeEventListener()

　　removeattchEvent();

取消默认事件

preventDefault()：阻止默认事件

return false 与 event.preventDefault()的区别： 在事件处理函数中使用 return false; 相当于同时调用了event.stopPropagation()和event.preventDefault()

阻止冒泡事件

if(event.stopPropagation){
　　event.StopPropagation();                  // 非ie
} else {
   event.cancelBubble = true;               // ie
}

javascript　事件模型

事件捕获和事件冒泡、事件流

事件代理

事件在冒泡过程中会上传到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理

<div id="box">
    <input type="button" value="按钮" id="btn">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
</div>

var box = document.getElementById('box');

box.addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'input') {
    // some code
  }
});