什么是事件 ，以及事件的使用与处理程序

什么是事件

1.HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
简单的说就是 js和html之间交互的触发点。
2.事件的分类

    窗口

    焦点

    鼠标

    键盘

事件绑定的几种方式

在Javascript中，事件绑定一共有3种方式：

① 行内绑定

② 动态绑定

③ 事件监听
1、行内绑定

基本语法：

<标签 属性列表 事件=”事件的处理程序” />

< input type=’button’ onclick=’display()’ />

以上代码就是最典型的行内绑定，虽然可以完成我们需要的功能，但是其把结构+样式+行为都绑定在同一个标签中，不利于后期维护。

2.动态绑定
基本语法：
dom对象.事件 = 事件的处理程序（通常是一个匿名函数）
行内绑定与动态绑定的区别
在Javascript中，有一个特殊对象叫做this，其随着运行环境的不同，其指向也是不同的！

事件流

概念

简单来讲事件流就是页面接受事件的顺序，事件发生后会在元素节点之间按照某种顺序传播

document->html->body->div->body->html->document这是DOM2级规定的事件流顺序，如下图：

< body>
< div id=“outer”>
< div id=“inner”>inner</ di v>
< /div>
< script>
// 点击inner的执行顺序
var inner = document.querySelector(’#inner’);
var outer = document.querySelector(’#outer’);
// on***/attachEvent 只能得到冒泡阶段
// 第三个参数默认是false 表示处于冒泡阶段 假如是true表示捕获阶段
inner.addEventListener(‘click’,function() {
console.log(‘捕获 inner’); //3.
},true);

    outer.addEventListener('click',function() {
        console.log('捕获 outer'); //2.
    },true);
    outer.addEventListener('click',function() {
        console.log('冒泡 outer'); //4
    },false);
    document.body.addEventListener('click',function
    () {
        console.log('冒泡 body'); //5
    });
    document.body.addEventListener('click',function
    () {
        console.log('捕获 body');   //1.
    },true);

    // document->html->body->outer->inner->outer->body...
</script>

捕获阶段一般不做什么操作，冒泡阶段可以做一些操作，比如事件委托就是利用冒泡来做的。

有的事件不具有冒泡阶段，比如 焦点事件、onmouseenter/onmouseleave （onmouseour/onmouseout具有冒泡）

dom事件流

事件流包括三个阶段：捕获阶段、目标阶段、冒泡阶段

事件冒泡：事件由最具体元素触发，向上传播的过程；

处于目标阶段：触发事件的那个节点，（目标元素）；

捕获阶段：事件由不具体的元素向下查找，直到找到你触发的那个元素，与事件冒泡相反；

阻止冒泡： e.stopPropagation();
Dom操作的方法
通过:nodeType来检测节点类型，
增删改查：
增：

1.createElement() 创建标签
2.createTextNode() 创建文本
3.createDocumentFragment() 创建文档碎片,所有的操作是在内存中进行的
 //createDocumentFragment()：为了避免重绘和回流：咱们插入dom时可采用createDocumentFragment，最后一次性的再添加到页面的dom中
 4.cloneNode(true)  克隆  //添加true代表深度克隆，包括子节点的所有内容也可以克隆过来

例如：
 //需求：创建一个div，并添加文字，追加到页面上
 var odiv=document.createElement('div');
 var otext=document.createTextNode('1906A')

//将文本追加到div上  appendChild
odiv.appendChild(otext);

//再将div追加到body上
document.body.appendChild(odiv)

删、修改：

父节点.appendChild(子节点)  尾追加
父节点.insertBefore(新节点,参考节点) 前追加
父级节点.removeChild(要删除的子级节点) 移除节点
replaceChild(新节点，旧节点)  替换节点

查：

getElementById()  获取id ，如果页面上有多个相同id，只返回第一个
getElementsByTagName() 获取标签名 返回是类数组
getElementsByName()  获取表单中name名称  返回类数组
getElementsByClassName  只能获取class名称  返回类数组
querySelector()  只获取匹配的第一个css选择器  //特别适合移动端
querySelectorAll()  获取匹配的css选择器类数组 //特别适合移动端

parentNode:找父节点
parentElement：找父元素

previousSibling：找前一个兄弟节点
previousElementSibling：找前一个兄弟元素
nextSibling：找后一个兄弟节点
nextElementSibling：找后一个元素节点

childNodes:属性，即包括元素节点，也包括文本节点
children:属性 只获取直接子级元素，不获取文本节点（元素类型===1）
firstNode：找第一个节点
lastNode：找最后一个节点
hasChildNodes：用于判断是否有子元素

设置属性

获取： getAttribute('title')
设置： setAttribute('title','修改的属性')

事件处理程序

事件处理程序就是响应某个事件的函数，简单地来说，就是函数。我们又把事件处理程序称为事件侦听器。事件处理程序是以“on“开头的，比如点击事件的处理程序是”onclick“，事件处理程序大概由以下5种。
1 HTML事件处理程序
2 DOM0级事件处理程序
3 DOM2级事件处理程序
4 IE事件处理程序
5.跨浏览器的事件处理程序
addEventListener();

document对象和所有文档元素都定义了一个名叫addEventListener()方法，使用这个方法人可以为事件目标注册事件处理程序。接收三个参数，第一是要注册处理程序的事件类型，可以是字符串或名字，但不可以带处理程序属性的on前缀。第二是指定类型的事件发生时调用的函数。第三是布尔值，一般会给这个参数为false，如果为true，那么函数将注册为捕获事件处理，并在事件不同的调度阶段调用。

本文地址：https://blog.csdn.net/hanbic/article/details/107298327