本网站(662p.com)打包出售,且带程序代码数据,662p.com域名,程序内核采用TP框架开发,需要联系扣扣:2360248666 /wx:lianweikj
精品域名一口价出售:1y1m.com(350元) ,6b7b.com(400元) , 5k5j.com(380元) , yayj.com(1800元), jiongzhun.com(1000元) , niuzen.com(2800元) , zennei.com(5000元)
需要联系扣扣:2360248666 /wx:lianweikj
JavaScript DOM 事件模型
chenguangming9 · 332浏览 · 发布于2020-04-03 +关注

JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制、事件反馈、事件冒泡、事件捕获以及事件委托能帮助我们更好的处理事件,写出更优的代码

事件驱动机制

  1. 当事件发生时,我们收到事件的反馈,在 JavaScript 中,事件反馈是我们自行定义的事件处理函数

  2. 事件,如点击事件、鼠标移入事件等,是每一个元素与生俱来的能力

  3. 通常说的绑定事件,实际上是绑定事件的反馈,即事件处理函数

  4. 例如点击一个按钮,按钮元素对象是事件发送器或事件源,事件是鼠标点击事件,事件处理函数是侦听器

  5. 元素对象发出事件,事件处理函数做出反应,这就是 JS 的事件驱动机制

在观察者模式中,事件发送器就是主题,事件处理函数即侦听器就是观察者

绑定事件反馈

  1. 内联属性

    <button onclick="test()">按钮</button>

    介于结构和逻辑要相分离,不建议使用内联方式绑定

  2. 事件句柄

    var oBtn = document.getElementsByTagName('button')[0];
    oBtn.onclick = function() {    // this -> oBtn}

    兼容性好,但是重复绑定会覆盖

  3. 事件监听器

    var oBtn = document.getElementsByTagName('button')[0];
    oBtn.addEventListener("click", funtion(){    // this -> oBtn
     }, false);
    oBtn.addEventListener("click", test, false);
    funtion test(){ 
        // 事件处理函数}

    重复添加,不会覆盖之前添加的监听器,但是如果事件类型、事件处理函数和最后一个布尔参数都相同,则不会重复执行

    IE8 及以下不支持 addEventListener,可用 attachEvent 代替

    var oBtn = document.getElementsByTagName('button')[0];
    oBtn.attachEvent("onclick", funtion(){	// this -> window
        }); 
    // 区别于 addEventListener,第一个参数使用 'onclick',而不是 'click'// 并且内部 this 指向 window

    兼容性封装

    function addEvent(elem, type, fn) {    if (elem.addEventListener) {
            elem.addEventListener(type, fn, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, function(ev) {
                    fn.call(elem, ev); // call 兼容性比 bind 好
                });
        } else {
            elem['on' + type] = fn;
        }
    }
  4. 解除绑定

    oBtn.onclik = null;
    oBtn.removeEventListener("click", test, false); // 解除 addEventListeneroBtn.detachEvent('onclick', test); // 解除 attachEvent

    示例:点击一次后清除事件反馈

    oBtn.onclik = function() {	// ...
        this.onclick = null;
    }// 非严格模式oBtn.addEventListener("click", funtion() {	// ...
        this.removEventListener('cilck', arguments.callee, false);
    	}, false);// 严格模式oBtn.addEventListener("click", funtion temp() {	// ...
        this.removeEventListener('click', temp, false);
    	}, false);

