vue怎么给dom元素添加静止滑动的事件

vue给dom元素添加静止滑动的事件方法：

1、直接利用mousewheel事件替代scroll事件。

2、鼠标滚轮，显而易见动动鼠标滚轮就能触发事件，用光标拖拽滚动条就能触发事件。

打印结果：

elem.children和elem.childNodes都是返回元素的 直接子元素 。

区别在于：

elem.children 返回的是所有标签的元素节点的集合；

elem.childNodes 包括当前节点的所有子节点的集合。除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。其中文本节点包括：空格、换行符和制表符等。

常见的方法：

getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()、querySelector()、querySelectorAll()

①getElementById()返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。注意：如果有几个相同id名，只返回第一个。

②getElementsByClassName()方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。

这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

注意：这个方法的参数可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

③getElementsByTagName()方法返回所有指定标签的元素。返回值是一个HTMLCollection对象(类似数组),任何元素的变化会实时反映在返回结果中。

这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

④getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

⑤querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

⑥querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

①创建一个元素可以用createElement()方法：

②给元素设置属性可以用setAttribute()方法：

③createTextNode()方法用来生成文本节点，参数为所要生成的文本节点的内容。

添加元素的方法有：

①appendChild()是在调用该方法的元素内添加新元素。新元素是作为子元素被添加的，且是添加在元素内最后的位置。

②insertBefore()也是在调用该方法的元素内添加新元素。但该方法接收两个参数，一个是被添加的元素，另一个是被“替位”的子元素。新元素会插入在旧子元素的位置之前。

删除元素方法有：

removeChild()能删除指定的元素

替换元素方法有：

replaceChild()接受两个参数：要插入的元素和要替换的元素

举例说明：

① DOM0级事件就是将一个函数赋值给一个事件处理程序属性。

②它的一个事件处理程序只能对应一个事件处理程序，也就是如果对同一事件,后面的处理程序会覆盖前面的.。

①** DOM2级事件处理方式指定了添加事件处理程序和删除事件处理程序的方法，addEventListener和removeEventListener**。

②它的一个事件可以添加多个事件处理程序（可以写多个函数），而不会被后面的所覆盖，同时也不会覆盖DOM0级事件。

③它可以选择在捕获阶段还是冒泡阶段处理程序。

④IE9之前不支持DOM2级事件，而DOM0则跨浏览器且无兼容问题；

DOM0（属性绑定，兼容性好）：将一个函数赋值给一个事件处理属性

在dom上直接绑定事件（一个事件只能绑定一次），没有事件传播（事件一旦发生就立即调用句柄执行）。缺点：一个事件处理程序只能对应一个处理函数。

监听方法：

1.在标签内写onclick事件

<input id="myButton" type="button" value="Press Me" οnclick="alert('thanks')" >

alert()中的this的值会变成全局(window)对象的引用（在 严格模式 中为 undefined）。

2.在JS写onlicke=function（）{}函数

document.getElementById("myButton").onclick = function () {

    alert('thanks')

}

this的指向

用DOM0级的方式绑定事件是在元素对象的作用域内运行，因此在事件函数内的this属性不是引用全局对象，而是引用当前元素对象，可以用this获取当前元素的属性。

$btn.onclick=function(){alert('输出当前元素id：'this.id)}

删除DOM0事件处理程序，只要将对应事件属性置为null即可：

btn.onclick = null；

DOM2：（函数绑定，兼容性不好）

采用addEventListener来注册事件，支持 事件流 的捕获过程和冒泡过程（注册事件的时候第三个参数控制）

只有一个监听方法，添加事件处理程序：addEventListener()，可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

移除事件处理程序：removeEventListener()，不能移除匿名添加的函数。

它们都有三个参数：

第一个参数是事件名（如click）；

第二个参数是事件处理程序函数；

第三个参数表示 是否在捕获时执行事件处理函数 ，默认为false表示在冒泡阶段调用。

和DOM0级事件的绑定一样，这种方式也是依附在元素的作用域执行，因此this保存的同样是当前元素对象的引用。

注：

a)  eventName的值均不含on，如注册鼠标点击事件eventName为click

b)  给EventListener传递一个（普通或者箭头）函数，则处理函数中的this指的是指当前dom元素；如果传递函数的引用，则this指全局对象，除非通过bind调用想要访问对应作用域对象：

element.addEventListener('click', this.onclick2.bind(this) ,false)

c)  通过addEventListener添加的事件处理程序，只能通过removeEventListener来删除，也就是说通过addEventListener添加的匿名函数将无法被删除。

d)IE中的DOM2级事件处理使用了attachEvent和detachEvent来实现，这俩个方法接受俩个相同的参数，事件处理名称和事件处理函数。IE8级更早版本只支持冒泡阶段触发句柄，所以attachEvent添加的事件都会被添加到冒泡阶段，并且要在事件前面加on（例如onclick）

document.getElementById("myTest").attachEvent("onclick", function(){alert(1)})

//等价于

document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false)

只有DOM2级包含事件流：事件捕获阶段、处于目标阶段和事件冒泡阶段

<span>

    <a></a>

</span>

点击a后capturing(捕捉)阶段事件传播会从document->span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document 。

区别：

如果定义了两个dom0级事件，dom0级事件会覆盖；dom2不会覆盖，会依次执行

dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

dom2提供了一种更精细的手段控制listener的触发阶段（即可以选择捕获或者冒泡）

DOM3事件

DOM3级事件规定了一下几种事件：

UI事件，当用户与页面上的元素交互时触发；

焦点事件，当元素获得或者失去焦点时触发；

鼠标事件，当用户通过鼠标在页面上执行 *** 作时触发；

滚轮事件，当使用鼠标滚轮（或类似设备）时触发；

文本事件，当在文档中，输入文本时触发；

键盘事件，当用户通过键盘在页面上执行 *** 作时触发；

合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；

变动事件，当底层Dom结构发生变化时触发；

DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。

DOM中的事件模拟（自定义事件）

DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建自定义事件可以由createEvent("CustomEvent")

返回的对象有一个initCustomEvent（）方法接收如下四个参数

1）type：字符串，触发的事件类型，自定义，例如 “keyDown”，“selectedChange”

2）bubble（布尔值）：标示事件是否应该冒泡；

3）cancelable(布尔值)：标示事件是否可以取消；

4）detail（对象）：任意值，保存在event对象的detail属性中；

可以像分配其他事件一样在DOM中分派创建的自定义事件对象，如：

var  div = document.getElementById("myDiv")

EventUtil.addEventHandler(div,"myEvent", function () {

    alert("div myEvent!")

})

EventUtil.addEventHandler(document,"myEvent",function(){

    alert("document myEvent!")

})

if(document.implementation.hasFeature("CustomEvents","3.0")){

    var e = document.createEvent("CustomEvent")

    e.initCustomEvent("myEvent",true,false,"hello world!")

    div.dispatchEvent(e)

}

这个例子中创建了一个冒泡事件myEvent，event.detail的值被设置成了一个简单的字符串，然后在div和document上侦听该事件。因为在initCustomEvent中设置了事件冒泡，所以当div激发该事件时，浏览器会将该事件冒泡到document。

写一个行内onclick，行外赋值onclick，和evenrlistener，怎么输出？

为什么一般在冒泡阶段，而不是在捕获阶段注册监听? 

---