DOM事件模型相关笔记

Posted on

DOM 事件

目前DOM 2 是目前使用最广泛的标准。

  1. DOM 1 方法：

  • 在 HTML 中：

    1
    2
    3
    4
    5
    var print = function() {
    	cosole.log('hi')
    }
    <button id=Y onclick="print()">A</button>
    <button id=Z onclick="print.call()">A</button>

    onclick=”要执行的代码”，一旦用户点击，浏览器就 eval(“要执行的代码”)。

  • 在 JS 中：

    1
    2
    3
    4
    5
    6
    var print = function() {
    		cosole.log('hi')
    	}
    X.onclick = print //类型为函数对象，应该用这种写法。
    X.onclick = print() //类型为 undefined
    X.onclick = print.call() //类型为 undefined

    一旦用户点击，就执行X.onclick.call(this,arguments)

  1. DOM 2 方法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>event</title>
    </head>
    <body>
    	<button id='xxx'>xxx</button>
    </body>
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    xxx.addEventListener('click', function(){
    	console.log(1)
    })
    xxx.addEventListener('click', function(){
    	console.log(2)
    })
    //xxx拥有一个队列 addeventlisteners，先进去的函数先触发，不会覆盖别的事件。
    function f1() {
    	console.log(1)
    }
    function f2() {
    	console.log(2)
    }
    xxx.addEventListener('click', f1)
    xxx.addEventListener('click', f2)

    jQuery中.one的实现原理

    1
    2
    3
    4
    5
    6
    7
    function f1() {
    	console.log(1)
    	xxx.removeEventListener('click', f1)

    }
    xxx.addEventListener('click', f1)
    //执行一次后，栈内的函数被 remove，该事件只会被触发一次。

  2. DOM 0 ：标准出现之前的事实规范

  3. 事件冒泡和事件捕获
    当点击儿子的时候，父亲和爷爷同时被点击

    fn1 fn2 fn3 的执行顺序由事件的第三个参数决定。默认情况下，或者第三个参数为 falsy 值，是由下往上执行（事件冒泡）。


    当第三个参数为true ，从上往下执行（事件捕获）。


    不同事件第三个参数的值不同时，会先进行事件捕获（true），然后再事件冒泡（flase）。


    如果同一个事件上绑定了两个不同的值时，执行顺序由代码的先后顺序执行。