js事件事件理解

Posted 2020-10-05 alan-alan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js事件事件理解相关的知识，希望对你有一定的参考价值。

js事件事件理解

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>js事件流模型</title>
</head>

<style>
    #con{
        width:200px;
        height:200px;
        background: orange;
    }
    #outer{
        position: relative;
        top: 50px;
        left: 50px;
        width:100px;
        height:100px;
        background: #eeddff;
    }
    #inner{
        position: relative;
        top: 251px;
        left: 25px;
        width:50px;
        height:50px;
        background: #44ddff;
    }
</style>
<body>
<div id="con">
con
    <div id="outer">
    outer
        <div id="inner">inner</div>
    </div>
</div>

<script>
 </script>

</body>
</html>

1.执行顺序

document->html->body-con->outer->ineer->outer->con->body->html->document

2.响应某个时间的函数叫做事件处理程序

function fnHandler(){
}

<script>
    // js事件流
    // 事件添加
    var con = document.getElementById(‘con‘);
    // con.addEventListener(‘click‘,function(){
    //     alert(‘123‘);
    // });

    // con.addEventListener(‘click‘,function(){
    //     alert(‘123‘);
    // },false);

    // con.addEventListener(‘click‘,function(){
    //     alert(‘123‘);
    // },true);
    

// DOM事件流
// DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
// DOM2级事件定义了两个方法addEventListener()和removeEventListener()
// IE不同的它有自己的方法attachEvent()和detachEvent

var  eventUtils = {
    // addEventHandler:function(){}
    addEventHandler: function(el,event,fnHandler){
        // console.log(‘test‘);
        if(el.addEventListener){
            console.log(el.addEventListener);
            el.addEventListener(event,fnHandler,true)
        }
            else{
                console.log(el.attachEvent);
                el.attachEvent(‘on‘+event,fnHandler)}
    },
    removeEventHandler: function(el,event,fnHandler){
        // console.log(‘test‘);
        if(el.removeEventListener){
            console.log(el.removeEventListener);
            el.removeEventListener(event,fnHandler,true)
        }
            else{
                console.log(el.detachEvent);
                el.detachEvent(‘on‘+event,fnHandler)}
    }
}

eventUtils.addEventHandler(con,‘click‘,function(){
            alert(‘123‘);
    });
</script>

以上是关于js事件事件理解的主要内容，如果未能解决你的问题，请参考以下文章

如何处理片段上的触摸事件？

无法理解react.js中的处理事件[关闭]

理解Javascript中的事件绑定与事件委托

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段

js事件事件理解

怎样理解js中的事件监听