事件冒泡和捕获

  1. 事件冒泡:当一个元素发生事件时,该事件会向父级元素传递,按由子到父的顺序触发一连串的事件反馈,称之为事件冒泡

    DOM 上的嵌套关系会产生事件冒泡,例如两个 div 嵌套,点击内部的 div,触发内部 div 的点击事件,内部 div 的点击事件处理函数进行响应,这个事件向其父级即外部 div 传递,外部 div 也有点击事件,外部 div 所绑定的点击事件反馈也会响应

    <div class="outer">
        <div class="inner"></div></div>
    var outer = document.getElementsByClassName('outer')[0],
        inner = outer.getElementsByClassName('inner')[0];
    outer.addEventListener('click', function () {    console.log('bubble outer');
    }, false);
    inner.addEventListener('click', function () {    console.log('bubble inner');
    }, false);// addEventListener 最后一个参数默认值为 false,表示事件冒泡// 点击 inner,打印出// bubble inner // bubble outer
  2. 事件捕获:当一个元素发生事件时,该事件会向父级元素传递,按由父到子的顺序触发一连串的事件反馈,称之为事件捕获

    事件捕获与事件冒泡的触发顺序相反,同样需要 DOM 上的嵌套关系

    outer.addEventListener('click', function () {    console.log('outer');
    }, true);
    inner.addEventListener('click', function () {    console.log('inner');
    }, true);// addEventListener 最后一个参数使用 true,表示事件捕获// 点击 inner,打印出// outer// in
  3. 捕获和冒泡的执行顺序

    outer.addEventListener('click', function () {    console.log('bubble outer');
    }, false); // 冒泡inner.addEventListener('click', function () {    console.log('bubble inner');
    }, false); // 冒泡outer.addEventListener('click', function () {    console.log('outer');
    }, true); // 捕获inner.addEventListener('click', function () {    console.log('inner');
    }, true); // 捕获// 点击 inner,打印出// outer// bubble inner// inner// bubble outer

    点击一个元素,元素即事件源,若事件源绑定了事件处理函数,且设定了事件捕获,则先执行捕获,捕获执行完毕后,按照绑定顺序执行该事件源绑定的事件,如果设定了事件冒泡,再执行冒泡

  4. focus blur change submit reset select 事件没有冒泡和捕获,IE 浏览器没有事件捕获

阻止事件冒泡

  1. 阻止冒泡的方法

    Event 的原型上有 stopPropagation 方法,可以阻止冒泡,是 w3c 的规范

    Event 的原型上有 cancleBubble 属性,赋值为 true,可以阻止冒泡

  2. addEventListener 绑定事件处理函数,拿到事件对象

    var outer = document.getElementsByClassName('outer')[0],
        inner = outer.getElementsByClassName('inner')[0];
    inner.addEventListener('click', function (ev) {    	console.log(ev); // 事件对象 ev
        	ev.stopPropagation(); // 阻止事件冒泡
        }, false);
  3. IE 浏览器没有 stopPropagation 方法,可以使用 cancelBubble 属性

    注意:IE 浏览器中事件对象存放在 window.event 中。IE8 不支持 addEventListener 方法

    // 封装阻止冒泡的方法function cancelBubble(ev) {    if (ev.stopPropagation) {
            ev.stopPropagation();
        } else ev.cancelBubble = true; // 兼容 IE8 及以下}// 使用上文中封装好的 addEvent 方法function addEvent(elem, type, fn) {    if (elem.addEventListener) {
            elem.addEventListener(type, fn);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, function (ev) {
                fn.call(elem, ev);
            });
        } else {
            elem['on' + type] = fn;
        }
    }// 绑定事件处理函数var outer = document.getElementsByClassName('outer')[0],
        inner = outer.getElementsByClassName('inner')[0];
    addEvent(inner, 'click', function (ev) {        var ev = ev || window.event; // IE 兼容性写法
        	cancelBubble(ev); // 阻止冒泡
        });

