英雄联盟竞猜appJavaScript事件详细讲解_javascript技巧_脚本之家

作者:运维知识    发布时间:2019-12-11 14:17     浏览次数 :

[返回]

英雄联盟竞猜app ,事件的概念

简介

事件是足以被 JavaScript 侦测到的作为。

网页中的每一个成分都得以发生某个能够触发 JavaScript 函数或程序的平地风波。

事件司空见惯与函数协作使用,当事件产生时函数才会进行。

执行JS 事件的主意:

  • HTML 事件性质能够向来奉行 JavaScript 代码
  • HTML 事件性质能够调用 JavaScript 函数
  • 你可以为 HTML 成分钦点自身的事件管理程序
  • 您能够阻碍事件的发生。
  • 等等 ...
常用的JS事件 type
鼠标单击事件 onclick
鼠标经过事件 onmouseover
鼠标移开事件 onmouseout
聚焦事件 onfocus
失焦事件 onblur
加载事件 onload
刷新页面 onunload(貌似只对IE有效)
关闭页面 onbeforeunload(貌似只对IE有效)

电竞比分网下载 1

事件:指的是文书档案只怕浏览器窗口中发出的生机勃勃对特定人机联作须臾间。大家得以因此侦听器来预定事件,以便事件产生的时候试行相应的代码。

事件流

事件流描述的是从页面中选取事件的逐生龙活虎。

  • IE 的风云流是事件冒泡流电竞比分网下载 ,,事件由子成分别获得取并沿DOM树向上传播。即事件最开头由最现实的成分(文档中嵌套档案的次序最深的特别节点卡塔尔国选拔,然后逐级提升转播至最不具体的节点(document卡塔尔国,用 stopPropagation() 方法终止冒泡。
  • Netscape 的事件流是事件捕获流,事件由根成分获取并沿DOM树向下分发。与事件冒泡流相反,事件捕获的用脑筋想是不太现实的节点(document卡塔尔(英语:State of Qatar)应该更早接受到事件,而最现实的节点最终接收到事件。早已不适用了

电竞比分网下载 2

电竞比分网下载 3

一、事件流

Event 对象

HTML DOM Event 对象

header 1 header 2
事件 event
事件目标 event.target
添加事件 element.addEventListener(type, listener, false)
移除事件 element.removeEventListener(type, listener, false)
阻止事件冒泡 event.stopPropagation()
取消默认行为 event.preventDefault()

IE 中的 Event 对象

header 1 header 2
事件 window.event
事件目标 event.srcElement
添加事件 element.attachEvent('on' + type, listener)
移除事件 element.detachEvent('on' + type, listener)
阻止事件冒泡 event.cancelBubble = true
取消默认行为 event.returnValue = false

1.平地风波流:描述的是在页面中经受事件的逐生龙活虎

事件管理程序

HTML 事件管理程序

事件直接写在html的因素里面,劣点:html和js代码紧凑的耦合在一块儿。

<a href="" onclick="alert('msg');">测试</a>

0级 DOM事件管理程序

把多个函数赋值给七个事变的管理程序属性,优点:比较轻易,跨浏览器扶助。弱点:无法增添多个事件管理程序,最后叁个平地风波会覆盖前边的风浪

document.getElementById('id').onclick = function () {
    alert(1);
}

2级 DOM事件管理程序

通过 addeventlistener() 加多风浪,只可以用 removeEventlistener() 删除这一件事件。它们都摄取多个参数:要拍卖的事件名event(不加'on')、作为事件管理程序的函数function(优点:能够加上多少个事件管理程序,)和一个布尔值useCapture。布尔参数仅仅在现世浏览器近期的多少个版本中是可加可不加的,並且true代表该事件在破获阶段推行,false代表在冒泡阶段实践,建议写false,因为微微浏览器唯有冒泡阶段。

target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, useCapture]);

IE 事件管理程序

IE8 及更早IE版本不协理 add伊夫ntListener(卡塔尔(قطر‎ 方法,Opera 7.0 及 Opera 更早版本也不扶植。 可是,对于这几个不扶助该函数的浏览器,你可以使用 attachEvent() 方法来增多事件句柄。通过 attachEvent() 加多风云,只可以用 detachEvent() 删除此事件。那多少个点子选取雷同的四个参数:事件管理程序名称 type 与事件管理函数 function,不支持第三个参数的原由:IE8--只支持冒泡冒泡流。

element.attachEvent(type, function)
element.detachEvent(type, function)

2.事件冒泡:由最实际的要素接受,然后逐级升高传播至最不现实的成分的节点

事件代理和委托

当大家供给对广大成分加多事件的时候,可以经过将事件增添到它们的父节点而将事件委托给父节点来触发管理函数。那第一得益于浏览器的平地风波冒泡机制。

<div id="box">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

<script>
    let box = document.getElementById('box');
    box.addEventListener('click', function (e) {
        // 检查事件源e.targe是否为P
        if (e.target.nodeName === 'P') {
            // 真正的处理过程在这里
            alert('p');
        }
    })
</script>

3.平地风波捕获:最不具体的节点先接到事件,而最实际的节点应该最后吸收事件

跨浏览器包容的事件管理程序(本事检验)

/*
 * @Author: bxm09
 * @Date:   2017-03-24 15:51:37
 * @Last Modified by:   bxm09
 * @Last Modified time: 2017-07-24 13:16:04
 * @Desc 跨浏览器兼容的事件处理程序(能力检测)
 */

var eventshiv = {
    // event兼容
    getEvent: function(event) {
        return event ? event : window.event;
    },

    // type兼容
    getType: function(event) {
        return event.type;
    },

    // target兼容
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },

    /**
     * 添加事件句柄
     * 2级 DOM -> IE -> 0级 DOM
     */
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, listener);
        } else {
            // 在这里由于.与'on'字符串不能链接,只能用 []
            elem['on' + type] = listener;
        }
    },

    // 移除事件句柄
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, listener);
        } else {
            elem['on' + type] = null;
        }
    },

    /**
     * 添加事件代理
     */
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this 指向 e.target
            }
        });
    },

    /**
     * 取消默认行为
     * 非IE -> IE
     */
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    /**
     * 阻止事件冒泡
     * 非IE -> IE
     */
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

console.log('eventshiv.js 文件加载成功!');

二、事件管理

1.HTML事件管理:直接抬高到HTML布局中

2.DOM0级事件管理:把二个函数赋值给贰个事件管理程序属性

3.DOM2级事件管理:

addEventListener

removeEventListener();