2019-10-30 vue记录随笔

1.组件 is：

有些 HTML 元素，诸如 

、
、 和 ，对于哪些元素可以出现在其内部是有严格限制的。

这个自定义组件  会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：




2.事件修饰符：

.stop         等同于JavaScript中的event.stopPropagation()，防止事件冒泡

.prevent    等同于JavaScript的event.preventDefault()

.capture    捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内  父节点-》子节点的点击事件

.self          修饰符.self只会触发自己范围内的事件，不会包含子元素。

.once        如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。

.passive    浏览器知道了一个监听器是 passive 的，它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。

            document.addEventListener("foo",function(event) {// 在 document 上绑定 foo 事件的监听函                           数  console.log(event.defaultPrevented)// false                            event.preventDefault()console.log(event.defaultPrevented) // 还是 false，preventDefault() 无效}, {

  passive: true})

3.onmouseover onmouseenter的区别

一：onmouseover、onmouseout：

鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）

二：onmouseenter、onmouseleave：

　　没有事件冒泡，其他跟onmouseover 没有区别！！！

      鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）

4.事件捕获和冒泡（默认是冒泡）

阻止事件冒泡：给div3的绑定事件改为。ev.canceBubble=true;

function fdiv3(ev){


            var en=ev || event;

            en.cancelBubble=true;

            alert("div3");

        }

事件捕获：

从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

odiv3.addEventListener("click",function(){

            alert("div3");

        },true);

结论：绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。