阻止默认事件

  1. 三种方法

    • 事件对象 preventDefault() 方法,兼容 IE9 及以上

    • 事件对象 returnValue = false,兼容 IE8 及以下

    • 事件处理函数 return false

  2. 兼容性写法

    function preventDefaultEvent(ev) {    if (ev.preventDefault) {
            ev.preventDefault();
        } else ev.returnValue = false; // 兼容 IE8 及以下}
  3. 右键菜单事件

    document.oncontextmenu = function (ev) {    var ev = ev || window.event;    // 1. ev.preventDefault();  // IE9 及以上
        // 2. ev.returnValue = false; // IE8 及以下
        // 3. return false;}
  4. a 标签跳转事件

    href 使用伪协议

    <a href="javascript:void(0);">a 标签</a> <a href="javascript:;">a 标签</a> <a href="#">a 标签</a> <!--跳转到当前页面顶部-->

    onclick 事件 return false

    <a href="http://www.baidu.com" onclick="return false">a 标签</a><a href="http://www.baidu.com" onclick="return test(),false">a 标签</a><!--第二个是利用了 “,” 分隔符会返回最后一个的特点,与 test 方法无关-->

    绑定事件处理函数

    <!--内联绑定--><a id='taga' href="http://www.baidu.com" onclick="return test()">a 标签</a><!--句柄绑定--><script>
        document.getElementById('taga').onclick = test;    function test(ev) {       var ev = ev || window.event;    	// 1. ev.preventDefault();  // IE9 及以上
        	// 2. ev.returnValue = false; // IE8 及以下
        	// 3. return false;
        }    // 前两种方式在使用内联属性绑定时,不需要在属性上加 return,第三种则需要</script>

    表单的 action 属性支持 javascript: 伪协议,onsubmit 或者提交按钮点击事件都可以绑定处理函数,阻止提交的方法和阻止 a 标签跳转的方法类似

冒泡捕获流

  1. 事件流:描述从页面中接收事件的顺序

  2. 事件冒泡流:微软 IE 提出,Event Bubbling

  3. 事件捕获流:网景 Netscape 提出,Event Capturing

  4. 事件流三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

    元素触发事件时,首先事件捕获阶段,由父到子的执行事件处理函数,然后处于目标阶段,该元素的事件处理函数按绑定顺序执行,最后事件冒泡阶段,由子到父的执行事件处理函数

事件和事件源

  1. 事件即事件对象,可以由事件处理函数的参数拿到

    IE8 及以下中事件对象存放在 window.event 中

    // btn 按钮元素btn.onclick = function(ev) {    var ev = ev || window.event; // IE8 兼容性写法}
  2. 事件源即事件源对象,是发生事件的元素,即事件发送器,可以从事件对象中获取

    IE8 及以下只有 srcElement,firefox 低版本只有 target,chrome 两者都有

    // btn 按钮元素btn.onclick = function(ev) {    var ev = ev || window.event; // IE8 兼容性写法
        var tar = ev.target || ev.srcElement; // 获取事件源的兼容性写法}

事件委托

  1. 事件委托也叫事件代理,指对父级元素绑定事件处理函数,通过获取事件源来处理子元素

  2. 示例:点击按钮使列表 ul 增加 li 元素,点击每个 li 元素打印出其中的内容(innerHTML)

    如果不使用事件委托,需要循环对每个 li 进行绑定,点击按钮添加新的 li 元素后也要进行绑定,效率低下

    使用事件委托,直接对 ul 绑定点击事件处理函数,获取事件对象、事件源对象,再对源对象进行处理

    <body><button>btn</button><ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li></ul><script>
        var oBtn = document.getElementsByTagName('button')[0],
            oList = document.getElementsByTagName('ul')[0],
            oLi = oList.getElementsByTagName('li');
        oBtn.onclick = function () {        var li = document.createElement('li');
            li.innerText = oLi.length + 1;
            oList.appendChild(li);
        }
        oList.onclick = function (ev) {        var ev = ev || window.event,
                tar = ev.target || ev.srcElement;        // tar 即为被点击的 li 元素
            console.log(tar.innerHTML); 
            // 返回在所有兄弟元素中的索引,借用数组 indexOf 方法
            console.log(Array.prototype.indexOf.call(oLi, tar));
        }</script></body>


相关推荐

PHP实现部分字符隐藏

沙雕mars · 1312浏览 · 2019-04-28 09:47:56
Java中ArrayList和LinkedList区别

kenrry1992 · 896浏览 · 2019-05-08 21:14:54
Tomcat 下载及安装配置

manongba · 957浏览 · 2019-05-13 21:03:56
JAVA变量介绍

manongba · 953浏览 · 2019-05-13 21:05:52
什么是SpringBoot

iamitnan · 1077浏览 · 2019-05-14 22:20:36
加载中

0评论

评论
分类专栏
小鸟云服务器
扫码进入手机网页